【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で画像の指定が必要。