缩放 fabric.js 画布对象 [英] Scale fabric.js canvas objects

问题描述

我的页面上有一个 fabric.js 画布，我想要响应.我的代码适用于缩放画布本身，但不适用于我在其上绘制的对象.任何的想法?我已经搜索过 SO，但找不到适合我的解决方案.

I have a fabric.js canvas on my page, that I'd like to be responsive. My code works for scaling the canvas itself, but not the objects I've drawn on it. Any idea? I've searched SO but couldn't find a solution that worked for me.

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);

推荐答案

这是我的缩放功能 - 我们缩放画布，然后循环所有对象并缩放它们.

Here's my zoom function - We zoom the canvas, and then loop over all objects and scale them as well.

像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();
}

这篇关于缩放 fabric.js 画布对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！