page: 📄 鼠标事件样式
This commit is contained in:
parent
f829655199
commit
3b1d21ff71
223
README.md
223
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相关使用
|
# Vite相关使用
|
||||||
|
|
||||||
## .env文件
|
## .env文件
|
||||||
|
|
@ -14,9 +125,9 @@
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
export default defineConfig(
|
export default defineConfig(
|
||||||
(): UserConfig => ({
|
(): UserConfig => ({
|
||||||
envPrefix: 'BUNNY',
|
envPrefix: 'BUNNY',
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -34,7 +145,7 @@ npm i vite-plugin-compress
|
||||||
import compress from 'vite-plugin-compress';
|
import compress from 'vite-plugin-compress';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
plugins: [compress()],
|
plugins: [compress()],
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -50,8 +161,8 @@ const routeMap: Record<string, RouteRecordRaw> = {};
|
||||||
|
|
||||||
// * 所有处理的路由
|
// * 所有处理的路由
|
||||||
const contexts = [
|
const contexts = [
|
||||||
{ context: import.meta.glob('@/views/**/index.vue', { eager: true, import: 'default' }), isIndex: true },
|
{ context: import.meta.glob('@/views/**/index.vue', { eager: true, import: 'default' }), isIndex: true },
|
||||||
{ context: import.meta.glob('@/views/**/page.ts', { eager: true, import: 'default' }), isIndex: false },
|
{ context: import.meta.glob('@/views/**/page.ts', { eager: true, import: 'default' }), isIndex: false },
|
||||||
];
|
];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -61,23 +172,23 @@ const contexts = [
|
||||||
* @param route 路由内容
|
* @param route 路由内容
|
||||||
*/
|
*/
|
||||||
function buildRouteTree(context: any, isIndex: boolean, route: any) {
|
function buildRouteTree(context: any, isIndex: boolean, route: any) {
|
||||||
// 遍历当前子路由
|
// 遍历当前子路由
|
||||||
Object.entries(context).forEach(([filePath, _]) => {
|
Object.entries(context).forEach(([filePath, _]) => {
|
||||||
// 获取子路由下所有文件对象格式
|
// 获取子路由下所有文件对象格式
|
||||||
const childrenFileInfo = routeFilenameHelper(filePath);
|
const childrenFileInfo = routeFilenameHelper(filePath);
|
||||||
// 组装子路由对象
|
// 组装子路由对象
|
||||||
const childrenRoute: any = {
|
const childrenRoute: any = {
|
||||||
name: childrenFileInfo?.name,
|
name: childrenFileInfo?.name,
|
||||||
path: childrenFileInfo!.path,
|
path: childrenFileInfo!.path,
|
||||||
component: isIndex ? context[filePath] : undefined,
|
component: isIndex ? context[filePath] : undefined,
|
||||||
children: [],
|
children: [],
|
||||||
meta: { isFullScreen: false },
|
meta: { isFullScreen: false },
|
||||||
};
|
};
|
||||||
// 如果当前路由对象等于当前遍历的路由子对象，将子路由推到父级路由中
|
// 如果当前路由对象等于当前遍历的路由子对象，将子路由推到父级路由中
|
||||||
if (childrenFileInfo?.path.includes(route.path) && childrenFileInfo?.path !== route.path) {
|
if (childrenFileInfo?.path.includes(route.path) && childrenFileInfo?.path !== route.path) {
|
||||||
route.children.push(childrenRoute);
|
route.children.push(childrenRoute);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -86,31 +197,31 @@ function buildRouteTree(context: any, isIndex: boolean, route: any) {
|
||||||
* @param isIndex 是否为索引遍历
|
* @param isIndex 是否为索引遍历
|
||||||
*/
|
*/
|
||||||
const createRouteList = (context: any, isIndex: boolean) => {
|
const createRouteList = (context: any, isIndex: boolean) => {
|
||||||
Object.entries(context).forEach(([filePath, exportRouteConfig]) => {
|
Object.entries(context).forEach(([filePath, exportRouteConfig]) => {
|
||||||
const fileInfo = routeFilenameHelper(filePath);
|
const fileInfo = routeFilenameHelper(filePath);
|
||||||
// 组装路由对象
|
// 组装路由对象
|
||||||
const route: any = {
|
const route: any = {
|
||||||
name: fileInfo?.name,
|
name: fileInfo?.name,
|
||||||
path: fileInfo!.path,
|
path: fileInfo!.path,
|
||||||
component: isIndex ? context[filePath] : undefined,
|
component: isIndex ? context[filePath] : undefined,
|
||||||
children: [],
|
children: [],
|
||||||
meta: { isFullScreen: false },
|
meta: { isFullScreen: false },
|
||||||
};
|
};
|
||||||
|
|
||||||
// 初始化赋值
|
// 初始化赋值
|
||||||
if (isIndex) {
|
if (isIndex) {
|
||||||
routeMap[route.path] = route;
|
routeMap[route.path] = route;
|
||||||
buildRouteTree(context, isIndex, route);
|
buildRouteTree(context, isIndex, route);
|
||||||
} else {
|
} else {
|
||||||
// 导出当前存在的路由并重新赋值
|
// 导出当前存在的路由并重新赋值
|
||||||
const existingRoute = routeMap[route.path];
|
const existingRoute = routeMap[route.path];
|
||||||
// 当前路由存在
|
// 当前路由存在
|
||||||
if (existingRoute) {
|
if (existingRoute) {
|
||||||
// 使用loadsh合并对象
|
// 使用loadsh合并对象
|
||||||
routeMap[route.path] = _.merge(existingRoute, exportRouteConfig);
|
routeMap[route.path] = _.merge(existingRoute, exportRouteConfig);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// * 生成路由信息
|
// * 生成路由信息
|
||||||
|
|
@ -129,7 +240,7 @@ console.log(import.meta.env);
|
||||||
|
|
||||||
## 动态加载CDN
|
## 动态加载CDN
|
||||||
|
|
||||||
在Module中配置相关内容，相关文档查看：https://www.npmjs.com/package/vite-plugin-cdn-import
|
在Module中配置相关内容，相关文档查看：<https://www.npmjs.com/package/vite-plugin-cdn-import>
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
import vue from '@vitejs/plugin-vue';
|
import vue from '@vitejs/plugin-vue';
|
||||||
|
|
@ -138,13 +249,13 @@ import { defineConfig, UserConfig } from 'vite';
|
||||||
import cdn from 'vite-plugin-cdn-import';
|
import cdn from 'vite-plugin-cdn-import';
|
||||||
|
|
||||||
export default defineConfig(
|
export default defineConfig(
|
||||||
(): UserConfig => ({
|
(): UserConfig => ({
|
||||||
plugins: [
|
plugins: [
|
||||||
cdn({
|
cdn({
|
||||||
modules: [],
|
modules: [],
|
||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -160,7 +271,7 @@ export default defineConfig(
|
||||||
legacy({ targets: ["defaults", "not IE 11"] }),
|
legacy({ targets: ["defaults", "not IE 11"] }),
|
||||||
```
|
```
|
||||||
|
|
||||||
详细配置查看：https://www.npmjs.com/package/@vitejs/plugin-legacy
|
详细配置查看：<https://www.npmjs.com/package/@vitejs/plugin-legacy>
|
||||||
|
|
||||||
## 打包设置
|
## 打包设置
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
Loading…
Reference in New Issue