Fabric.js：调整画布大小并继续工作

Question

我正在处理用户上传的Fabric.js操作图像。

以下是应用程序的工作原理

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

用户单击save，目前我将绿色区域保存为图像，但我还需要将整个画布调整为仅绿色区域。

我尝试更改整个画布的width和height，然后redrawAll()，但画布向左下方，只有一小部分工作区可见，其余的是空的灰色。

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

谢谢

Answer 1

你应该大量使用viewportTransform。

让我们举一个例子： 你有一个1000x1000的canvas元素，你想要在500x500像素的区域上工作。

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

什么时候保存，你有两个选择：

1）设置一个viewportTransform，让你覆盖原始画布的所有内容并导出到dataurl

2）你创建一个500x500px的屏幕外画布，你将对象移到那里，而不触及新的画布缩放和平移（视口转换）并将该画布导出到dataUrl

该代码段中有一些代码，但您需要完全了解如何使用和检查fabricCanvas的toDataUrl选项。

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>