Js：调整画布大小并继续工作 [英] Fabric.js: Resize canvas and continue working

问题描述

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

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

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

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

我尝试更改整个画布的width和height，然后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>

这篇关于Js：调整画布大小并继续工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！