[英]Scale fabric.js canvas objects
我的頁面上有一個 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();
}
對於那些尋找用於縮放(也稱為縮放)畫布的織物內置方法的人,請查看setZoom 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.