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

Compare commits

base: JavaDemo:67c49a26a464360b56250769d585943c3b27a6aa
Branches Tags
JavaDemo:master
..
compare: JavaDemo:010d9d8ea4b53dbdf335e857257c6bad97655d71
Branches Tags
JavaDemo:master

No commits in common. "67c49a26a464360b56250769d585943c3b27a6aa" and "010d9d8ea4b53dbdf335e857257c6bad97655d71" have entirely different histories.
67c49a26a4 ... 010d9d8ea4

15 changed files with 188 additions and 751 deletions
Show Stats Expand all files Collapse all files

90
README.md
View File

@ -1,37 +1,55 @@
```sh ```sh
https://konvajs.org/docs/animations/Create_an_Animation.html force update
https://konvajs.org/docs/animations/Moving.html text resizing
https://konvajs.org/docs/animations/Rotation.html ignore stroke
https://konvajs.org/docs/animations/Scaling.html clipping
https://konvajs.org/docs/animations/Stop_Animation.html simple clip
complex clip
https://konvajs.org/docs/filters/Blur.html groups, layers and ordering
https://konvajs.org/docs/filters/Brighten.html groups
https://konvajs.org/docs/filters/Contrast.html layering
https://konvajs.org/docs/filters/Emboss.html change containers
https://konvajs.org/docs/filters/Enhance.html zindex
https://konvajs.org/docs/filters/Grayscale.html filters
https://konvajs.org/docs/filters/HSL.html blur
https://konvajs.org/docs/filters/HSV.html brighten
https://konvajs.org/docs/filters/RGB.html contrast
https://konvajs.org/docs/filters/Invert.html emboss
https://konvajs.org/docs/filters/Kaleidoscope.html enhance
https://konvajs.org/docs/filters/Mask.html grayscale
https://konvajs.org/docs/filters/Noise.html hsl
https://konvajs.org/docs/filters/Pixelate.html hsv
https://konvajs.org/docs/filters/Custom_Filter.html rgb
https://konvajs.org/docs/filters/Multiple_Filters.html invert
kaleidoscope
https://konvajs.org/docs/data_and_serialization/Serialize_a_Stage.html mask
https://konvajs.org/docs/data_and_serialization/Simple_Load.html noise
https://konvajs.org/docs/data_and_serialization/Complex_Load.html pixelate
https://konvajs.org/docs/data_and_serialization/Best_Practices.html custom filter
https://konvajs.org/docs/data_and_serialization/Stage_Data_URL.html multiple filters
https://konvajs.org/docs/data_and_serialization/High-Quality-Export.html tweens
linear easing
https://konvajs.org/docs/performance/Shape_Redraw.html common easings
https://konvajs.org/docs/performance/Optimize_Strokes.html all easings
https://konvajs.org/docs/performance/Optimize_Animation.html finish event
https://konvajs.org/docs/performance/Batch_Draw.html all controls
https://konvajs.org/docs/performance/Layer_Management.html 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
```

2
build/optimize.ts
View File

@ -27,7 +27,7 @@ const include = [
// 'sortablejs', // 'sortablejs',
// 'swiper/vue', // 'swiper/vue',
// 'mint-filter', // 'mint-filter',
'@vueuse/core', // '@vueuse/core',
// 'vue3-danmaku', // 'vue3-danmaku',
// 'v-contextmenu', // 'v-contextmenu',
// 'vue-pdf-embed', // 'vue-pdf-embed',

2
public/verify.json
View File

@ -1 +1 @@
{"version":1721355798048} {"version":1721089915004}

90
src/views/groups/change-container/index.vue
View File

@ -1,90 +0,0 @@
<script setup lang="ts">
import { useWindowSize } from '@vueuse/core';
import { onMounted, ref } from 'vue';
import Konva from 'konva/lib';
import { Group } from 'konva/lib/Group';
import { Rect } from 'konva/lib/shapes/Rect';
const { width, height } = useWindowSize();
const yellowGroup = ref<Group>();
const blueGroup = ref<Group>();
const box = ref<Rect>();
const initial = () => {
const stage = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
const layer = new Konva.Layer();
stage.add(layer);
yellowGroup.value = new Konva.Group({
x: 100,
y: 100,
draggable: true,
});
blueGroup.value = new Konva.Group({
x: 300,
y: 80,
draggable: true,
});
box.value = new Konva.Rect({
x: 10,
y: 10,
width: 100,
height: 50,
fill: 'red',
stroke: 'black',
});
const yellowCircle = new Konva.Circle({
x: 0,
y: 0,
radius: 50,
fill: 'yellow',
stroke: 'black',
});
const blueCircle = new Konva.Circle({
x: 0,
y: 0,
radius: 50,
fill: 'blue',
stroke: 'black',
});
yellowGroup.value.add(yellowCircle);
yellowGroup.value.add(box.value);
blueGroup.value.add(blueCircle);
layer.add(yellowGroup.value);
layer.add(blueGroup.value);
stage.add(layer);
};
/**
* * 移动到蓝色组
*/
const toBlue = () => {
box.value?.moveTo(blueGroup.value);
};
/**
* * 移动到黄色
*/
const toYellow = () => {
box.value?.moveTo(yellowGroup.value);
};
onMounted(() => {
initial();
});
</script>
<template>
<div class="container-fluid">
<button id="toBlue" class="btn btn-primary" @click="toBlue">Move red box to blue group</button>
<button id="toYellow" class="btn btn-warning" @click="toYellow">Move red box to yellow group</button>
<div id="container"></div>
</div>
</template>
<style scoped lang="scss"></style>

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

@ -1,41 +0,0 @@
<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>

66
src/views/groups/layering/index.vue
View File

@ -1,66 +0,0 @@
<script setup lang="ts">
import { useWindowSize } from '@vueuse/core';
import { onMounted, ref } from 'vue';
import Konva from 'konva/lib';
import { Rect } from 'konva/lib/shapes/Rect';
const { width, height } = useWindowSize();
const yellowBox = ref<Rect>();
const initial = () => {
const stage = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
const layer = new Konva.Layer();
stage.add(layer);
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
for (let n = 0; n < 6; n++) {
(function () {
const i = n;
const box = new Konva.Rect({
x: i * 30 + 210,
y: i * 18 + 40,
width: 100,
height: 50,
fill: colors[i],
stroke: 'black',
strokeWidth: 4,
draggable: true,
name: colors[i],
});
box.on('mouseover', function () {
document.body.style.cursor = 'pointer';
});
box.on('mouseout', function () {
document.body.style.cursor = 'default';
});
if (colors[i] === 'yellow') {
yellowBox.value = box;
}
layer.add(box);
})();
}
stage.add(layer);
};
onMounted(() => {
initial();
});
</script>
<template>
<div class="container-fluid">
<div id="buttons">
<button id="toTop" class="btn btn-warning" @click="yellowBox?.moveToTop()">Move yellow box to top</button>
<button id="toBottom" class="btn btn-outline-info" @click="yellowBox?.moveToBottom()">Move yellow box to bottom</button>
<button id="up" class="btn btn-outline-warning" @click="yellowBox?.moveUp()">Move yellow box up</button>
<button id="down " class="btn btn-info" @click="yellowBox?.moveDown()">Move yellow box down</button>
<button id="zIndex" class="btn btn-primary" @click="yellowBox?.setZIndex(3)">Set yellow box zIndex to 3</button>
</div>
<div id="container"></div>
</div>
</template>
<style scoped lang="scss"></style>

55
src/views/groups/z-index/index.vue
View File

@ -1,55 +0,0 @@
<script setup lang="ts">
import { useWindowSize } from '@vueuse/core';
import Konva from 'konva/lib';
import { onMounted, ref } from 'vue';
import { Circle } from 'konva/lib/shapes/Circle';
const { width, height } = useWindowSize();
const circle = ref<Circle>();
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();
layer.add(group);
circle.value = new Konva.Circle({
x: 70,
y: 70,
fill: 'red',
radius: 30,
});
group.add(circle.value);
const blackRect = new Konva.Rect({
x: 20,
y: 20,
fill: 'black',
width: 100,
height: 100,
});
group.add(blackRect);
};
/**
* * 将圆形zIndex设置为1
*/
const updateCircle = () => {
circle.value!.zIndex(1);
};
onMounted(() => {
initial();
});
</script>
<template>
<div class="container-fluid">
<button class="btn btn-primary" @click="updateCircle">将圆形zIndex设置为1</button>
<div id="container"></div>
</div>
</template>
<style scoped lang="scss"></style>

159
src/views/select/basic/index.vue
View File

@ -1,48 +1,153 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref } from 'vue'; import { onMounted } from 'vue';
import { useEventListener, useWindowSize } from '@vueuse/core'; import { useWindowSize } from '@vueuse/core';
import Konva from 'konva/lib'; import Konva from 'konva/lib';
import { rect1, rect2, selectionRectangle } from '@/views/select/basic/rect.ts';
import { stageEvent } from '@/views/select/basic/stageEvent.ts';
import { drawLine } from '@/views/select/basic/line.ts';
import { Stage } from 'konva/lib/Stage';
import { Layer } from 'konva/lib/Layer';
const { width, height } = useWindowSize(); const { width, height } = useWindowSize();
// let stage, layer;
const stage = ref<Stage>();
const layer = ref<Layer>();
const tr = ref();
const initial = () => { const initial = () => {
stage.value = new Konva.Stage({ container: 'container', width: width.value, height: height.value }); const stage = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
layer.value = new Konva.Layer(); const layer = new Konva.Layer();
stage.value.add(layer.value);
drawLine(stage.value, layer.value); const rect1 = new Konva.Rect({
x: 60,
y: 60,
width: 100,
height: 90,
fill: 'red',
name: 'rect',
draggable: true,
});
layer.add(rect1);
rect1(layer.value); const rect2 = new Konva.Rect({
rect2(layer.value); x: 180,
y: 200,
width: 100,
height: 200,
fill: 'green',
name: 'rect',
draggable: true,
});
layer.add(rect2);
// 添加缩放 // 添加缩放
tr.value = new Konva.Transformer(); const tr = new Konva.Transformer();
layer.value.add(tr.value); layer.add(tr);
tr.nodes([rect1, rect2]);
stageEvent(stage.value, selectionRectangle(layer.value), tr.value); const selectionRectangle = new Konva.Rect({
fill: 'rgba(0,0,255,0.5)',
visible: false,
// disable events to not interrupt with events
listening: false,
});
layer.add(selectionRectangle);
let x1 = 0,
y1 = 0,
x2 = 0,
y2 = 0;
let selecting = false;
stage.on('mousedown touchstart', e => {
// do nothing if we mousedown on any shape
if (e.target !== stage) {
return;
}
e.evt.preventDefault();
x1 = stage.getPointerPosition()!.x;
y1 = stage.getPointerPosition()!.y;
x2 = stage.getPointerPosition()!.x;
y2 = stage.getPointerPosition()!.y;
selectionRectangle.width(0);
selectionRectangle.height(0);
selecting = true;
});
stage.on('mousemove touchmove', e => {
// do nothing if we didn't start selection
if (!selecting) {
return;
}
e.evt.preventDefault();
x2 = stage.getPointerPosition()!.x;
y2 = stage.getPointerPosition()!.y;
selectionRectangle.setAttrs({
visible: true,
x: Math.min(x1, x2),
y: Math.min(y1, y2),
width: Math.abs(x2 - x1),
height: Math.abs(y2 - y1),
});
});
stage.on('mouseup touchend', e => {
// do nothing if we didn't start selection
selecting = false;
if (!selectionRectangle.visible()) {
return;
}
e.evt.preventDefault();
// update visibility in timeout, so we can check it in click event
selectionRectangle.visible(false);
let shapes = stage.find('.rect');
let box = selectionRectangle.getClientRect();
let selected = shapes.filter(shape => Konva.Util.haveIntersection(box, shape.getClientRect()));
tr.nodes(selected);
});
// clicks should select/deselect shapes
stage.on('click tap', function (e) {
// if we are selecting with rect, do nothing
if (selectionRectangle.visible()) {
return;
}
// if click on empty area - remove all selections
if (e.target === stage) {
tr.nodes([]);
return;
}
// do nothing if clicked NOT on our rectangles
if (!e.target.hasName('rect')) {
return;
}
// do we pressed shift or ctrl?
const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
const isSelected = tr.nodes().indexOf(e.target) >= 0;
if (!metaPressed && !isSelected) {
// if no key pressed and the node is not selected
// select just one
tr.nodes([e.target]);
} else if (metaPressed && isSelected) {
// if we pressed keys and node was selected
// we need to remove it from selection:
const nodes = tr.nodes().slice(); // use slice to have new copy of array
// remove node from array
nodes.splice(nodes.indexOf(e.target), 1);
tr.nodes(nodes);
} else if (metaPressed && !isSelected) {
// add the node into selection
const nodes = tr.nodes().concat([e.target]);
tr.nodes(nodes);
}
});
stage.add(layer);
}; };
onMounted(() => { onMounted(() => {
initial(); initial();
useEventListener(window, 'resize', function () {
stage.value?.width(width.value);
stage.value?.height(height.value);
// tr.value.forceUpdate();
});
}); });
</script> </script>
<template> <template>
<div id="container"></div> <div id="container"></div>
</template> </template>
<style scoped lang="scss"></style>

33
src/views/select/basic/line.ts
View File

@ -1,33 +0,0 @@
import { Stage } from 'konva/lib/Stage';
import { Layer } from 'konva/lib/Layer';
import Konva from 'konva/lib';
export const drawLine = (stage: Stage, layer: Layer) => {
const xSnaps = Math.round(stage.width() / 50);
const ySnaps = Math.round(stage.height() / 50);
const cellWidth = stage.width() / xSnaps;
const cellHeight = stage.height() / ySnaps;
for (let i = 0; i < xSnaps; i++) {
const xLine = new Konva.Line({
x: i * cellWidth,
points: [0, 0, 0, stage.height()],
stroke: '#96e04d',
strokeWidth: 1,
id: 'line',
});
layer.add(xLine);
}
for (let i = 0; i < ySnaps; i++) {
layer.add(
new Konva.Line({
y: i * cellHeight,
points: [0, 0, stage.width(), 0],
stroke: '#96e04d',
strokeWidth: 1,
id: 'line',
}),
);
}
};

41
src/views/select/basic/rect.ts
View File

@ -1,41 +0,0 @@
import { Layer } from 'konva/lib/Layer';
import Konva from 'konva/lib';
export const rect1 = (parent: Layer) => {
const rect = new Konva.Rect({
x: 60,
y: 60,
width: 100,
height: 90,
fill: 'red',
name: 'rect',
draggable: true,
});
parent.add(rect);
return rect;
};
export const rect2 = (parent: Layer) => {
const rect = new Konva.Rect({
x: 180,
y: 200,
width: 100,
height: 200,
fill: 'green',
name: 'rect',
draggable: true,
});
parent.add(rect);
return rect;
};
export const selectionRectangle = (layer: Layer) => {
const selectionRectangle = new Konva.Rect({
fill: 'rgba(0,0,255,0.5)',
visible: false,
listening: false,
});
layer.add(selectionRectangle);
return selectionRectangle;
};

93
src/views/select/basic/stageEvent.ts
View File

@ -1,93 +0,0 @@
import Konva from 'konva/lib';
import { Stage } from 'konva/lib/Stage';
import { Rect } from 'konva/lib/shapes/Rect';
import { Transformer } from 'konva/lib/shapes/Transformer';
export const stageEvent = (stage: Stage, selectionRectangle: Rect, tr: Transformer) => {
let x1 = 0,
y1 = 0,
x2 = 0,
y2 = 0;
let selecting = false;
stage.on('mousedown touchstart', e => {
e.evt.preventDefault();
x1 = stage.getPointerPosition()!.x;
y1 = stage.getPointerPosition()!.y;
x2 = stage.getPointerPosition()!.x;
y2 = stage.getPointerPosition()!.y;
selectionRectangle.width(0);
selectionRectangle.height(0);
selecting = true;
});
stage.on('mousemove touchmove', e => {
if (!selecting) return;
e.evt.preventDefault();
x2 = stage.getPointerPosition()!.x;
y2 = stage.getPointerPosition()!.y;
selectionRectangle.setAttrs({
visible: true,
x: Math.min(x1, x2),
y: Math.min(y1, y2),
width: Math.abs(x2 - x1),
height: Math.abs(y2 - y1),
});
});
stage.on('mouseup touchend', e => {
selecting = false;
if (!selectionRectangle.visible()) return;
e.evt.preventDefault();
// update visibility in timeout, so we can check it in click event
selectionRectangle.visible(false);
let shapes = stage.find('.rect');
let box = selectionRectangle.getClientRect();
let selected = shapes.filter(shape => Konva.Util.haveIntersection(box, shape.getClientRect()));
tr.nodes(selected);
});
// clicks should select/deselect shapes
stage.on('click tap', function (e) {
// if we are selecting with rect, do nothing
if (selectionRectangle.visible()) {
return;
}
// if click on empty area - remove all selections
if (e.target === stage) {
tr.nodes([]);
return;
}
// do nothing if clicked NOT on our rectangles
if (!e.target.hasName('rect')) {
return;
}
// do we pressed shift or ctrl?
const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
const isSelected = tr.nodes().indexOf(e.target) >= 0;
if (!metaPressed && !isSelected) {
// if no key pressed and the node is not selected
// select just one
tr.nodes([e.target]);
} else if (metaPressed && isSelected) {
// if we pressed keys and node was selected
// we need to remove it from selection:
const nodes = tr.nodes().slice(); // use slice to have new copy of array
// remove node from array
nodes.splice(nodes.indexOf(e.target), 1);
tr.nodes(nodes);
} else if (metaPressed && !isSelected) {
// add the node into selection
const nodes = tr.nodes().concat([e.target]);
tr.nodes(nodes);
}
});
};

54
src/views/select/text-resizing/index.vue
View File

@ -1,54 +0,0 @@
<script setup lang="ts">
import { onMounted } from 'vue';
import Konva from 'konva/lib';
import { useWindowSize } from '@vueuse/core';
const { width, height } = useWindowSize();
const MIN_WIDTH = 100;
const initial = () => {
const stage = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
const layer = new Konva.Layer();
stage.add(layer);
const text = new Konva.Text({
x: 50,
y: 60,
fontSize: 20,
text: 'Hello from the Konva framework. Try to resize me.',
draggable: true,
});
layer.add(text);
const tr = new Konva.Transformer({
nodes: [text],
padding: 5,
flipEnabled: false,
enabledAnchors: ['middle-left', 'middle-right'],
boundBoxFunc(oldBox, newBox) {
if (Math.abs(newBox.width) < MIN_WIDTH) {
return oldBox;
}
return newBox;
},
});
layer.add(tr);
text.on('transform', () => {
text.setAttrs({
width: Math.max(text.width() * text.scaleX(), MIN_WIDTH),
scaleX: 1,
scaleY: 1,
});
});
};
onMounted(() => {
initial();
});
</script>
<template>
<div id="container"></div>
</template>

103
src/views/tweens/common-easings/index.vue
View File

@ -1,103 +0,0 @@
<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 });
stage.draggable(true);
const layer = new Konva.Layer();
stage.add(layer);
const greenBox = new Konva.Rect({
x: 70,
y: stage.height() / 2,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
offset: {
x: 50,
y: 25,
},
});
const blueBox = new Konva.Rect({
x: 190,
y: stage.height() / 2,
width: 100,
height: 50,
fill: 'blue',
stroke: 'black',
strokeWidth: 4,
offset: {
x: 50,
y: 25,
},
});
const redBox = new Konva.Rect({
x: 310,
y: stage.height() / 2,
width: 100,
height: 50,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
offset: {
x: 50,
y: 25,
},
});
layer.add(greenBox);
layer.add(blueBox);
layer.add(redBox);
// the tween has to be created after the node has been added to the layer
greenBox.tween = new Konva.Tween({
node: greenBox,
scaleX: 2,
scaleY: 1.5,
easing: Konva.Easings.EaseIn,
duration: 1,
});
blueBox.tween = new Konva.Tween({
node: blueBox,
scaleX: 2,
scaleY: 1.5,
easing: Konva.Easings.EaseInOut,
duration: 1,
});
redBox.tween = new Konva.Tween({
node: redBox,
scaleX: 2,
scaleY: 1.5,
easing: Konva.Easings.EaseOut,
duration: 1,
});
// use event delegation
layer.on('mouseover touchstart', function (evt) {
evt.target.tween.play();
});
layer.on('mouseout touchend', function (evt) {
evt.target.tween.reverse();
});
};
onMounted(() => {
initial();
});
</script>
<template>
<div id="container"></div>
</template>
<style scoped lang="scss"></style>

51
src/views/tweens/linear-easing/index.vue
View File

@ -1,51 +0,0 @@
<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 rect = new Konva.Rect({
x: 50,
y: 20,
width: 120,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 2,
opacity: 0.2,
});
layer.add(rect);
const tween = new Konva.Tween({
node: rect,
duration: 1,
x: 140,
y: 90,
fill: 'red',
rotation: Math.PI * 2,
opacity: 1,
strokeWidth: 6,
scaleX: 1.5,
});
setTimeout(() => {
tween.play();
}, 2000);
};
onMounted(() => {
initial();
});
</script>
<template>
<div id="container"></div>
</template>
<style scoped lang="scss"></style>

59
src/views/tweens/tween-filter/index.vue
View File

@ -1,59 +0,0 @@
<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 image = new Image();
const lion = new Konva.Image({
x: 80,
y: 30,
width: 50,
height: 50,
draggable: true,
image,
});
layer.add(lion);
image.crossOrigin = 'Anonymous';
image.src = 'https://konvajs.org/assets/darth-vader.jpg';
image.onload = function () {
lion.image(image);
lion.cache();
lion.filters([Konva.Filters.Blur]);
lion.blurRadius(100);
const tween = new Konva.Tween({
node: lion,
duration: 0.6,
blurRadius: 0,
easing: Konva.Easings.EaseInOut,
});
lion.on('mouseover', function () {
tween.play();
});
lion.on('mouseout', function () {
tween.reverse();
});
};
};
onMounted(() => {
initial();
});
</script>
<template>
<div id="container"></div>
</template>
<style scoped lang="scss"></style>