使用 Vue 绘制画布形状

所有 vue-konva 组件对应于同名的 Konva 组件，前缀为 'v'。与 Konva 对象可用的所有参数可以作为配置添加到对应的 vue-konva 组件的 prop 中。

核心形状包括：v-rect、v-circle、v-ellipse、v-line、v-image、v-text、v-text-path、v-star、v-label、v-path、v-regular-polygon。您还可以创建一个 自定义形状。

有关 Konva 的更多信息，您可以阅读 Konva 概述。

说明：演示显示了各种带有不同样式和配置的形状。

<template>
  <v-stage :config="stageSize">
    <v-layer>
      <v-text :config="{
        text: '画布上的一些文字',
        fontSize: 15
      }"/>
      <v-rect :config="{
        x: 20,
        y: 50,
        width: 100,
        height: 100,
        fill: 'red',
        shadowBlur: 10
      }"/>
      <v-circle :config="{
        x: 200,
        y: 100,
        radius: 50,
        fill: 'green'
      }"/>
      <v-line :config="{
        x: 20,
        y: 200,
        points: [0, 0, 100, 0, 100, 100],
        tension: 0.5,
        closed: true,
        stroke: 'black',
        fillLinearGradientStartPoint: { x: -50, y: -50 },
        fillLinearGradientEndPoint: { x: 50, y: 50 },
        fillLinearGradientColorStops: [0, 'red', 1, 'yellow']
      }"/>
    </v-layer>
  </v-stage>
</template>

<script setup>
const stageSize = {
  width: window.innerWidth,
  height: window.innerHeight
};
</script>

Open Sandbox