JavaDemo/konva-demo
JavaDemo
/
konva-demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

page: 📄 自定义拖拽框

This commit is contained in:
bunny 2024-07-12 16:30:43 +08:00
parent 73a74e3569
commit 3346703796
2 changed files with 103 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
README.md
View File

@ -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
``` ```

43
src/views/select/styling/index.vue Normal file
View File

@ -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>