Question

我的页面上有一个简单的画布，如下所示：

画布具有响应性，因此根据您正在查看的屏幕，尺寸可以增大或减小。结果的解决方法仍然是一样的。这将始终缩放到预设的默认值1000x1000px。

这适用于缩放比例。

示例：画布在屏幕上为500x500像素，这意味着缩放比例为0.5，如果您的屏幕足够大以适应1000x1000画布。比率为1.0，依此类推。

画布还可以选择向其添加图像。这些图像也必须根据您的屏幕尺寸进行调整，就像完整的画布一样，它会在保存之前调整到适当的大小（1000x1000）。

当您上传图片时，它通常在画布上相当大：

现在图像的大小太大而无法在画布上完全显示，此时它的个别缩放比例为1.0，而画布的缩放比率保持为0.5。

如果我想调整图像的大小以使其非常适合画布，我会得到以下结果：

为了确保图片的大小不会返回到它的默认比例1.0，就像我上传时一样，我添加了以下代码：

canvas.on('object:modified', function (options) {

    options.target.set({
        width: options.target.getWidth(),
        height: options.target.getHeight(),
        scaleX: 1, scaleY: 1,
    });

});

这将在调整大小/修改后将X和Y刻度设置为1。这样每次更改它的大小时，该点将是新的1.0比例。

为了扩展我的所有对象，我编写了以下函数：

function scaleObjects()
{
    // page has been resized therefore we recalculate the aspect ratio for the canvas.
    $windowWidth = $(window).width();
    $windowHeight = $(window).height();

    //currentCanvasWidth = $windowWidth;

    var PrevHeightRatio = canvas.getHeight() / canvasHeightDefault;
    var PrevWidthRatio = canvas.getWidth() / canvasWidthDefault;

    resizeCanvas();

    var HeightRatio = canvas.getHeight() / canvasHeightDefault;
    var WidthRatio = canvas.getWidth() / canvasWidthDefault;
    var objects = canvas.getObjects();


    for (var i = 0; i < objects.length; i++) {
        objects[i].scaleX = WidthRatio;
        objects[i].scaleY = HeightRatio;

        var multiplierW = 1 / PrevWidthRatio;
        var multiplierH = 1 / PrevHeightRatio;

        var originalStartX = objects[i].left * multiplierW;
        var originalStartY = objects[i].top * multiplierH;

        objects[i].left = originalStartX * WidthRatio;
        objects[i].top = originalStartY * HeightRatio;
        objects[i].setCoords();
    }

    canvas.renderAll();
}

每次调整大小或画布时都会运行。

问题在于，每当我保存或调整画布大小时，画布的当前比例都会应用于我的图像/对象。在这种情况下，我的图像的比例为1.0，我的画布为0.5，保存或调整大小将将0.5比例应用于对象并减小其大小。然而，我希望它能够像我画布的其他部分一样缩放，因此没有任何比例。

我怎样才能实现这个目标？

这是画布的图像＆＃34; After＆＃34;调整页面大小一次：

这是一个jsfiddle：https://jsfiddle.net/L6hob1e4/2/

Answer 1

经过一些研究和一些测试，我发现了以下解决方案。我更改了将对象缩放到此的for循环：

for (var i = 0; i < objects.length; i++) {
        var previousH = (((objects[i].getHeight() / canvas.getHeight()) * canvasHeightDefault) * PrevHeightRatio);
        var previousW = (((objects[i].getWidth() / canvas.getWidth()) * canvasWidthDefault) * PrevWidthRatio);

        console.log(previousH + " - " + previousW);

        var multiplierSizeH = 1 / PrevHeightRatio;
        var multiplierSizeW = 1 / PrevWidthRatio;

        var onMaxH = objects[i].getHeight() * multiplierSizeH;
        var onMaxW = objects[i].getWidth() * multiplierSizeW;

        objects[i].height = onMaxH * HeightRatio;
        objects[i].width = onMaxW * WidthRatio;

        var multiplierW = 1 / PrevWidthRatio;
        var multiplierH = 1 / PrevHeightRatio;

        var originalStartX = objects[i].left * multiplierW;
        var originalStartY = objects[i].top * multiplierH;

        objects[i].left = originalStartX * WidthRatio;
        objects[i].top = originalStartY * HeightRatio;
        objects[i].setCoords();
    }

这将跟踪缩放之前和之后的大小，从而解决问题。

重置图像后，在画布中重新缩放图像

1 个答案: