Блог

Я пытаюсь разработать vue.js компонент для рисования фигур с помощью fabricjs. После того, как прямоугольник был нарисован, его можно выбрать, но его нельзя изменить или повернуть с помощью маркера выбора, чего я не ожидал. Я думаю, что это как-то связано с vue.js 3, потому что все работает с vue.js 2.

В этой демонстрации на JSFiddle угловые маркеры не будут работать с прямоугольниками, пока вы не выберете прямоугольник вместе с другими фигурами.

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


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

// Select the blue rectangle. The corner handles are visible but not working.
// Now, click "add", then select both rectangles. 
// Then just select any single item, now the corner handles are working. 
  

Как мне обойти это, придерживаясь vue.js 3?

Fabricjs не нравится, когда холст преобразуется в прокси. Один из способов обойти это — использовать глобальную переменную вместо использования данных. Вы также можете просто удалить canvas из data() объявления, что сделает его доступным по всему шаблону и коду, но не сделает его реактивным.

Пример:

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

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

Вы можете использовать toRaw() . Функция может изменить прокси-объект на обычный объект.

 add(color) {
  toRaw(this.canvas).add(new fabric.Rect({
    top: 20,
    left: 20,
    width: 40,
    height: 40,
    fill: color
  }))
}