无法缩放或旋转fabricJs Image、Rect、Ellipse答案

【问题标题】：Can't scale or rotate fabricJs Image, Rect, Ellipse无法缩放或旋转fabricJs Image、Rect、Ellipse
【发布时间】：2022-07-29 00:43:28
【问题描述】：

如标题所示，我使用fabricJS 4.6.0 和VueJs 3。

我正在尝试简单地设置具有可调整大小的矩形的结构。

我的问题是在 initFabric 方法之外访问对象画布。

我无法调整或旋转矩形，只需移动它即可。

如果我使用 this.canvas 不起作用，唯一的方法就是将 canvas 声明为 const。

这里是 jsfiddle https://jsfiddle.net/8vzc3bj5/19/

initFabric: function () {
    var canvasEl = this.$refs.canvas;
    canvasEl.width = 1920;
    canvasEl.height = 1080;

    const canvas = new fabric.Canvas(canvasEl, {
        // isDrawingMode: true,
        centeredScaling: true,
        backgroundColor: "#fff",
        selectionBorderColor: "rgba(255, 255, 255, 0.8)",
        selectionColor: "rgba(255, 255, 255, 0.8)",
        selectionLineWidth: 2,
        borderColor: "gray",
        cornerColor: "black",
        cornerSize: 12,
        transparentCorners: true,
    });

    canvas.on("selection:created", this.handleSelection);
    canvas.on("selection:updated", this.handleSelection);

    canvas.on("after:render", this.updateCanvas);
    canvas.on("object:modified", this.updateCanvas);
    canvas.on("object:added", this.updateCanvas);
    canvas.on("object:removed", this.updateCanvas);

    canvas.on("mouse:wheel", (opt) => {
        var delta = opt.e.deltaY;
        var zoom = canvas.getZoom();
        zoom *= 0.999 ** delta;
        if (zoom > 20) zoom = 20;
        if (zoom < 0.01) zoom = 0.01;
        canvas.zoomToPoint(
            { x: opt.e.offsetX, y: opt.e.offsetY },
            zoom
        );
        opt.e.preventDefault();
        opt.e.stopPropagation();
    });

    this.$nextTick(() => {
        var rect = new fabric.Rect({
            left: 100,
            top: 50,
            fill: "yellow",
            width: 200,
            height: 100,
            stroke: "lightgreen",
            strokeWidth: 4,
            zoomX: 1,
            zoomY: 1,
            dirty: true,
        });
        canvas.add(rect);
        rect.center();
        canvas.setActiveObject(rect);
        canvas.bringToFront(rect);
        canvas.renderAll();
    });
    this.resizeCanvas();
},

谢谢

【问题讨论】：

请创建一个minimal reproducible example。适合我：jsfiddle.net/23eap5rs
@ChrisG 你是对的jsfiddle.net/8vzc3bj5/19
遇到完全相同的问题（使用 Vue3）。 on() 处理程序没有问题，鼠标光标不会将自己设置为任何角落的“缩放”箭头，只会“拖动”符号。
这有点奇怪......我无法修复它。你找到解决方案了吗？ @马吕斯
无解，很奇怪:(

标签： javascript vue.js fabricjs vuejs3

【解决方案1】：

Fabricjs 不喜欢将画布转换为代理。解决它的一种方法是使用全局变量而不是使用数据。您也可以只从 data() 声明中删除画布，这将使其在整个模板和代码中仍可访问，但不会使其具有反应性。

见原帖Fabricjs, selection handles shown but not clickable before selected together with other shapes

【讨论】：