时间戳

首页 > 解决方案 > 在fabric js中在不同尺寸的画布中显示相同位置的对象

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

问题描述

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

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

我 在fabric js中遵循了Canvas客户端大小

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

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

见图片 我该如何解决这个问题？提前致谢

标签： javascriptangularcanvasfabricjs

解决方案

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

尝试这个

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，它将使用此代码正确加载，但是当您将新项目添加到画布时将不同步。

推荐阅读