首先,项目引用
<script src="https://unpkg.com/konva@8.3.14/konva.min.js"></script>
创建一个canvas组件<canvas class="canvas" id="canvas"/>
定义数据
data() {
return {
width: 0,
height: 0,
stage: null,
layer: null,
visible: false,
curText: {}
}
},
初始化stage
init() {
this.width = document.getElementById('canvas').offsetWidth
this.height = document.getElementById('canvas').offsetHeight
this.stage = new Konva.Stage({
container: 'canvas',
width: this.width,
height: this.height
})
this.setLayer()
},
设置背景图
setBg(url) {
this.stage.container().style.background = ' url(' + url + ')'
this.stage.container().style.backgroundRepeat = 'no-repeat'
this.stage.container().style.backgroundSize = 'cover'
},
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。