Js:调整画布大小并继续工作

2022-04-07 00:00:00 canvas javascript fabricjs

我正在使用用户上载的Fabric.js操作图像。

以下是该应用程序的工作方式

上传的图像可以在整个画布上移动和处理(灰色区域)。完成后,我只需要中间区域。

用户点击save后,当前我将绿色区域保存为图像,但我还需要将整个画布的大小调整为仅为绿色区域。

我尝试更改整个画布的widthheight,然后redrawAll(),但画布位于左下角,只有一小部分工作区可见,其余部分为灰色。

是否可以拍摄绿色区域的快照并继续在画布上工作?

谢谢


解决方案

您应该广泛使用viewportTransform。

让我们举个例子: 您有一个1000x1000的画布元素,并且希望在500x500像素的区域上工作。

使用绿色图像或500x500的绿色矩形作为背景图像设置绿色区域,左上角为0,0。然后将Fabric画布的viewportTransform设置为[1,0,0,1,250,250],这将使您的画布平移到灰色边框的右下角。

何时是保存时间,您有两个选择:

1)设置一个viewportTransform,使您可以覆盖原始画布的所有内容并导出到dataurl

2)您创建了一个500x500px的屏幕外画布,将对象移动到那里,而不接触新画布的缩放和平移(视窗变换),并将该画布导出到dataUrl

代码片段中有一些用于示例的数字,但您需要充分了解如何使用和检查Fabric Canvas的toDataUrl选项。

数据-lang="js"数据-隐藏="假"数据-控制台="假"数据-巴贝尔="假">
var butt = document.getElementById('butt');
butt.onclick = function() {
canvas.viewportTransform = [2, 0, 0, 2, 0, 0];
var img = document.getElementById('export');
img.src = canvas.toDataURL()
canvas.viewportTransform = [1, 0, 0, 1, 250, 250];
canvas.renderAll();
}

var canvas = new fabric.Canvas('c', { backgroundColor: 'grey' });

var rect = new fabric.Rect({ width: 500, height: 500, fill: 'green'})
canvas.backgroundImage = rect;
canvas.viewportTransform = [1, 0, 0, 1, 250, 250];
var exampleRect = new fabric.Rect({left: 5, top: 5, width: 100, height: 100, fill: 'red' });
canvas.add(exampleRect);
canvas.renderAll();
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.min.js"></script>
<img id="export" />
<button id="butt" >export</button>
<canvas id="c" width="1000" height="1000"></canvas>

相关文章