在fabric js中不同尺寸的画布中显示相同位置的对象

Question

我在管理面板中使用具有动态大小的织物 JS 创建一个画布，并在其中添加对象，在修改画布后，我将 JSON 数据存储到数据库中（使用：canvas.toJSON()）。 现在我在前端显示了一个画布，用于使用数据库中存储的 JSON 数据 (canvas.loadFromJSON(canvasData, this.canvas.renderAll.bind(this.canvas))) 进行编辑。如果我使用画布的相同宽度和高度，它会完美显示。但是由于画布的宽度和高度不同，对象无法显示在正确的位置，有时对象会被切碎。

例如，我在管理员中创建了一个带有1200*1000px 的画布，现在我想将画布数据加载到一个800*500px 画布窗口中，其中的对象位于同一位置。好像原始画布更大，那么我仍然必须将整个画布数据放入前端，因此我需要将画布加载到较小的画布窗口中。

我关注了 Canvas client size in fabric js

var canvas = new fabric.Canvas('c', {width: 640, height: 360});
canvas.setDimensions({width: 1280, height: 720}, {backstoreOnly: true});

如果原始模板大小很大3000*2000px 并适合600*600px 窗口，则使用上述代码 画布中的文本显示非常小，但在从画布生成图像时，它可以正确显示。 看图

See the picture 我怎样才能解决这个问题？提前致谢

Answer 1

这里有一些不同的尝试方法。

试试这个

const scaleWidth = originalWidth / currentScreenWidth;
const scaleHeight = originalHeight / currentScreenHeight;

canvas.loadFromJSON(JSON.parse(myCanvasData), 
canvas.renderAll.bind(canvas), (o, object) => {
    object.scale(yourScaleValue);
});

object.scale 方法按比例缩放。

你也可以试试：

canvas.setWidth(originalWidth * canvas.getZoom());
canvas.setHeight(originalHeight * canvas.getZoom());

还有……：

const scaleWidth = originalWidth / currentScreenWidth;
const scaleHeight = originalHeight / currentScreenHeight;

如果 scaleWidth 或 scaleHeight 小于 1，您将增加画布和对象大小。

如果 scaleWidth 或 scaleHeight 大于 1，您将减小画布和对象的大小。

canvas.loadFromJSON(JSON.parse(myCanvasData), 
canvas.renderAll.bind(canvas), (o, object) => {
    if(scaleWidth > 1){
        object.width = object.width / scaleWidth;
    }else if (scaleWidth < 1){
        const scalePercentage = 1 - scaleWidth;
        object.width = (object.width * scalePercentage) + object.width;
    }else{
        //same size, no scaling necessary
    }
});

最后：

canvas.viewportTransform = [(currentScreenWidth / originalWidth), 0, 0, (currentScreenHeight / originalHeight), 0, 0];

更改视口变换可能会产生负面影响。例如：如果您正在加载的场景创建的宽度和高度为 1440 X 900，并且您当前的分辨率为 1920 X 1080，它将使用此代码正确加载，但是当您将新项目添加到画布时将不同步。