Javascript Girl
  1. Javascript Girl
  3. Scale fabric.js canvas objects
Intereting Posts
AngularJS: injecter un service dans une directive? Manière facile de démarrer la barre de navigation Twitter api autorisation de ma demande Exécuter jQuery après l'exécution de tous les autres JS Forme différente ACTION selon le bouton pressé L'utilisation de findOne dans une boucle prend trop de temps dans Node.js Jquery: trouvez l'élément ci-dessous un élément Comment détecter lorsque la fonction de blocage Flash "clic-to-play" de Chrome est active actuellement Configurer le module angularjs pour envoyer une demande de patch Déchirure dans la toile HTML5? JavaScript augmente SyntaxError avec JSON rendu dans le modèle Jinja Pourquoi ce code produit des nombres consécutifs? Ajout d'un nombre aléatoire après l'URL Fullcalendar, les fichiers requis pour les événements de numéros limités par jour avec plus / plus de bouton? Throw Error ('msg') vs throw new Error ('msg')

Scale fabric.js canvas objects

J'ai une toile de canvas.js sur ma page, que je voudrais répondre. Mon code fonctionne pour la mise à l'échelle de la toile elle-même, mais pas sur les objets sur lesquels j'ai dessiné. Une idée? J'ai cherché SO mais je n'ai pas trouvé une solution qui a fonctionné pour moi. 

var resizeCanvas; resizeCanvas = function() { var height, ratio, width; ratio = 800 / 1177; width = tmpl.$('.canvas-wrapper').width(); height = width / ratio; canvas.setDimensions({ width: width, height: height }); }; Meteor.setTimeout(function() { return resizeCanvas(); }, 100); $(window).resize(resizeCanvas);

Voici ma fonction de zoom – Nous agrandissons le canevas, puis on boucle tous les objets et les écailles aussi.

Appeler comme zoomIt(2.2) 

 function zoomIt(factor) { canvas.setHeight(canvas.getHeight() * factor); canvas.setWidth(canvas.getWidth() * factor); if (canvas.backgroundImage) { // Need to scale background images as well var bi = canvas.backgroundImage; bi.width = bi.width * factor; bi.height = bi.height * factor; } var objects = canvas.getObjects(); for (var i in objects) { var scaleX = objects[i].scaleX; var scaleY = objects[i].scaleY; var left = objects[i].left; var top = objects[i].top; var tempScaleX = scaleX * factor; var tempScaleY = scaleY * factor; var tempLeft = left * factor; var tempTop = top * factor; objects[i].scaleX = tempScaleX; objects[i].scaleY = tempScaleY; objects[i].left = tempLeft; objects[i].top = tempTop; objects[i].setCoords(); } canvas.renderAll(); canvas.calcOffset(); }