konva-demo/src/views/select/basic/index.vue

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useEventListener, useWindowSize } from '@vueuse/core';
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();
// let stage, layer;

const stage = ref<Stage>();
const layer = ref<Layer>();
const tr = ref();

const initial = () => {
	stage.value = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
	layer.value = new Konva.Layer();
	stage.value.add(layer.value);

	drawLine(stage.value, layer.value);

	rect1(layer.value);
	rect2(layer.value);

	// 添加缩放
	tr.value = new Konva.Transformer();
	layer.value.add(tr.value);

	stageEvent(stage.value, selectionRectangle(layer.value), tr.value);
};

onMounted(() => {
	initial();
	useEventListener(window, 'resize', function () {
		stage.value?.width(width.value);
		stage.value?.height(height.value);

		// tr.value.forceUpdate();
	});
});
</script>

<template>
	<div id="container"></div>
</template>