63 lines
1.3 KiB
Vue
63 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<div class="container">
|
||
|
|
<button type="button" class="btn btn-primary" @click="onRemoveEvent">移出事件</button>
|
||
|
|
</div>
|
||
|
|
<div id="container"></div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { useWindowSize } from '@vueuse/core';
|
||
|
|
import { onMounted, ref } from 'vue';
|
||
|
|
import Konva from 'konva/lib';
|
||
|
|
import { Text } from 'konva/lib/shapes/Text';
|
||
|
|
import { Circle } from 'konva/lib/shapes/Circle';
|
||
|
|
|
||
|
|
const { width, height } = useWindowSize();
|
||
|
|
const circle = ref<Circle>();
|
||
|
|
const text = ref<Text>();
|
||
|
|
|
||
|
|
const initial = () => {
|
||
|
|
const stage = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
|
||
|
|
const layer = new Konva.Layer({ draggable: true });
|
||
|
|
|
||
|
|
// 添加文字
|
||
|
|
text.value = new Konva.Text({
|
||
|
|
x: 10,
|
||
|
|
y: 10,
|
||
|
|
fontFamily: 'Calibri',
|
||
|
|
fontSize: 20,
|
||
|
|
text: '',
|
||
|
|
fill: 'black',
|
||
|
|
});
|
||
|
|
layer.add(text.value);
|
||
|
|
|
||
|
|
// 添加圆形
|
||
|
|
circle.value = new Konva.Circle({
|
||
|
|
x: stage.width() / 2,
|
||
|
|
y: stage.height() / 2 + 10,
|
||
|
|
radius: 70,
|
||
|
|
fill: 'green',
|
||
|
|
stroke: 'black',
|
||
|
|
strokeWidth: 4,
|
||
|
|
});
|
||
|
|
layer.add(circle.value);
|
||
|
|
|
||
|
|
// 添加事件
|
||
|
|
circle.value?.on('click', function () {
|
||
|
|
text.value?.text('点击了');
|
||
|
|
});
|
||
|
|
|
||
|
|
stage.add(layer);
|
||
|
|
};
|
||
|
|
|
||
|
|
// 移出点击事件
|
||
|
|
const onRemoveEvent = () => {
|
||
|
|
circle.value?.off('click');
|
||
|
|
text.value?.text('移出事件');
|
||
|
|
};
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
initial();
|
||
|
|
});
|
||
|
|
</script>
|