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

Question

[SashaFrontender]

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

То есть надо в обход props как-то обращаться к ctx у canvas? Или как лучше реализовать это?

Answer 1

[Дима Паутов]

Если вы хотите изменять что-то внутри канваса, путём того, что меняются значения 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>

Comments

[SashaFrontender]

Не, наоборот, без использования props. Если использовать props, то это вызовет перерендер canvas при их изменении.

[SashaFrontender]

Или я ошибаюсь? Инициализация canvas получается будет только при монтировании компонента, а на изменение props просто какие-то перерисовки?

[Дима Паутов]

SashaFrontender, Зачем мне всё перерисовывать, если у меня изменилось свойство? Это не логично)))

[SashaFrontender]

Дима Паутов, недавно делал проект на реакте, там на любое изменение props перерисовка всего поддерева. Совсем забыл, что во вью с этим проще))