page: 📄 填充＋鼠标事件

src/views/styling/fill/index.vue

@@ -1,7 +1,130 @@
 <template>
-<div id="container"></div>
+	<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 images = new Image();
+	images.src = 'http://192.168.3.98:9000/bunny-bbs/avatar/2024/06-17/24a90c2ba57445e0a1b119fdcc457a37.jpg';
+
+	// 红色六边形
+	const colorPentagon = new Konva.RegularPolygon({
+		x: 80,
+		y: stage.height() / 2,
+		sides: 5,
+		radius: 70,
+		fill: '#f00',
+		stroke: '#000',
+		strokeWidth: 4,
+		dashEnabled: true,
+	});
+
+	// 图片六边形
+	const patternPentagon = new Konva.RegularPolygon({
+		x: 220,
+		y: stage.height() / 2,
+		sides: 5,
+		radius: 70,
+		fillPatternImage: images,
+		fillPatternOffset: { x: 55, y: 55 },
+		stroke: '#000',
+		strokeWidth: 4,
+		draggable: true,
+	});
+
+	// 线性渐变
+	const linearGradPentagon = new Konva.RegularPolygon({
+		x: 360,
+		y: stage.height() / 2,
+		sides: 5,
+		radius: 70,
+		fillLinearGradientStartPoint: { x: -50, y: 50 },
+		fillLinearGradientEndPoint: { x: 50, y: 50 },
+		fillLinearGradientColorStops: [0, 'red', 1, 'green'],
+		stroke: '#000',
+		strokeWidth: 4,
+		draggable: true,
+	});
+
+	const radialGradPentagon = new Konva.RegularPolygon({
+		x: 500,
+		y: stage.height() / 2,
+		sides: 5,
+		radius: 70,
+		fillRadialGradientStartPoint: { x: 0, y: 0 },
+		fillRadialGradientStartRadius: 0,
+		fillRadialGradientEndPoint: { x: 0, y: 0 },
+		fillRadialGradientColorStops: [0, 'red', 0.5, 'green', 1, 'blue'],
+		fillRadialGradientEndRadius: 70,
+		stroke: '#000',
+		strokeWidth: 4,
+		draggable: true,
+	});
+
+	/*
+	 * bind listeners
+	 */
+	colorPentagon.on('mouseover touchstart', function () {
+		this.fill('yellow');
+	});
+
+	colorPentagon.on('mouseout touchend', function () {
+		this.fill('red');
+	});
+
+	/**
+	 * 设置图片事件
+	 */
+	patternPentagon.on('mouseover touchstart', function () {
+		images.src = 'http://192.168.3.98:9000/bunny-bbs/avatar/2024/06-17/7e716b9313384c139686460b81f431ea.jpg';
+		this.fillPatternImage(images);
+	});
+	patternPentagon.on('mouseout touchend', function () {
+		images.src = 'http://192.168.3.98:9000/bunny-bbs/avatar/2024/06-17/24a90c2ba57445e0a1b119fdcc457a37.jpg';
+		this.fillPatternImage(images);
+	});
+
+	/**
+	 * 线性渐变
+	 */
+	linearGradPentagon.on('mouseover touchstart', function () {
+		this.fillLinearGradientColorStops([0, 'yellow', 1, 'blue']);
+	});
+	linearGradPentagon.on('mouseout touchend', function () {
+		this.fillLinearGradientColorStops([0, 'red', 1, 'green']);
+	});
+
+	/**
+	 * 中心渐变
+	 */
+	radialGradPentagon.on('mouseover touchstart', function () {
+		this.fillRadialGradientColorStops([0, 'red', 0.5, 'yellow', 1, 'green']);
+	});
+	radialGradPentagon.on('mouseout touchend', function () {
+		this.fillRadialGradientColorStops([0, 'red', 0.5, 'green', 1, 'blue']);
+	});
+
+	layer.add(radialGradPentagon);
+	layer.add(linearGradPentagon);
+	layer.add(patternPentagon);
+	layer.add(colorPentagon);
+	stage.add(layer);
+};
+
+onMounted(() => {
+	initial();
+});
 </script>