Fabricct使用ctx(canvas.getContext(“ 2d”))调整图像大小

时间:2019-07-20 00:28:31

标签: fabricjs

嗨, 我正在将fabric.js用于图像编辑器工具(如paint.net)。我在基于ctx(canvas.getContext(“ 2d”)调整所选图像的大小时遇到​​了一些问题。我没有获得调整大小的属性或任何代码。我尝试使用lockMovementX和lockMovementY选择矩形,但这是行不通的。 有人可以帮我吗?

谢谢。

我尝试过选择图像来创建矩形,然后对其进行裁切,但是我也想加亮需要裁切的所选图像。在ctx中起作用但在ctx中调整大小不起作用。

onCanvasMouseUp: function (event) {
    var me = this;
    this.isDown = false;
    me.mouseDown = null;
    var canvas = this.canvas;
    var ctx = canvas.getContext("2d");
    if (this.cropMode) {
        if (this.rectangle.height > 2) {
            var canvasHeight = this.firstCrop && this.zoomConfig.initialHeight > canvas.height ? this.zoomConfig.initialHeight : canvas.height;
            var canvasWidth = this.firstCrop && this.zoomConfig.initialWidth > canvas.width ? this.zoomConfig.initialWidth : canvas.width;
            var zoomLevel = canvas.getZoom();
            canvasHeight = canvasHeight * zoomLevel;
            canvasWidth = canvasWidth * zoomLevel;
            ctx.globalAlpha = .50;
            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, canvasWidth, canvasHeight);
            ctx.restore();
            ctx.save();
            ctx.beginPath();
            var left = this.rectangle.left * zoomLevel,
                top = this.rectangle.top * zoomLevel,
                width = this.rectangle.width * zoomLevel,
                height = this.rectangle.height * zoomLevel;
            ctx.clearRect(left, top, width, height);
            ctx.globalAlpha = 1;
            ctx.rect(left, top, width, height);
            ctx.clip();
            ctx.drawImage(canvas.backgroundImage._element, 0, 0, canvasWidth, canvasHeight);
            ctx.restore();
            this.updateCanvasState();
            this.firstCrop = false;
        } else {
            this.removeCropMode();
        }
    }

我希望所选的图像变亮并且可以调整所选图像的大小。我没有收到任何错误,但是没有显示调整大小的角。

0 个答案:

没有答案