如何在Vue Konva中拉伸图像以适合舞台大小？

如何解决如何在Vue Konva中拉伸图像以适合舞台大小？

我正在使用konva.js。我有一个舞台，里面有一个形象。但是，当我调整舞台大小时，图像将被裁剪，并且看不到完整图像。有没有一种方法可以拉伸图像以使其适合舞台内部并仍然获得完整图像。

     <template>
      <div class="konvaContainer">
          <v-stage :config="stageConfig" >
            <v-layer>
              <v-image :config="imageConfig1"/>
            </v-layer>
          </v-stage>
        </div>
     </template>

     export default {
       components: {
         Loading},data: () => ({
       stageConfig: {width: 200,height:150 },imageConfig: {},scaleValue:1
       })}

我们还可以将新值设置为scaleValue还是用新值替换scaleValue的值？

解决方法

您可以将图像的大小设置为与舞台相同的大小。

<template>
  <div class="container">
    <v-stage ref="stage" :config="stageSize">
      <v-layer>
        <v-image
          :config="{
            x: 0,y: 0,width: stageSize.width,height: stageSize.height,image: image,}"
        />
      </v-layer>
    </v-stage>
  </div>
</template>

<style>
.container {
  width: 100vw;
  height: 100vh;
}
</style>
<script>
export default {
  data() {
    return {
      stageSize: {
        width: 10,height: 10,},image: null,};
  },mounted() {
    // setup resize
    const container = document.querySelector(".container");
    const observer = new ResizeObserver(() => {
      this.stageSize.width = container.offsetWidth;
      this.stageSize.height = container.offsetHeight;
    });
    observer.observe(container);

    // load image
    const img = document.createElement("img");
    img.src = "https://i.imgur.com/ktWThtZ.png";
    img.onload = () => {
      this.image = img;
    };
  },};
</script>

演示：https://codesandbox.io/s/vue-konva-stretch-image-to-stage-size-7ql7l?file=/src/App.vue