javascript - Fabric js - 根据 Canvas 中添加的矩形调整整个 Canvas 的大小以实现裁剪

Question

我使用 Fabric js 生成模板，我希望用户设置我使用以下代码的 Canvas 的高度和宽度

canvas.setHeight(height);
canvas.setWidth(width);

但是，在执行此操作时，全宽 Canvas 会自行拉伸(stretch)，并且对象会从调整大小的 Canvas 中消失，因为之前它的宽度为 500 像素，用户将其大小调整为 100 像素，然后项目就会消失。

我想实现一个功能，这样如果用户想要更改 Canvas 的大小，那么我将显示一个矩形，而不是调整 Canvas 的大小，并且用户可以相应地移动矩形以获得可见区域，一旦用户单击保存，然后我将根据该矩形调整 Canvas 大小，以便稍后可以处理 SVG 以进行进一步转换，但通过这样做，我不确定如何将该矩形中的可见区域获取到调整大小的 Canvas ，总之我想要像 Darkroom 这样的功能js 但适用于 Fabric js Canvas 对象。

当前功能已添加到此 JS fiddle http://jsfiddle.net/tbqrn/102/

Answer 1

最后，经过一些研究后，我能够做到这一点，而不是调整 Canvas 大小，而是添加一个具有“cropper”类型的矩形对象，如下所述

var rect = new fabric.Rect({
                    left: 100,
                    top: 100,
                    fill: 'transparent',
                    width: 400,
                    height: 400,
                    strokeDashArray: [5, 5],
                    stroke: 'black',
                    type: 'cropper',
                    lockScalingX: true,
                    lockScalingY: true,
                    lockRotation: true
                });
                canvas.add(rect);

这个矩形将用作裁剪器，当用户提交表单时，我将得到裁剪器的尺寸，如下所示以及更改 Canvas 大小

            var i;
            var croppedLeft = 0;
            var croppedTop = 0;
            var canvasJson = canvas.getObjects();
            // Cropping canvas according to cropper rectangle
            if (canvas.getObjects().length > 0) {
                var i;
                for (i = 0; i < canvas.getObjects().length; i++) {
                    if (canvas.getObjects()[i].type == 'cropper') {
                        croppedLeft = canvas.getObjects()[i].left;
                        croppedTop = canvas.getObjects()[i].top;
                        canvas.setHeight(canvas.getObjects()[i].height);
                        canvas.setWidth(canvas.getObjects()[i].width);
                        canvas.getObjects()[i].remove();
                    }
                }
            }

之后，我将相应地移动所有其他 Canvas 对象，如下所示。

for (i = 0; i < canvasJson.length; i++) {
                canvas.getObjects()[i].left = canvas.getObjects()[i].left - croppedLeft
                canvas.getObjects()[i].top = canvas.getObjects()[i].top - croppedTop
                canvas.renderAll();
            }

完成此操作后，我能够实现所需的功能，希望这对某人有帮助。

这是我的 fiddle http://jsfiddle.net/tbqrn/115/