sprite-creator
v0.1.56
Published
Sprite creator lib; use: [typescript] [canvas]
Downloads
4,950
Readme
Sprite creator lib
Canvas 2D library use: [typescript
] [canvas
];
Vue3 example
input:
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import type { Ref } from 'vue';
import { VueSpriteCreator, DrawService } from 'sprite-creator'
const editor: Ref<HTMLElement | null> = ref(null);
const sc = new VueSpriteCreator();
const initial = sc.getInitial();
customElements.define(initial.tag, initial.component);
const ctx: Ref<CanvasRenderingContext2D | null> = ref(null);
onMounted(() => {
//@ts-ignore
editor.value?.addEventListener('get-editor-element', (e: CustomEvent) => {
const { editorElement, canvasSelector } = e.detail;
const canvas: HTMLCanvasElement = editorElement.querySelector(canvasSelector);
ctx.value = canvas.getContext("2d");
});
editor.value?.dispatchEvent(new Event('initial'));
});
function setImage(event: Event) {
const file: Ref<File | null> = ref(null);
const target = event.target as HTMLInputElement;
if (target && target.files) {
file.value = target.files[0];
}
if (!!file.value && !!ctx.value) {
const src: string = window.URL.createObjectURL(file.value);
DrawService.drawImage(ctx.value, src, {x: 0, y: 0, width: 300, height: 150});
}
}
</script>
<template>
<div class="editor">
<div class="editor__image-input_wrap">
<input
id="image"
class="editor__image-input_input"
name="image"
type="file"
accept="image/*"
@change="setImage"
capture
>
</div>
<sprite-creator ref="editor"></sprite-creator>
</div>
</template>
output:
<sprite-creator>
#shadow-root (open)
<div>
<canvas id="sc-canvas"></canvas>
</div>
</sprite-creator>