Question

我正在尝试在Vue应用程序中将图像显示到Konva.Stage中。但是，仅在刷新页面后或在this.adjustImage()中禁用image.onload时才加载图像。所以我在安装我的应用程序时会加载我的图像，如下所示：

 mounted() {
  window.addEventListener('resize', this.handleStageResize)
  window.addEventListener('resize', this.adjustImage)

  this.handleStageResize()

  const image = new window.Image()
  image.src =
   // 'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg'
   // 'https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg'
   'https://images3.alphacoders.com/823/thumb-1920-82317.jpg'
 // 'https://wallpapercave.com/wp/wp2559551.jpg'

 this.image.width = image.width
 this.image.height = image.height

 image.onload = () => {
   // set image only when it is loaded
   this.configImage.image = image
   this.adjustImage()
 }},

这是this.adjustImage()方法的代码：

 adjustImage() {
  console.log('Adjusting image')

  let imageHeight = this.image.height
  let imageWidth = this.image.width
  let canvasWidth = this.configKonva.width
  let canvasHeight = this.configKonva.height
  let newHeight
  let newWidth

  if (imageHeight < imageWidth) {
    newHeight = (imageHeight / imageWidth) * canvasWidth
    newWidth = canvasWidth
    if (newHeight > canvasHeight) {
      newWidth = (imageWidth / imageHeight) * canvasHeight
      newHeight = canvasHeight
    }
  } else {
    newWidth = (imageWidth / imageHeight) * canvasHeight
    newHeight = canvasHeight
    if (newWidth > canvasWidth) {
      newHeight = (imageHeight / imageWidth) * canvasWidth
      newWidth = canvasWidth
    }
  }

  this.configImage.image.height = newHeight
  this.configImage.image.width = newWidth

  this.configKonva.width = newWidth
  this.configKonva.height = newHeight
},

this.configImage和this.configKonva元素分别控制与图像和舞台对应的div元素的大小。当我评论此部分时，图像会正确加载：

  this.configImage.image.height = newHeight
  this.configImage.image.width = newWidth

  this.configKonva.width = newWidth
  this.configKonva.height = newHeight

如果需要，这是APP的模板部分：

 <v-stage
  style="background-color: gray;display: inline-block"
  ref="stage"
  :config="configKonva"
  @mousedown="handleStageMouseDown"
  @touchstart="handleStageMouseDown"
  @mouseup="handleStageMouseUp"
  @touchend="handleStageMouseUp"
  @mousemove="handleStageMouseMove"
  @touchmove="handleStageMouseMove"
  @click="handleStageMouseClick"
  @resize="handleStageResize"
  @wheel="zoom"
>
  <v-layer ref="layer">
    <v-image ref="image" :config="configImage" />
    <div v-shortkey="['del']" @shortkey="removeObject">
      <v-rect
        v-for="item in rectangles"
        :key="item.id"
        :config="item"
        @transformend="handleTransformEnd"
      />
      <!-- <v-line v-for="item in rectangles"
        :key="item.id"
      :config="item"/>-->
      <v-transformer ref="transformer" />
    </div>
  </v-layer>

  <div v-shortkey="['p']" @shortkey="debug"></div>
  <div v-shortkey="['r']" @shortkey="reset"></div>
</v-stage>

图像仅在刷新vue-Konva之后出现

0 个答案: