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

<script setup lang="ts">
import { useWindowSize } from '@vueuse/core';
import { Layer } from 'konva/lib/Layer';
import { Rect } from 'konva/lib/shapes/Rect';
import { Stage } from 'konva/lib/Stage';
import { nextTick, onBeforeMount } from 'vue';
import { Circle } from 'konva/lib/shapes/Circle';
import { Ellipse } from 'konva/lib/shapes/Ellipse';
import { Wedge } from 'konva/lib/shapes/Wedge';

const { width, height } = useWindowSize();

const initial = async () => {
	// 创建平台
	const stage = new Stage({
		container: 'container',
		width: width.value / 2,
		height: height.value / 2,
	});

	// 创建层
	const layer = new Layer({ draggable: true });

	const rect1 = new Rect({
		x: 10,
		y: 10,
		width: 100,
		height: 100,
		fill: '#824393',
		stroke: '#ff',
		strokeWidth: 2,
	});
	layer.add(rect1);

	const rect2 = new Rect({
		x: 200,
		y: 10,
		width: 100,
		height: 100,
		fill: 'green',
		stroke: '#000',
		strokeWidth: 2,
		cornerRadius: 10,
	});
	layer.add(rect2);

	const rect3 = new Rect({
		x: 400,
		y: 10,
		width: 100,
		height: 100,
		fill: 'green',
		stroke: '#000',
		strokeWidth: 2,
		cornerRadius: [0, 10, 20, 30],
		draggable: true,
	});
	layer.add(rect3);

	const layer1 = new Layer({ draggable: true });
	const circle1 = new Circle({
		x: 60,
		y: 200,
		radius: 50,
		fill: 'blue',
		stroke: '#000',
		strokeWidth: 2,
	});
	layer1.add(circle1);

	const ellipse = new Ellipse({
		x: 220,
		y: 200,
		radiusX: 100,
		radiusY: 50,
		fill: 'green',
		stroke: '#000',
		strokeWidth: 2,
	});
	layer1.add(ellipse);

	const wedge = new Wedge({
		x: 360,
		y: 200,
		radius: 70,
		angle: 30,
		stroke: 'green',
		strokeWidth: 3,
		fill: 'red',
		rotation: -60,
	});
	layer1.add(wedge);

	stage.add(layer);
	stage.add(layer1);
};

onBeforeMount(() => {
	nextTick(() => initial());
});
</script>
