56 lines
974 B
Vue
56 lines
974 B
Vue
|
<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 text = new Konva.Text({
|
||
|
|
text: 'Text Shadow!',
|
||
|
|
fontFamily: 'Calibri',
|
||
|
|
fontSize: 40,
|
||
|
|
x: 20,
|
||
|
|
y: 20,
|
||
|
|
fill: 'green',
|
||
|
|
// stroke: 'red',
|
||
|
|
strokeWidth: 2,
|
||
|
|
shadowColor: 'white',
|
||
|
|
// shadowBlur: 0,
|
||
|
|
shadowOffset: { x: 10, y: 10 },
|
||
|
|
// shadowOpacity: 0.5
|
||
|
|
});
|
||
|
|
|
||
|
|
const rect = new Konva.Rect({
|
||
|
|
x: 50,
|
||
|
|
y: 20,
|
||
|
|
// stroke: 'red',
|
||
|
|
width: 100,
|
||
|
|
height: 100,
|
||
|
|
fill: 'red',
|
||
|
|
draggable: true,
|
||
|
|
globalCompositeOperation: 'xor',
|
||
|
|
});
|
||
|
|
|
||
|
|
layer.add(text);
|
||
|
|
layer.add(rect);
|
||
|
|
stage.add(layer);
|
||
|
|
};
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
initial();
|
||
|
|
});
|
||
|
|
</script>
|