@SashaFrontender

Как контролировать canvas во Vue?

Делаю компонент canvas. Как правильно контролировать отрисовку в нем, не перерисовывая сам canvas?

То есть надо в обход props как-то обращаться к ctx у canvas? Или как лучше реализовать это?
  • Вопрос задан
  • 61 просмотр
Решения вопроса 1
bootd
@bootd
Гугли и ты откроешь врата знаний!
Если вы хотите изменять что-то внутри канваса, путём того, что меняются значения props, то просто вешайте watch на нужные вам свойства и вызывайте те или иные методы отрисовки канваса.

// MyCanvas.vue
<template>
  <canvas ref="canvas" width="150" height="150"/>
</template>

<script>
export default {
  props: {
    prop1: {
      type: String,
      default: null
    },
    prop2: {
      type: Number,
      default: 0
    }
  },
  data: () => ({
    ctx: null
  }),
  watch: {
    prop1 (value) {
      // Изменилось значение свойства prop1, рисуем квадрат
      this.ctx.fillRect(10, 10, 55, 50);
    },
    prop2 (value) {
      // Изменилось значение свойства prop2, рисуем ещё квадрат
      this.ctx.fillRect(30, 30, 55, 50);
    },
  },
  mounted () {
    if (!this.ctx) {
      this.ctx = this.$refs.canvas.getContext("2d");
    }
  }
}
</script>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы