Vue.js Konva 库显示一个简单的图像，我错过了什么? [英] Vue.js Konva library to display a simple image, what am I missing?

问题描述

所以我浏览了 vue-konva 页面上列出的示例代码.虽然它对创建形状进行了采样，但我对它的理解足以尝试显示一个简单的图像来开始.这是基本代码.我的问题在于如何将实际图像文件附加到图像"属性.或者如果我错过了其他东西.

 <模板><div id="应用程序"><h1>通过 Konva</h1>显示图像<div><v-stage ref="stage" :config="configKonva"><v-layer ref="layer"><v-image :config="configImg"></v-image></v层></v-stage>

</模板><脚本>从'vue'导入Vue；从 'vue-konva' 导入 VueKonvaVue.use(VueKonva)导出默认{数据() {返回 {测试图像:新图像()，配置Konva:{宽度:500，高度:500},配置图像:{x: 20,y: 20,图像:this.testImg，宽度:200，高度:200，},}}

根据 Konva 文档，这是如何做到的:

var imageObj = new Image();imageObj.onload = 函数(){var image = new Konva.Image({x: 200,y: 50,图像:imageObj，宽度:100，高度:100});};imageObj.src = '/path/to/image.jpg'

因此，我认为问题在于我如何将实际图像文件附加到图像属性上.

我尝试了以下所有方法:#1图像:/path/to/image.jpg"#2安装(){this.testImg.src = "/path/to/image.jpg"}#3数据(){返回{testImg: "/path/to/image.jpg"}}}

似乎没有任何效果.我确定我遗漏了一个步骤.

解决方案

诀窍似乎是通过将 configImg 放在计算属性中来使其具有反应性，因为图像将在安装后加载.

export default {数据() {返回 {testImg: 新图像(100, 100),配置Konva:{宽度:200，高度:200}}},计算:{配置图像:函数(){返回 {x: 20,y: 20,图像:this.testImg，宽度:200，高度:200，}}},安装(){this.testImg.src = "https://konvajs.github.io/assets/lion.png"}}

So I went through the sample code listed on the vue-konva page. Although it samples creating shapes I understood it enough to try to display a simple image to start. Here is the base code. My question lies in how do I attach the actual image file to the "image" property. Or if I am missing something else.

 <template>
  <div id="app">
    <h1>Display Image via Konva</h1>
    <div>
      <v-stage ref="stage" :config="configKonva">
        <v-layer ref="layer">
          <v-image :config="configImg"></v-image>
        </v-layer>
      </v-stage>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import VueKonva from 'vue-konva'
  Vue.use(VueKonva)

export default {
  data() {
    return {
      testImg: new Image(),
      configKonva: {
        width: 500,
        height: 500
      },
      configImg: {
        x: 20,
        y: 20,
        image: this.testImg,
        width: 200,
        height: 200,
      },
    }
  }
</script>

According to the Konva Docs this is how to do it:

var imageObj = new Image();
imageObj.onload = function() {
  var image = new Konva.Image({
    x: 200,
    y: 50,
    image: imageObj,
    width: 100,
    height: 100
  });
};
imageObj.src = '/path/to/image.jpg'

Therefore I believe the issue lies in how I attach the actual image file to the image property.

I tried the all following:

#1
image: "/path/to/image.jpg"
#2
mounted(){
   this.testImg.src = "/path/to/image.jpg"
}
#3
data(){
  return{
    testImg: "/path/to/image.jpg"
    }
  }
}

nothing seems to work. I'm sure there is a step I am missing.

解决方案

The trick seems to be to make configImg reactive by putting it in a computed property, since the image will load after mounting.

export default {
  data() {
    return {
      testImg: new Image(100, 100),
      configKonva: {
        width: 200,
        height: 200
      }
    }
  },
  computed: {
    configImg: function() {
      return {
        x: 20,
        y: 20,
        image: this.testImg,
        width: 200,
        height: 200,
      }
    }
  },
  mounted() {
    this.testImg.src = "https://konvajs.github.io/assets/lion.png"
  }
}   

这篇关于Vue.js Konva 库显示一个简单的图像，我错过了什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！