<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 text1 = new Konva.Text({
		x: 50,
		y: 70,
		fontSize: 20,
		text: '第一个文字',
		draggable: true,
	});
	layer.add(text1);

	const text2 = new Konva.Text({
		x: 50,
		y: 200,
		fontSize: 20,
		text: '第二个文字',
		draggable: true,
	});
	layer.add(text2);

	const tr1 = new Konva.Transformer({
		nodes: [text1],
		centeredScaling: true,
	});
	layer.add(tr1);

	const tr2 = new Konva.Transformer({
		nodes: [text2],
		centeredScaling: false,
	});
	layer.add(tr2);
};

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

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

<style scoped lang="scss"></style>
