<script setup lang="ts">
import { onMounted } from 'vue';
import { useWindowSize } from '@vueuse/core';
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: 180,
		fontSize: 20,
		text: '缩放',
		draggable: true,
	});
	layer.add(text2);

	const tr1 = new Konva.Transformer({
		nodes: [text1],
		keepRatio: true,
		enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
	});
	layer.add(tr1);

	const tr2 = new Konva.Transformer({
		nodes: [text2],
		keepRatio: false,
		enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
	});
	layer.add(tr2);
};

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

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

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