39 lines
650 B
Vue
39 lines
650 B
Vue
|
<template>
|
||
|
|
<div id="container"></div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { useWindowSize } from '@vueuse/core';
|
||
|
|
import Konva from 'konva/lib/index';
|
||
|
|
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 });
|
||
|
|
|
||
|
|
layer.add(
|
||
|
|
new Konva.RegularPolygon({
|
||
|
|
x: 100,
|
||
|
|
y: 150,
|
||
|
|
sides: 6,
|
||
|
|
radius: 70,
|
||
|
|
fill: 'red',
|
||
|
|
stroke: 'black',
|
||
|
|
strokeWidth: 4,
|
||
|
|
}),
|
||
|
|
);
|
||
|
|
|
||
|
|
stage.add(layer);
|
||
|
|
};
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
initial();
|
||
|
|
});
|
||
|
|
</script>
|