From f829655199325f3d554081c2b31f0ad3ab542f28 Mon Sep 17 00:00:00 2001
From: bunny <1319900154@qq.com>
Date: Thu, 11 Jul 2024 14:52:14 +0800
Subject: [PATCH] =?UTF-8?q?page:=20=F0=9F=93=84=20=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E5=92=8C=E9=9A=90=E8=97=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{line join => line-join}/index.vue        |  0
 src/views/styling/show-and-hide/index.vue     | 58 +++++++++++++++++++
 2 files changed, 58 insertions(+)
 rename src/views/styling/{line join => line-join}/index.vue (100%)
 create mode 100644 src/views/styling/show-and-hide/index.vue

diff --git a/src/views/styling/line join/index.vue b/src/views/styling/line-join/index.vue
similarity index 100%
rename from src/views/styling/line join/index.vue
rename to src/views/styling/line-join/index.vue
diff --git a/src/views/styling/show-and-hide/index.vue b/src/views/styling/show-and-hide/index.vue
new file mode 100644
index 0000000..c61a2fe
--- /dev/null
+++ b/src/views/styling/show-and-hide/index.vue
@@ -0,0 +1,58 @@
+<template>
+	<div class="container my-5">
+		<button class="btn btn-primary" @click="onClick">显示</button>
+		<button class="btn btn-danger" @click="onHide">隐藏</button>
+	</div>
+	<div id="container"></div>
+</template>
+
+<script setup lang="ts">
+import { useWindowSize } from '@vueuse/core';
+import Konva from 'konva/lib';
+import { RegularPolygon } from 'konva/lib/shapes/RegularPolygon';
+import { onMounted, ref } from 'vue';
+
+const { width, height } = useWindowSize();
+const stage = ref();
+const layer = ref();
+const pentagon = ref<RegularPolygon>();
+
+/**
+ * * 初始化数据
+ */
+const initial = () => {
+	stage.value = new Konva.Stage({
+		container: 'container',
+		width: width.value,
+		height: height.value,
+	});
+
+	layer.value = new Konva.Layer({ draggable: true });
+
+	pentagon.value = new Konva.RegularPolygon({
+		x: stage.value.width() / 2,
+		y: stage.value.height() / 2,
+		sides: 5,
+		radius: 70,
+		fill: 'red',
+		stroke: 'black',
+		strokeWidth: 4,
+		visible: false,
+	});
+
+	layer.value.add(pentagon.value);
+	stage.value.add(layer.value);
+};
+
+const onHide = () => {
+	pentagon.value?.hide();
+};
+
+const onClick = () => {
+	pentagon.value?.show();
+};
+
+onMounted(() => {
+	initial();
+});
+</script>