91 lines
1.8 KiB
Vue
91 lines
1.8 KiB
Vue
<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>
|