page: 📄 新增path

public/verify.json

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

src/views/path/index.vue

@@ -0,0 +1,40 @@
+<template>
+	<div id="container"></div>
+</template>
+
+<script setup lang="ts">
+import { useWindowSize } from '@vueuse/core';
+import Konva from 'konva/lib/index';
+import { onMounted } from 'vue';
+
+const { width, height } = useWindowSize();
+
+const initial = () => {
+	const stage = new Konva.Stage({
+		container: 'container',
+		width: width.value,
+		height: height.value,
+	});
+
+	const layer = new Konva.Layer({
+		draggable: true,
+	});
+
+	const myPath = new Konva.Path({
+		x: 50,
+		y: 40,
+		data:
+			'M213.1,6.7c-32.4-14.4-73.7,0-88.1,30.6C110.6,4.9,67.5-9.5,36.9,6.7C2.8,22.9-13.4,62.4,13.5,110.9C33.3,145.1,67.5,170.3,125,217c59.3.136.7,93.5-71.9,111.5-106.1C263.4,64.2,247.2,22.9.3.13.1,6.7z',
+		fill: 'red',
+		scaleX: 0.5,
+		scaleY: 0.5,
+	});
+
+	layer.add(myPath);
+	stage.add(layer);
+};
+
+onMounted(() => {
+	initial();
+});
+</script>

src/views/text/index.vue

@@ -3,15 +3,15 @@
 </template>
 
 <script setup lang="ts">
-import * as Konva from 'konva/lib';
+import Konva from 'konva/lib/index';
 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 { Stage } from 'konva/lib/Stage';
 
 import { nextTick, onMounted } from 'vue';
 
@@ -87,19 +87,36 @@ const initial = () => {
 			innerRadius: 40,
 			outerRadius: 70,
 			fill: 'green',
-			stroke: 'red',
+			stroke: '#fff',
 			strokeWidth: 4,
 		});
 
-		const label = new Label({
-			x: 180,
-			y: 180,
-			opacity: 0.6,
+		// tooltip
+		const tooltip = new Label({
+			x: 170,
+			y: 75,
+			opacity: 0.75,
+			draggable: true,
 		});
 
-		label.add(
-			new Text({
-				text: 'Label pointing left',
+		tooltip.add(
+			new Konva.Tag({
+				fill: 'black',
+				pointerDirection: 'down',
+				pointerWidth: 10,
+				pointerHeight: 10,
+				lineJoin: 'round',
+				shadowColor: 'black',
+				shadowBlur: 10,
+				shadowOffsetX: 10,
+				shadowOffsetY: 10,
+				shadowOpacity: 0.5,
+			}),
+		);
+
+		tooltip.add(
+			new Konva.Text({
+				text: 'Tooltip pointing down',
 				fontFamily: 'Calibri',
 				fontSize: 18,
 				padding: 5,
@@ -107,14 +124,28 @@ const initial = () => {
 			}),
 		);
 
-		label.add(
+		const label1 = new Label({
+			x: 300,
+			y: 150,
+			opacity: 1,
+			draggable: true,
+		});
+
+		label1.add(
 			new Konva.Tag({
-				fill: 'red',
+				fill: 'green',
 				pointerDirection: 'left',
 				pointerWidth: 20,
 				pointerHeight: 28,
 				lineJoin: 'round',
 			}),
+			new Konva.Text({
+				text: 'Label pointing left',
+				fontFamily: 'Calibri',
+				fontSize: 18,
+				padding: 5,
+				fill: '#fff',
+			}),
 		);
 
 		layer.add(text);
@@ -122,7 +153,8 @@ const initial = () => {
 		layer.add(start);
 		layer.add(ring);
 		layer.add(arc);
-		layer.add(label);
+		layer.add(label1);
+		layer.add(tooltip);
 
 		stage.add(layer);
 	});
@@ -132,5 +164,3 @@ onMounted(() => {
 	initial();
 });
 </script>
-
-<style lang="scss" scoped></style>