page: 📄 显示和隐藏

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>