回る男の備忘録

どこかでプログラム書いてシャニマスして野球見てTwitterやってる人間の駄文

【Vue】VueとKonva.jsを組み合わせる

こうするのじゃ

<v-stage ref="stage" :config="configKonva" style="border: 1px solid;">
  <v-layer ref="layer">
    <v-image :config="configImage"></v-image>
    <v-circle :config="configCircle"></v-circle>
  </v-layer>
</v-stage>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      configKonva: {
        width: screen.width,
        height: screen.height
      },
      configCircle: {
        x: 100,
        y: 100,
        radius: 70,
        fill: "red",
        stroke: "black",
        strokeWidth: 4,
        draggable: true,
      },
      testImage: new Image(100,200),
    };
  },
  computed: {
    configImage: function() {
      return {
        x: 100,
        y: 100,
        image: this.testImage,
        width: 300,
        height: 200,
        draggable: true
      }
    }
  },
  mounted() {
    this.testImage.src = "./hogehoge.jpg";
  },
}
</script>

これで画像と円のオブジェクトが生成される。

簡単なテンプレートの説明

v-stage

Canvasを生成。

v-layer

layerを指す。layer内にオブジェクトを配置していく。

v-circle

円を指す

v-image

画像を指す。
画像を使う際は、mountedで画像の指定が必要。