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相关使用
|
||||
|
||||
## .env文件
|
||||
|
|
@ -14,9 +125,9 @@
|
|||
|
||||
```ts
|
||||
export default defineConfig(
|
||||
(): UserConfig => ({
|
||||
envPrefix: 'BUNNY',
|
||||
}),
|
||||
(): UserConfig => ({
|
||||
envPrefix: 'BUNNY',
|
||||
}),
|
||||
);
|
||||
```
|
||||
|
||||
|
|
@ -34,7 +145,7 @@ npm i vite-plugin-compress
|
|||
import compress from 'vite-plugin-compress';
|
||||
|
||||
export default {
|
||||
plugins: [compress()],
|
||||
plugins: [compress()],
|
||||
};
|
||||
```
|
||||
|
||||
|
|
@ -50,8 +161,8 @@ const routeMap: Record<string, RouteRecordRaw> = {};
|
|||
|
||||
// * 所有处理的路由
|
||||
const contexts = [
|
||||
{ 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/**/index.vue', { eager: true, import: 'default' }), isIndex: true },
|
||||
{ context: import.meta.glob('@/views/**/page.ts', { eager: true, import: 'default' }), isIndex: false },
|
||||
];
|
||||
|
||||
/**
|
||||
|
|
@ -61,23 +172,23 @@ const contexts = [
|
|||
* @param route 路由内容
|
||||
*/
|
||||
function buildRouteTree(context: any, isIndex: boolean, route: any) {
|
||||
// 遍历当前子路由
|
||||
Object.entries(context).forEach(([filePath, _]) => {
|
||||
// 获取子路由下所有文件对象格式
|
||||
const childrenFileInfo = routeFilenameHelper(filePath);
|
||||
// 组装子路由对象
|
||||
const childrenRoute: any = {
|
||||
name: childrenFileInfo?.name,
|
||||
path: childrenFileInfo!.path,
|
||||
component: isIndex ? context[filePath] : undefined,
|
||||
children: [],
|
||||
meta: { isFullScreen: false },
|
||||
};
|
||||
// 如果当前路由对象等于当前遍历的路由子对象，将子路由推到父级路由中
|
||||
if (childrenFileInfo?.path.includes(route.path) && childrenFileInfo?.path !== route.path) {
|
||||
route.children.push(childrenRoute);
|
||||
}
|
||||
});
|
||||
// 遍历当前子路由
|
||||
Object.entries(context).forEach(([filePath, _]) => {
|
||||
// 获取子路由下所有文件对象格式
|
||||
const childrenFileInfo = routeFilenameHelper(filePath);
|
||||
// 组装子路由对象
|
||||
const childrenRoute: any = {
|
||||
name: childrenFileInfo?.name,
|
||||
path: childrenFileInfo!.path,
|
||||
component: isIndex ? context[filePath] : undefined,
|
||||
children: [],
|
||||
meta: { isFullScreen: false },
|
||||
};
|
||||
// 如果当前路由对象等于当前遍历的路由子对象，将子路由推到父级路由中
|
||||
if (childrenFileInfo?.path.includes(route.path) && childrenFileInfo?.path !== route.path) {
|
||||
route.children.push(childrenRoute);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -86,31 +197,31 @@ function buildRouteTree(context: any, isIndex: boolean, route: any) {
|
|||
* @param isIndex 是否为索引遍历
|
||||
*/
|
||||
const createRouteList = (context: any, isIndex: boolean) => {
|
||||
Object.entries(context).forEach(([filePath, exportRouteConfig]) => {
|
||||
const fileInfo = routeFilenameHelper(filePath);
|
||||
// 组装路由对象
|
||||
const route: any = {
|
||||
name: fileInfo?.name,
|
||||
path: fileInfo!.path,
|
||||
component: isIndex ? context[filePath] : undefined,
|
||||
children: [],
|
||||
meta: { isFullScreen: false },
|
||||
};
|
||||
Object.entries(context).forEach(([filePath, exportRouteConfig]) => {
|
||||
const fileInfo = routeFilenameHelper(filePath);
|
||||
// 组装路由对象
|
||||
const route: any = {
|
||||
name: fileInfo?.name,
|
||||
path: fileInfo!.path,
|
||||
component: isIndex ? context[filePath] : undefined,
|
||||
children: [],
|
||||
meta: { isFullScreen: false },
|
||||
};
|
||||
|
||||
// 初始化赋值
|
||||
if (isIndex) {
|
||||
routeMap[route.path] = route;
|
||||
buildRouteTree(context, isIndex, route);
|
||||
} else {
|
||||
// 导出当前存在的路由并重新赋值
|
||||
const existingRoute = routeMap[route.path];
|
||||
// 当前路由存在
|
||||
if (existingRoute) {
|
||||
// 使用loadsh合并对象
|
||||
routeMap[route.path] = _.merge(existingRoute, exportRouteConfig);
|
||||
}
|
||||
}
|
||||
});
|
||||
// 初始化赋值
|
||||
if (isIndex) {
|
||||
routeMap[route.path] = route;
|
||||
buildRouteTree(context, isIndex, route);
|
||||
} else {
|
||||
// 导出当前存在的路由并重新赋值
|
||||
const existingRoute = routeMap[route.path];
|
||||
// 当前路由存在
|
||||
if (existingRoute) {
|
||||
// 使用loadsh合并对象
|
||||
routeMap[route.path] = _.merge(existingRoute, exportRouteConfig);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// * 生成路由信息
|
||||
|
|
@ -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';
|
||||
|
|
@ -138,13 +249,13 @@ import { defineConfig, UserConfig } from 'vite';
|
|||
import cdn from 'vite-plugin-cdn-import';
|
||||
|
||||
export default defineConfig(
|
||||
(): UserConfig => ({
|
||||
plugins: [
|
||||
cdn({
|
||||
modules: [],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
(): UserConfig => ({
|
||||
plugins: [
|
||||
cdn({
|
||||
modules: [],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
);
|
||||
```
|
||||
|
||||
|
|
@ -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>
|
||||
|
||||
## 打包设置
|
||||
|
||||
|
|
|
|||
|
|
@ -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