From c1fe533b143eb5d1e8fb0cabcba8ac493b89be7a Mon Sep 17 00:00:00 2001
From: bunny <1319900154@qq.com>
Date: Wed, 10 Jul 2024 16:57:54 +0800
Subject: [PATCH] =?UTF-8?q?optimize:=20=E2=99=BB=EF=B8=8F=20=E5=9B=BE?=
 =?UTF-8?q?=E5=BD=A2=E5=92=8Clabel=E6=93=8D=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/verify.json       |   2 +-
 src/views/text/index.vue | 136 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 137 insertions(+), 1 deletion(-)
 create mode 100644 src/views/text/index.vue

diff --git a/public/verify.json b/public/verify.json
index 50d1d4a..25589a3 100644
--- a/public/verify.json
+++ b/public/verify.json
@@ -1 +1 @@
-{"version":1720485994494}
\ No newline at end of file
+{"version":1720598261150}
\ No newline at end of file
diff --git a/src/views/text/index.vue b/src/views/text/index.vue
new file mode 100644
index 0000000..1d6e7fc
--- /dev/null
+++ b/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>