page: 📄 鼠标事件样式

README.md

@@ -1,3 +1,114 @@
+# 待学习内容
+
+```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
+Event Delegation
+Fire Events
+Stage Events
+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
+SELECT AND TRANSFORM
+Basic demo
+Centered Scaling
+Keep Ratio
+Styling
+Complex Styling
+Transform Events
+Resize Limits
+Rotation Snaps
+Resize Snaps
+Stop Transform
+Force Update
+Text Resizing
+Ignore Stroke
+CLIPPING
+Simple Clip
+Complex Clip
+GROUPS, LAYERS AND ORDERING
+Groups
+Layering
+Change Containers
+zIndex
+FILTERS
+Blur
+Brighten
+Contrast
+Emboss
+Enhance
+Grayscale
+HSL
+HSV
+RGB
+Invert
+Kaleidoscope
+Mask
+Noise
+Pixelate
+Custom Filter
+Multiple Filters
+TWEENS
+Linear Easing
+Common Easings
+All Easings
+Finish Event
+All Controls
+Tween Filter
+Complex Tweening
+ANIMATIONS
+Create an Animation
+Moving
+Rotation
+Scaling
+Stop Animation
+SELECTORS
+Select by id
+Select by Type
+Select by Name
+DATA & SERIALIZATION & EXPORT
+Serialize a Stage
+Simple Load
+Complex Load
+JSON Best Practices
+Stage Data URL
+Export to HD Image
+PERFORMANCE
+All tips
+Layer Management
+Batch Draw
+Shape Caching
+Optimize Animation
+Optimize Strokes
+Shape Redraw
+Disable Perfect Drawing
+Listening False
+Avoid Memory Leaks
+```
+
 # Vite相关使用
 
 ## .env文件
@@ -129,7 +240,7 @@ console.log(import.meta.env);
 
 ## 动态加载CDN
 
-在Module中配置相关内容，相关文档查看：https://www.npmjs.com/package/vite-plugin-cdn-import
+在Module中配置相关内容，相关文档查看：<https://www.npmjs.com/package/vite-plugin-cdn-import>
 
 ```ts
 import vue from '@vitejs/plugin-vue';
@@ -160,7 +271,7 @@ export default defineConfig(
 legacy({ targets: ["defaults", "not IE 11"] }),
 ```
 
-详细配置查看：https://www.npmjs.com/package/@vitejs/plugin-legacy
+详细配置查看：<https://www.npmjs.com/package/@vitejs/plugin-legacy>
 
 ## 打包设置
 

src/views/styling/mouse-style/index.vue

@@ -0,0 +1,85 @@
+<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 shape1 = new Konva.RegularPolygon({
+		x: 80,
+		y: stage.height() / 2,
+		sides: 5,
+		radius: 70,
+		fill: 'red',
+		stroke: 'black',
+		strokeWidth: 4,
+		draggable: true,
+	});
+
+	const shape2 = new Konva.RegularPolygon({
+		x: 220,
+		y: stage.height() / 2,
+		sides: 5,
+		radius: 70,
+		fill: 'green',
+		stroke: 'black',
+		strokeWidth: 4,
+		draggable: true,
+	});
+
+	const shape3 = new Konva.RegularPolygon({
+		x: 360,
+		y: stage.height() / 2,
+		sides: 5,
+		radius: 70,
+		fill: 'green',
+		stroke: 'black',
+		strokeWidth: 4,
+		draggable: true,
+	});
+
+	shape1.on('mouseenter', function () {
+		stage.container().style.cursor = 'pointer';
+	});
+
+	shape1.on('mouseleave', function () {
+		stage.container().style.cursor = 'default';
+	});
+
+	shape2.on('mouseenter', function () {
+		stage.container().style.cursor = 'move';
+	});
+	shape2.on('mouseleave', function () {
+		stage.container().style.cursor = 'default';
+	});
+
+	shape3.on('mouseenter', function () {
+		stage.container().style.cursor = 'crosshair';
+	});
+	shape3.on('mouseleave', function () {
+		stage.container().style.cursor = 'default';
+	});
+
+	layer.add(shape3);
+	layer.add(shape2);
+	layer.add(shape1);
+	stage.add(layer);
+};
+
+onMounted(() => {
+	initial();
+});
+</script>