From efdd6c23c911ce18818361ef751b8a59c4170070 Mon Sep 17 00:00:00 2001
From: bunny <1319900154@qq.com>
Date: Thu, 11 Jul 2024 14:06:49 +0800
Subject: [PATCH] =?UTF-8?q?page:=20=F0=9F=93=84=20=E5=A1=AB=E5=85=85?=
=?UTF-8?q?=EF=BC=8B=E9=BC=A0=E6=A0=87=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/views/styling/fill/index.vue | 129 ++++++++++++++++++++++++++++++-
1 file changed, 126 insertions(+), 3 deletions(-)
diff --git a/src/views/styling/fill/index.vue b/src/views/styling/fill/index.vue
index bb7b8c1..973fa23 100644
--- a/src/views/styling/fill/index.vue
+++ b/src/views/styling/fill/index.vue
@@ -1,7 +1,130 @@
-
+
\ No newline at end of file
+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();
+});
+