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

fabric js - Resize complete canvas according to a rectangle added in a canvas in order to achieve cropping

本文关键字：裁剪 调整 实现 js 布中 fabric 添加      更新时间：2023-09-26

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

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

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

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

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

最后，

在做了一些研究之后，我能够做到这一点，而不是调整画布的大小，我添加一个带有"裁剪器"类型的矩形对象，如下所述

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/

相关文章：