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

xzv2uavs 于 2023-04-10 发布在 Java

关注(0)|答案(1)|浏览(131)

我有一个Vue 3单文件组件，其中包含一个canvas元素。我使用的是fabric npm包。如果我使用

data: function () {
 return {
  canvas: null,
 }
},
mounted: function () {
 const canvasElement = vm.$refs['canvas']
 const canvas = new fabric.Canvas(canvasElement)
}

画布工作正常，我能够调整组件的大小，编辑文本对象等。
但当我加上这一行时：

this.canvas = canvas

那么画布上的所有对象都将失去其可编辑和可调整大小的特性。（双击文本不起作用，使用光标时边角不允许调整大小）。其他人有过这种经历吗？有已知的解决方案吗？

JavaScript

来源：https://stackoverflow.com/questions/71157676/fabric-js-canvas-loses-editability-and-resizability-when-assigned-to-vue-data-at

1条答案

按热度按时间

cwdobuhd1#

经过一些尝试和错误，下面是我如何让Vue3与Fabric.js画布一起工作的。
1.在组件的setup脚本中，创建一个名为canvas的变量，并为其分配一个值null。
1.在mounted()生命周期钩子中设置画布。
1.现在，当您需要与画布交互时，可以在method函数中使用this.canvas。

<script>
import { fabric } from 'fabric';

export default {
setup() {
  let canvas = null;

  return {
   canvas
  }
 },
 mounted() {
  const fabricRef = this.$refs.canvas;
  this.canvas = new fabric.Canvas(fabricRef, 
  { 
   width: 800, 
   height: 800
  })
 },
 methods: {
   addText() {
    const textbox = new fabric.Textbox('Lorum ipsum dolor sit amet',    {
    left: 50,
    top: 50,
    width: 150,
    fontSize: 20,
     });
    this.canvas.add(textbox).setActiveObject(textbox);
    }
  }
}

</script>

为什么采取这种方法？
根据我的观察，如果我创建了一个data属性来保存我的canvas元素，那么我添加到canvas的元素是不可编辑的：
似乎不起作用：

<script>
// ...
 data() {
 return {
  canvas: null;
}
}

// ...
</script>

赞(0）回复(0）举报 2023-04-10

我来回答

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

1条答案

相关问题

热门标签

最新问答