我的页面上有一个fabric.js画布，我想响应一下。我的代码可用于缩放画布本身，但不能缩放我在其上绘制的对象。任何的想法？我已经搜索过了，但是找不到适合我的解决方案。
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);
这是我的缩放功能-我们缩放画布，然后在所有对象上循环并缩放它们。
打电话喜欢 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();
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句