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

<template>
  <div>
    <v-stage ref="stage" :config="stageConfig">
      <v-layer>
        <v-image :image="imageUrl" ref="image"></v-image>
      </v-layer>
    </v-stage>
  </div>
</template>

<script>
import { Stage, Layer, Image } from 'vue-konva';

export default {
  components: {
    'v-stage': Stage,
    'v-layer': Layer,
    'v-image': Image,
  },
  data() {
    return {
      stageConfig: {
        width: 800,
        height: 600,
      },
      imageUrl: 'https://example.com/image.jpg',
    };
  },
  mounted() {
    const stage = this.$refs.stage.getStage();
    const image = this.$refs.image.getImage();

    const stageWidth = stage.getWidth();
    const stageHeight = stage.getHeight();
    const imageWidth = image.getWidth();
    const imageHeight = image.getHeight();

    const stageAspectRatio = stageWidth / stageHeight;
    const imageAspectRatio = imageWidth / imageHeight;

    if (stageAspectRatio > imageAspectRatio) {
      image.width(stageWidth);
      const scale = stageWidth / imageWidth;
      image.scale({ x: scale, y: scale });
    } else {
      image.height(stageHeight);
      const scale = stageHeight / imageHeight;
      image.scale({ x: scale, y: scale });
    }

    stage.draw();
  },
};
</script>