Konva 如何给stage添加背景图片

首先,项目引用

 

创建一个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'
    },

你可能感兴趣的:(Konva 如何给stage添加背景图片)