52 lines
888 B
Vue
52 lines
888 B
Vue
<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>
|