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

Question

如标题所示，我将

fabricJS 4.6.0

与

VueJs 3

一起使用。

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

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

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

使其工作的唯一方法是将 canvas 声明为 const，如果我使用

this.canvas

不起作用。

这里是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 不喜欢将画布转换为代理。解决这个问题的一种方法是使用全局变量而不是使用数据。您还可以从 data() 声明中删除画布，这将使其在整个模板和代码中仍然可访问，但不会使其成为反应性的。

参见原始帖子Fabricjs，显示选择手柄，但在与其他形状一起选择之前不可单击

Answer 2

我认为这个问题与 vuejs 反应性有关。

也许您可以在整个逻辑中使用 const 并在逻辑末尾将 const 分配给数据变量。

this.canvas = canvas

这是它的工作演示。

https://jsfiddle.net/akshayd121/hjgotm7d/1/

在这里发现了类似的问题，尽管旋转和缩放在上面的演示示例中起作用。他们中的一些人指出这种方法在编辑文本、旋转和缩放方面存在一些问题。

Fabric JS Canvas 在分配给 Vue 数据属性时失去可编辑性和可调整大小性

Answer 3

对我来说，我使用

markRaw

来让它发挥作用。

import { markRaw } from 'vue';
...
initFabric: function () {
    const canvas = markRaw(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,
    }));
    ...
    this.$nextTick(() => {
        var rect = markRaw(new fabric.Rect({
            left: 100,
            top: 50,
            fill: "yellow",
            width: 200,
            height: 100,
            stroke: "lightgreen",
            strokeWidth: 4,
            zoomX: 1,
            zoomY: 1,
            dirty: true,
        }));
        ...
    });
},