optimize: ♻️ 图形和label操作

public/verify.json

@@ -1 +1 @@
-{"version":1720485994494}
+{"version":1720598261150}

src/views/text/index.vue

@@ -0,0 +1,136 @@
+<template>
+	<div id="container"></div>
+</template>
+
+<script setup lang="ts">
+import * as Konva from 'konva/lib';
+import { Layer } from 'konva/lib/Layer';
+import { Stage } from 'konva/lib/Stage';
+import { Arc } from 'konva/lib/shapes/Arc';
+import { Label } from 'konva/lib/shapes/Label';
+import { Ring } from 'konva/lib/shapes/Ring';
+import { Star } from 'konva/lib/shapes/Star';
+import { Text } from 'konva/lib/shapes/Text';
+import { TextPath } from 'konva/lib/shapes/TextPath';
+
+import { nextTick, onMounted } from 'vue';
+
+/**
+ * * 初始化
+ */
+const initial = () => {
+	nextTick(() => {
+		const content =
+			"COMPLEX TEXT\n\nAll the world's a stage, and all the men and women merely players. They have their exits and their entrances.";
+
+		const stage = new Stage({
+			container: 'container',
+			width: 500,
+			height: 500,
+		});
+
+		const layer = new Layer({ draggable: true });
+
+		// 文本内容
+		const text = new Text({
+			x: 0,
+			y: 0,
+			text: content,
+			fontSize: 18,
+			fontFamily: 'Calibri',
+			fill: 'green',
+			width: 300,
+			padding: 20,
+			align: 'center',
+		});
+
+		// 文字路径
+		const textpath = new TextPath({
+			x: 100,
+			y: 0,
+			text: content,
+			fontSize: 16,
+			fill: 'blue',
+			fontFamily: 'Calibri',
+			data: 'M10,10 C0,0 10,150 100,100 S300,150 5.0.300',
+		});
+
+		// 星
+		const start = new Star({
+			x: 90,
+			y: 100,
+			numPoints: 10,
+			innerRadius: 40,
+			outerRadius: 100,
+			fill: 'red',
+			stroke: 'green',
+			strokeWidth: 4,
+			draggable: true,
+		});
+
+		// 同心圆
+		const ring = new Ring({
+			x: 200,
+			y: 150,
+			innerRadius: 40,
+			outerRadius: 100,
+			fill: 'green',
+			stroke: 'red',
+			strokeWidth: 6,
+			draggable: true,
+		});
+
+		const arc = new Arc({
+			x: 150,
+			y: 220,
+			angle: 90,
+			innerRadius: 40,
+			outerRadius: 70,
+			fill: 'green',
+			stroke: 'red',
+			strokeWidth: 4,
+		});
+
+		const label = new Label({
+			x: 180,
+			y: 180,
+			opacity: 0.6,
+		});
+
+		label.add(
+			new Text({
+				text: 'Label pointing left',
+				fontFamily: 'Calibri',
+				fontSize: 18,
+				padding: 5,
+				fill: 'white',
+			}),
+		);
+
+		label.add(
+			new Konva.Tag({
+				fill: 'red',
+				pointerDirection: 'left',
+				pointerWidth: 20,
+				pointerHeight: 28,
+				lineJoin: 'round',
+			}),
+		);
+
+		layer.add(text);
+		layer.add(textpath);
+		layer.add(start);
+		layer.add(ring);
+		layer.add(arc);
+		layer.add(label);
+
+		stage.add(layer);
+	});
+};
+
+onMounted(() => {
+	initial();
+});
+</script>
+
+<style lang="scss" scoped></style>