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

<script setup lang="ts">
import { useWindowSize } from '@vueuse/core';
import Konva from 'konva/lib';
import { onMounted } from 'vue';

const { width, height } = useWindowSize();

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

	const layer = new Konva.Layer({ draggable: true });

	const pentagon = new Konva.Text({
		text: '哈哈哈哈哈哈哈哈哈哈哈哈或或',
		fontFamily: 'ital',
		draggable: true,
		fontSize: 26,
		x: 20,
		y: 20,
		stroke: 'red',
		strokeWidth: 2,
		shadowColor: '#000',
		shadowBlur: 0,
		shadowOffset: { x: 1, y: 10 },
		shadowOpacity: 0.5,
	});

	const line = new Konva.Line({
		stroke: 'green',
		strokeWidth: 10,
		lineJoin: 'round',
		lineCap: 'round',
		points: [50, 140, 250, 160],
		shadowColor: 'black',
		shadowBlur: 10,
		shadowOffset: { x: 10, y: 10 },
		shadowOpacity: 0.5,
	});

	layer.add(line);
	layer.add(pentagon);
	stage.add(layer);
};
onMounted(() => {
	initial();
});
</script>
