From 05a4a63df7f85967427a1ae09e5c43241ade3da9 Mon Sep 17 00:00:00 2001
From: bunny <1319900154@qq.com>
Date: Thu, 11 Jul 2024 10:42:09 +0800
Subject: [PATCH] =?UTF-8?q?optimize:=20=E2=99=BB=EF=B8=8F=20=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E7=9B=AE=E5=BD=95=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/{ => shapes}/image/index.vue    |  0
 src/views/{ => shapes}/line/index.vue     |  0
 src/views/{ => shapes}/overview/index.vue |  0
 src/views/{ => shapes}/path/index.vue     |  0
 src/views/{ => shapes}/shape/index.vue    |  2 +-
 src/views/{ => shapes}/shape/rect.vue     |  0
 src/views/{ => shapes}/sprite/index.vue   |  0
 src/views/{ => shapes}/text/index.vue     |  0
 src/views/shapes/图形/index.vue           | 38 ++++++++++++++++++++
 src/views/shapes/箭头/index.vue           | 38 ++++++++++++++++++++
 src/views/shapes/自定义图形/index.vue     | 44 +++++++++++++++++++++++
 src/views/styling/fill/index.vue          |  7 ++++
 12 files changed, 128 insertions(+), 1 deletion(-)
 rename src/views/{ => shapes}/image/index.vue (100%)
 rename src/views/{ => shapes}/line/index.vue (100%)
 rename src/views/{ => shapes}/overview/index.vue (100%)
 rename src/views/{ => shapes}/path/index.vue (100%)
 rename src/views/{ => shapes}/shape/index.vue (60%)
 rename src/views/{ => shapes}/shape/rect.vue (100%)
 rename src/views/{ => shapes}/sprite/index.vue (100%)
 rename src/views/{ => shapes}/text/index.vue (100%)
 create mode 100644 src/views/shapes/图形/index.vue
 create mode 100644 src/views/shapes/箭头/index.vue
 create mode 100644 src/views/shapes/自定义图形/index.vue
 create mode 100644 src/views/styling/fill/index.vue

diff --git a/src/views/image/index.vue b/src/views/shapes/image/index.vue
similarity index 100%
rename from src/views/image/index.vue
rename to src/views/shapes/image/index.vue
diff --git a/src/views/line/index.vue b/src/views/shapes/line/index.vue
similarity index 100%
rename from src/views/line/index.vue
rename to src/views/shapes/line/index.vue
diff --git a/src/views/overview/index.vue b/src/views/shapes/overview/index.vue
similarity index 100%
rename from src/views/overview/index.vue
rename to src/views/shapes/overview/index.vue
diff --git a/src/views/path/index.vue b/src/views/shapes/path/index.vue
similarity index 100%
rename from src/views/path/index.vue
rename to src/views/shapes/path/index.vue
diff --git a/src/views/shape/index.vue b/src/views/shapes/shape/index.vue
similarity index 60%
rename from src/views/shape/index.vue
rename to src/views/shapes/shape/index.vue
index bed6d01..a703c33 100644
--- a/src/views/shape/index.vue
+++ b/src/views/shapes/shape/index.vue
@@ -4,5 +4,5 @@
 </template>
 
 <script setup lang="ts">
-import Rect from '@/views/shape/rect.vue';
+import Rect from '@/views/shapes/shape/rect.vue';
 </script>
diff --git a/src/views/shape/rect.vue b/src/views/shapes/shape/rect.vue
similarity index 100%
rename from src/views/shape/rect.vue
rename to src/views/shapes/shape/rect.vue
diff --git a/src/views/sprite/index.vue b/src/views/shapes/sprite/index.vue
similarity index 100%
rename from src/views/sprite/index.vue
rename to src/views/shapes/sprite/index.vue
diff --git a/src/views/text/index.vue b/src/views/shapes/text/index.vue
similarity index 100%
rename from src/views/text/index.vue
rename to src/views/shapes/text/index.vue
diff --git a/src/views/shapes/图形/index.vue b/src/views/shapes/图形/index.vue
new file mode 100644
index 0000000..5b75da3
--- /dev/null
+++ b/src/views/shapes/图形/index.vue
@@ -0,0 +1,38 @@
+<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 });
+
+	layer.add(
+		new Konva.RegularPolygon({
+			x: 100,
+			y: 150,
+			sides: 6,
+			radius: 70,
+			fill: 'red',
+			stroke: 'black',
+			strokeWidth: 4,
+		}),
+	);
+
+	stage.add(layer);
+};
+
+onMounted(() => {
+	initial();
+});
+</script>
diff --git a/src/views/shapes/箭头/index.vue b/src/views/shapes/箭头/index.vue
new file mode 100644
index 0000000..4271f4d
--- /dev/null
+++ b/src/views/shapes/箭头/index.vue
@@ -0,0 +1,38 @@
+<template>
+	<div id="container"></div>
+</template>
+
+<script setup lang="ts">
+import { useWindowSize } from '@vueuse/core';
+import Konva from 'konva/lib';
+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 });
+
+	layer.add(
+		new Konva.Arrow({
+			x: 100,
+			y: 150,
+			points: [0, 10, 100, 100],
+			pointerLength: 20,
+			fill: 'red',
+			stroke: 'black',
+			strokeWidth: 2,
+		}),
+	);
+
+	stage.add(layer);
+};
+
+onMounted(() => {
+	initial();
+});
+</script>
diff --git a/src/views/shapes/自定义图形/index.vue b/src/views/shapes/自定义图形/index.vue
new file mode 100644
index 0000000..015dcad
--- /dev/null
+++ b/src/views/shapes/自定义图形/index.vue
@@ -0,0 +1,44 @@
+<template>
+	<div id="container"></div>
+</template>
+
+<script setup lang="ts">
+import { useWindowSize } from '@vueuse/core';
+import Konva from 'konva/lib';
+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 cuttomShape = new Konva.Shape({
+		x: 16,
+		y: 30,
+		width: width.value/2,
+		height: height.value/2,
+		sceneFunc(context, shape) {
+			context.beginPath();
+
+			context.rect(0, 0, shape.getAttr('width'), shape.getAttr('height'));
+			context.fillStrokeShape(shape);
+		},
+		fill: '#00D2FF',
+		stroke: 'black',
+		strokeWidth: 4,
+	});
+
+	layer.add(cuttomShape);
+	stage.add(layer);
+};
+
+onMounted(() => {
+	initial();
+});
+</script>
diff --git a/src/views/styling/fill/index.vue b/src/views/styling/fill/index.vue
new file mode 100644
index 0000000..bb7b8c1
--- /dev/null
+++ b/src/views/styling/fill/index.vue
@@ -0,0 +1,7 @@
+<template>
+<div id="container"></div>
+</template>
+
+<script setup lang="ts">
+	
+</script>
\ No newline at end of file