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

【问题标题】：Fabric.js: Resize canvas and continue workingFabric.js：调整画布大小并继续工作
【发布时间】：2017-11-11 18:01:05
【问题描述】：

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

这是应用程序的工作原理

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

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

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

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

谢谢

【问题讨论】：

您是否尝试在画布上缩放对象？例如，绿色区域比灰色区域小两倍，这意味着您必须将画布上的所有对象缩放 0.5。
缩放在这种情况下不起作用。我需要绿色区域中的所有东西都保持原样，我只需要一种方法来“覆盖”该区域之外。我尝试添加两个覆盖，一个覆盖工作区域（具有最高 ID/z-index），一个覆盖整个画布（ID/z-index - 1 相对于另一个覆盖），但它也不起作用.
您想对工作区进行什么样的操作？是某种绘画吗？
@Observer 它是多个图像一个在另一个之上的组合。这是产品的设计，最终产品是绿色区域的大小。这就是为什么我需要按原样保存该区域中的对象。我也尝试过剪辑，但没有运气
剪辑应该在这种情况下工作。你可以在剪辑中包含你的逻辑吗？剪辑有什么问题？

标签： javascript canvas fabricjs

【解决方案1】：

您应该广泛使用 viewportTransform。

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

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

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

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

2) 您创建一个 500x500 像素的屏幕外画布，将对象移到那里，无需触摸新的画布缩放和平移（视口变换）并将该画布导出到 dataUrl

sn-p 有一些例子，但你需要充分了解如何使用和检查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>

【讨论】：