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

<script setup lang="ts">
import { Layer } from 'konva/lib/Layer';
import { Image as KonvaImage } from 'konva/lib/shapes/Image';
import { Stage } from 'konva/lib/Stage';
import { nextTick, onMounted } from 'vue';

const initial = () => {
	const stage = new Stage({
		container: 'container',
		width: 500,
		height: 500,
		draggable: true,
	});
	const layer = new Layer({ draggable: true });

	const imageObj = new Image();
	const konvaImage = new KonvaImage({
		x: 50,
		y: 5,
		image: imageObj,
		width: 100,
		height: 100,
	});
	imageObj.src = 'https://konvajs.org/assets/yoda.jpg';
	layer.add(konvaImage);
	konvaImage.cornerRadius(20);

	KonvaImage.fromURL('https://konvajs.org/assets/darth-vader.jpg', function (darthNode) {
		darthNode.setAttrs({
			x: 50,
			y: 160,
			scaleX: 0.5,
			scaleY: 0.5,
			cornerRadius: 20,
		});
		layer.add(darthNode);
	});

	stage.add(layer);
};

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