Question

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

 <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>

据Konva Docs说，这是怎么做的：

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'

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

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"
    }
  }
}

似乎什么都没有用。我确信我有一个缺失的步骤。

Answer 1

诀窍似乎是通过将configImg置于计算属性中来使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" } }具有反应性，因为图像将在安装后加载。

 ULONG value; 

 value = 5;

 DbgPrint("The value is: %U", value);

Answer 2

  mounted() {
    this.testImg.onload = () => this.$refs.layerImg.getStage().draw()
    this.testImg.src = "https://konvajs.github.io/assets/lion.png"
  }

Vue.js Konva库显示一个简单的图像，我错过了什么？

2 个答案: