Fabricjs，显示选择手柄，但在与其他形状一起选择之前不可单击

Question

我正在尝试开发一个 vue.js 组件来使用 Fabricjs 绘制形状。\n绘制矩形后，它是可选择的，但无法使用选择手柄调整大小或旋转，这不是我所期望的。我认为这与 vue.js 3 有关，因为一切都适用于 vue.js 2。

\n

在JSFiddle 的这个演示中，角手柄在矩形上不起作用，直到您选择了矩形以及其他形状之后。

\n

\n<div id="app">\n<canvas ref="c"></canvas>\n<div>\n<button type="button" @click="add(\'red\')">\nAdd\n</button>\nSelect the blue rectangle. The corner handles are visible but not working.\nNow, click "add\xe2\x80\x9c, then select both rectangles. Then just select any single item, now the corner handles are working.\n</div>\n</div>\n<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.2.0/fabric.min.js"></script>\n<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0/vue.global.js"></script>\n\n\nvar vm = Vue.createApp({\n  data: () => ({\n    canvas: null\n  }),\n  mounted: function() {\n    var c = this.$refs.c\n    this.canvas = new fabric.Canvas(c, {\n      width: c.clientWidth,\n      height: c.clientHeight\n    });\n    this.add(\'blue\')\n  },\n  methods: {\n    add(color) {\n      this.canvas.add(new fabric.Rect({\n        top: 20,\n        left: 20,\n        width: 40,\n        height: 40,\n        fill: color\n      }))\n    }\n  }\n}).mount(\'#app\');\n\n// Select the blue rectangle. The corner handles are visible but not working.\n// Now, click "add", then select both rectangles. \n// Then just select any single item, now the corner handles are working. \n

\n

在坚持使用 vue.js 3 的同时如何解决这个问题？

\n

Answer 1

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

\n

例子：

\n

\r\n

\r\n

var vm = Vue.createApp({\n  mounted: function() {\n    var c = this.$refs.c\n    this.canvas = new fabric.Canvas(c, {\n      width: c.clientWidth,\n      height: c.clientHeight\n    });\n    this.add(\'blue\')\n  },\n  methods: {\n    add(color) {\n      this.canvas.add(new fabric.Rect({\n        top: 20,\n        left: 20,\n        width: 40,\n        height: 40,\n        fill: color\n      }))\n    }\n  }\n}).mount(\'#app\');

\r\n

<div id="app">\n  <canvas ref="c"></canvas>\n  <div>\n    <button type="button" @click="add(\'red\')">\n      Add\n    </button>\n    Select the blue rectangle. The corner handles are visible but not working.\n    Now, click "add\xe2\x80\x9c, then select both rectangles. Then just select any single item, now the corner handles are working.\n  </div>\n</div>\n<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.1.0/fabric.min.js"></script>\n<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0/vue.global.prod.js"></script>

\r\n

\r\n

\r\n

\n