<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 images = new Image();
	images.src = 'http://192.168.3.98:9000/bunny-bbs/avatar/2024/06-17/24a90c2ba57445e0a1b119fdcc457a37.jpg';

	// 红色六边形
	const colorPentagon = new Konva.RegularPolygon({
		x: 80,
		y: stage.height() / 2,
		sides: 5,
		radius: 70,
		fill: '#f00',
		stroke: '#000',
		strokeWidth: 4,
		dashEnabled: true,
	});

	// 图片六边形
	const patternPentagon = new Konva.RegularPolygon({
		x: 220,
		y: stage.height() / 2,
		sides: 5,
		radius: 70,
		fillPatternImage: images,
		fillPatternOffset: { x: 55, y: 55 },
		stroke: '#000',
		strokeWidth: 4,
		draggable: true,
	});

	// 线性渐变
	const linearGradPentagon = new Konva.RegularPolygon({
		x: 360,
		y: stage.height() / 2,
		sides: 5,
		radius: 70,
		fillLinearGradientStartPoint: { x: -50, y: 50 },
		fillLinearGradientEndPoint: { x: 50, y: 50 },
		fillLinearGradientColorStops: [0, 'red', 1, 'green'],
		stroke: '#000',
		strokeWidth: 4,
		draggable: true,
	});

	const radialGradPentagon = new Konva.RegularPolygon({
		x: 500,
		y: stage.height() / 2,
		sides: 5,
		radius: 70,
		fillRadialGradientStartPoint: { x: 0, y: 0 },
		fillRadialGradientStartRadius: 0,
		fillRadialGradientEndPoint: { x: 0, y: 0 },
		fillRadialGradientColorStops: [0, 'red', 0.5, 'green', 1, 'blue'],
		fillRadialGradientEndRadius: 70,
		stroke: '#000',
		strokeWidth: 4,
		draggable: true,
	});

	/*
	 * bind listeners
	 */
	colorPentagon.on('mouseover touchstart', function () {
		this.fill('yellow');
	});

	colorPentagon.on('mouseout touchend', function () {
		this.fill('red');
	});

	/**
	 * 设置图片事件
	 */
	patternPentagon.on('mouseover touchstart', function () {
		images.src = 'http://192.168.3.98:9000/bunny-bbs/avatar/2024/06-17/7e716b9313384c139686460b81f431ea.jpg';
		this.fillPatternImage(images);
	});
	patternPentagon.on('mouseout touchend', function () {
		images.src = 'http://192.168.3.98:9000/bunny-bbs/avatar/2024/06-17/24a90c2ba57445e0a1b119fdcc457a37.jpg';
		this.fillPatternImage(images);
	});

	/**
	 * 线性渐变
	 */
	linearGradPentagon.on('mouseover touchstart', function () {
		this.fillLinearGradientColorStops([0, 'yellow', 1, 'blue']);
	});
	linearGradPentagon.on('mouseout touchend', function () {
		this.fillLinearGradientColorStops([0, 'red', 1, 'green']);
	});

	/**
	 * 中心渐变
	 */
	radialGradPentagon.on('mouseover touchstart', function () {
		this.fillRadialGradientColorStops([0, 'red', 0.5, 'yellow', 1, 'green']);
	});
	radialGradPentagon.on('mouseout touchend', function () {
		this.fillRadialGradientColorStops([0, 'red', 0.5, 'green', 1, 'blue']);
	});

	layer.add(radialGradPentagon);
	layer.add(linearGradPentagon);
	layer.add(patternPentagon);
	layer.add(colorPentagon);
	stage.add(layer);
};

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