javascript - 无法缩放或旋转 fabricJs 图像、矩形、椭圆

Question

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

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

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

我无法调整矩形大小或旋转矩形，只能移动它。

如果我使用 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();
},

谢谢

Answer 1

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

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