使用其所有对象缩放织物 js 画布

Question

我正在使用一个函数来缩放整个 fabric.js 画布，这个函数像 zoomCanvas(2.2) 一样采用百分比值；其中 2.2 表示 220%，但不是百分比，我需要按像素缩放画布以适应容器中的画布，例如，当从 json 数据将画布加载到页面上时，其初始大小为 1200 像素 x 700 像素，而我的容器大小为 500 像素。现在我需要找到一种方法可以将此 500px 转换为百分比值，以便整个画布及其所有对象都适合 500px。

这是比例函数，其中因子是百分比值

   function zoomCanvas(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();



var tcounter = 0;

for (var i in objects) {

    tcounter++;


    //alert(tcounter);
    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();
}

Answer 1

您应该有一个具有某些尺寸的原始画布。从该画布中，您应该只找到您的 factorX 和 factorY 值。例如，您的原始画布是 1280x1020 px，您需要转换为 500x500px 的尺寸。

var factorX = 500 / 1280;
var factorY = 500 / 1020;

然后，修改你的函数

function zoomCanvas(factor) {...}

到

function zoomCanvas(factorX, factorY) {...}

使用 factorX 作为宽度值，使用 factorY 作为高度值。

Answer 2

你需要的比例因子是：

scaleRatio = Math.min(containerWidth/canvasWidth, containerHeight/canvasHeight);

要缩放你的画布，你真的应该使用：

canvas.setDimensions({ width: canvas.getWidth() * scaleRatio, height: canvas.getHeight() * scaleRatio });

然后

canvas.setZoom(scaleRatio)

不需要自定义缩放功能