From d7a88e6fac12c43046418758ee5262f42a88ac6d Mon Sep 17 00:00:00 2001
From: bunny <1319900154@qq.com>
Date: Thu, 11 Jul 2024 16:27:51 +0800
Subject: [PATCH] =?UTF-8?q?page:=20=F0=9F=93=84=20=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                              | 18 ---------
 src/views/styling/blend-mode/index.vue | 55 ++++++++++++++++++++++++++
 2 files changed, 55 insertions(+), 18 deletions(-)
 create mode 100644 src/views/styling/blend-mode/index.vue

diff --git a/README.md b/README.md
index 4c9edbc..57a3c98 100644
--- a/README.md
+++ b/README.md
@@ -1,17 +1,6 @@
 # 待学习内容
 
 ```sh
-Mouse Cursor Style
-Blend Mode
-Fill Stroke Order
-EVENTS
-Binding Events
-Mobile Events
-Pointer Events
-Desktop and Mobile Event
-Mobile Scrolling
-Multi Event
-Remove Event
 Remove by Name
 Listen for Events
 Cancel Propagation
@@ -22,13 +11,6 @@ Custom Hit Region
 Image Hit Region
 Keyboard Events
 Desktop and Mobile
-DRAG AND DROP
-Drag and Drop
-Drag an Image
-Drag a Group
-Drag a Line
-Drag a Stage
-Drag Events
 Simple Drag Bounds
 Complex Drag and Drop
 Drop Events
diff --git a/src/views/styling/blend-mode/index.vue b/src/views/styling/blend-mode/index.vue
new file mode 100644
index 0000000..51d0a4f
--- /dev/null
+++ b/src/views/styling/blend-mode/index.vue
@@ -0,0 +1,55 @@
+<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 text = new Konva.Text({
+		text: 'Text Shadow!',
+		fontFamily: 'Calibri',
+		fontSize: 40,
+		x: 20,
+		y: 20,
+		fill: 'green',
+		// stroke: 'red',
+		strokeWidth: 2,
+		shadowColor: 'white',
+		// shadowBlur: 0,
+		shadowOffset: { x: 10, y: 10 },
+		// shadowOpacity: 0.5
+	});
+
+	const rect = new Konva.Rect({
+		x: 50,
+		y: 20,
+		// stroke: 'red',
+		width: 100,
+		height: 100,
+		fill: 'red',
+		draggable: true,
+		globalCompositeOperation: 'xor',
+	});
+
+	layer.add(text);
+	layer.add(rect);
+	stage.add(layer);
+};
+
+onMounted(() => {
+	initial();
+});
+</script>