page: 📄 样式完成

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

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>