page: 📄 自定义拖拽框
This commit is contained in:
parent
73a74e3569
commit
3346703796
138
README.md
138
README.md
|
@ -1,80 +1,62 @@
|
||||||
```sh
|
```sh
|
||||||
Simple Drag Bounds
|
styling
|
||||||
Complex Drag and Drop
|
complex styling
|
||||||
Drop Events
|
transform events
|
||||||
SELECT AND TRANSFORM
|
resize limits
|
||||||
Basic demo
|
rotation snaps
|
||||||
Centered Scaling
|
resize snaps
|
||||||
Keep Ratio
|
stop transform
|
||||||
Styling
|
force update
|
||||||
Complex Styling
|
text resizing
|
||||||
Transform Events
|
ignore stroke
|
||||||
Resize Limits
|
clipping
|
||||||
Rotation Snaps
|
simple clip
|
||||||
Resize Snaps
|
complex clip
|
||||||
Stop Transform
|
groups, layers and ordering
|
||||||
Force Update
|
groups
|
||||||
Text Resizing
|
layering
|
||||||
Ignore Stroke
|
change containers
|
||||||
CLIPPING
|
zindex
|
||||||
Simple Clip
|
filters
|
||||||
Complex Clip
|
blur
|
||||||
GROUPS, LAYERS AND ORDERING
|
brighten
|
||||||
Groups
|
contrast
|
||||||
Layering
|
emboss
|
||||||
Change Containers
|
enhance
|
||||||
zIndex
|
grayscale
|
||||||
FILTERS
|
hsl
|
||||||
Blur
|
hsv
|
||||||
Brighten
|
rgb
|
||||||
Contrast
|
invert
|
||||||
Emboss
|
kaleidoscope
|
||||||
Enhance
|
mask
|
||||||
Grayscale
|
noise
|
||||||
HSL
|
pixelate
|
||||||
HSV
|
custom filter
|
||||||
RGB
|
multiple filters
|
||||||
Invert
|
tweens
|
||||||
Kaleidoscope
|
linear easing
|
||||||
Mask
|
common easings
|
||||||
Noise
|
all easings
|
||||||
Pixelate
|
finish event
|
||||||
Custom Filter
|
all controls
|
||||||
Multiple Filters
|
tween filter
|
||||||
TWEENS
|
complex tweening
|
||||||
Linear Easing
|
animations
|
||||||
Common Easings
|
create an animation
|
||||||
All Easings
|
moving
|
||||||
Finish Event
|
rotation
|
||||||
All Controls
|
scaling
|
||||||
Tween Filter
|
stop animation
|
||||||
Complex Tweening
|
selectors
|
||||||
ANIMATIONS
|
select by id
|
||||||
Create an Animation
|
select by type
|
||||||
Moving
|
select by name
|
||||||
Rotation
|
data & serialization & export
|
||||||
Scaling
|
serialize a stage
|
||||||
Stop Animation
|
simple load
|
||||||
SELECTORS
|
complex load
|
||||||
Select by id
|
json best practices
|
||||||
Select by Type
|
stage data url
|
||||||
Select by Name
|
export to hd image
|
||||||
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
|
|
||||||
```
|
```
|
|
@ -0,0 +1,43 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useWindowSize } from '@vueuse/core';
|
||||||
|
import { onMounted } from 'vue';
|
||||||
|
import Konva from 'konva/lib';
|
||||||
|
|
||||||
|
const { width, height } = useWindowSize();
|
||||||
|
|
||||||
|
const initial = () => {
|
||||||
|
const stage = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
|
||||||
|
const layer = new Konva.Layer();
|
||||||
|
stage.add(layer);
|
||||||
|
|
||||||
|
const circle = new Konva.Circle({
|
||||||
|
x: 150,
|
||||||
|
y: 150,
|
||||||
|
radius: 70,
|
||||||
|
fill: 'red',
|
||||||
|
draggable: true,
|
||||||
|
});
|
||||||
|
layer.add(circle);
|
||||||
|
|
||||||
|
const tr = new Konva.Transformer({
|
||||||
|
anchorStroke: 'black',
|
||||||
|
anchorStrokeWidth: 10,
|
||||||
|
anchorFill: 'blue',
|
||||||
|
anchorSize: 40,
|
||||||
|
borderDash: [6, 6],
|
||||||
|
borderStroke: 'green',
|
||||||
|
nodes: [circle],
|
||||||
|
});
|
||||||
|
layer.add(tr);
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
initial();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div id="container"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss"></style>
|
Loading…
Reference in New Issue