如何在 Canvas 上使用 Vue 绘制图片？

对于图片，您可以使用 vue-konva 提供的 useImage 钩子，轻松在组件中加载并处理图片。

说明：此示例展示了如何在画布上加载并显示多张图片。

<template>
  <v-stage :config="stageSize">
    <v-layer>
      <v-image
        v-if="yodaImage"
        :config="{
          x: 50,
          y: 50,
          image: yodaImage,
          width: 106,
          height: 118
        }"
      />
      <v-image
        v-if="vaderImage"
        :config="{
          x: 200,
          y: 50,
          image: vaderImage,
          scaleX: 0.5,
          scaleY: 0.5,
          cornerRadius: 20
        }"
      />
    </v-layer>
  </v-stage>
</template>

<script setup>
import { useImage } from 'vue-konva';

const stageSize = {
  width: window.innerWidth,
  height: window.innerHeight
};

const [yodaImage] = useImage('https://konvajs.org/assets/yoda.jpg');
const [vaderImage] = useImage('https://konvajs.org/assets/darth-vader.jpg');
</script>

Open Sandbox