<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 text = new Konva.Text({ x: 50, y: 70, fontSize: 30, text: '旋转', draggable: true });
	layer.add(text);

	const tr = new Konva.Transformer({
		nodes: [text],
		centeredScaling: true,
		// 旋转到指定角度对齐
		rotationSnaps: [0, 90, 180, 270],
		resizeEnabled: false,
	});
	layer.add(tr);
};

onMounted(() => {
	initial();
});
</script>

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