fabric js - 根据画布中添加的矩形调整完整画布的大小以实现裁剪答案

【问题标题】：fabric js - Resize complete canvas according to a rectangle added in a canvas in order to achieve croppingfabric js - 根据画布中添加的矩形调整完整画布的大小以实现裁剪
【发布时间】：2015-02-25 14:18:11
【问题描述】：

我正在使用fabric js 生成模板，我希望用户设置我正在使用以下代码的画布的高度和宽度

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

但是在这样做时，全宽画布会自行拉伸，并且对象会从调整大小的画布中消失，就像之前说的 500 像素宽一样，用户将其大小调整为 100 像素，然后项目就会消失。

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

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

【问题讨论】：

标签： javascript canvas fabricjs

【解决方案1】：

最后在做了一些研究之后，我能够做到这一点，而不是调整画布的大小，我添加了一个具有“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);

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

            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();
                    }
                }
            }

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

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();
            }

在这样做之后，我能够实现所需的功能，希望这对某人有所帮助。

这是我的小提琴http://jsfiddle.net/tbqrn/115/

【讨论】：