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

feat: 🚀 添加组

This commit is contained in:
bunny 2024-07-16 16:16:01 +08:00
parent a42bc7d82d
commit 106f52f71e
2 changed files with 91 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
README.md
View File

@ -1,51 +1,51 @@
```sh ```sh
simple clip https://konvajs.org/docs/groups_and_layers/Layering.html
complex clip https://konvajs.org/docs/groups_and_layers/Change_Containers.html
groups, layers and ordering https://konvajs.org/docs/groups_and_layers/zIndex.html
groups
layering https://konvajs.org/docs/tweens/Linear_Easing.html
change containers https://konvajs.org/docs/tweens/Common_Easings.html
zindex https://konvajs.org/docs/tweens/All_Easings.html
filters https://konvajs.org/docs/tweens/All_Controls.html
blur https://konvajs.org/docs/tweens/Tween_Filter.html
brighten
contrast https://konvajs.org/docs/animations/Create_an_Animation.html
emboss https://konvajs.org/docs/animations/Moving.html
enhance https://konvajs.org/docs/animations/Rotation.html
grayscale https://konvajs.org/docs/animations/Scaling.html
hsl https://konvajs.org/docs/animations/Stop_Animation.html
hsv
rgb https://konvajs.org/docs/selectors/Select_by_id.html
invert https://konvajs.org/docs/selectors/Select_by_Type.html
kaleidoscope https://konvajs.org/docs/selectors/Select_by_Name.html
mask
noise https://konvajs.org/docs/filters/Blur.html
pixelate https://konvajs.org/docs/filters/Brighten.html
custom filter https://konvajs.org/docs/filters/Contrast.html
multiple filters https://konvajs.org/docs/filters/Emboss.html
tweens https://konvajs.org/docs/filters/Enhance.html
linear easing https://konvajs.org/docs/filters/Grayscale.html
common easings https://konvajs.org/docs/filters/HSL.html
all easings https://konvajs.org/docs/filters/HSV.html
finish event https://konvajs.org/docs/filters/RGB.html
all controls https://konvajs.org/docs/filters/Invert.html
tween filter https://konvajs.org/docs/filters/Kaleidoscope.html
complex tweening https://konvajs.org/docs/filters/Mask.html
animations https://konvajs.org/docs/filters/Noise.html
create an animation https://konvajs.org/docs/filters/Pixelate.html
moving https://konvajs.org/docs/filters/Custom_Filter.html
rotation https://konvajs.org/docs/filters/Multiple_Filters.html
scaling
stop animation https://konvajs.org/docs/data_and_serialization/Serialize_a_Stage.html
selectors https://konvajs.org/docs/data_and_serialization/Simple_Load.html
select by id https://konvajs.org/docs/data_and_serialization/Complex_Load.html
select by type https://konvajs.org/docs/data_and_serialization/Best_Practices.html
select by name https://konvajs.org/docs/data_and_serialization/Stage_Data_URL.html
data & serialization & export https://konvajs.org/docs/data_and_serialization/High-Quality-Export.html
serialize a stage
simple load https://konvajs.org/docs/performance/Shape_Redraw.html
complex load https://konvajs.org/docs/performance/Optimize_Strokes.html
json best practices https://konvajs.org/docs/performance/Optimize_Animation.html
stage data url https://konvajs.org/docs/performance/Batch_Draw.html
export to hd image https://konvajs.org/docs/performance/Layer_Management.html
``` ```

41
src/views/groups/groups/index.vue Normal file
View File

@ -0,0 +1,41 @@
<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 group = new Konva.Group({ x: 120, y: 40, rotation: 20, draggable: true });
const colors = ['red', 'orange', 'yellow'];
for (let i = 0; i < 3; i++) {
const rect = new Konva.Rect({
x: i * 30,
y: i * 30,
width: 100,
height: 20,
name: `color${colors[i]}`,
fill: colors[i],
stroke: 'black',
strokeWidth: 4,
});
group.add(rect);
}
layer.add(group);
};
onMounted(() => {
initial();
});
</script>
<template>
<div id="container"></div>
</template>
<style scoped lang="scss"></style>