erasable-pkg v1.0.5

ErasableLayer

what's?

It is a erasable cover that based is canvas,and you can simple to use it.

features

✨️ Friendly TypeScript

✨️ Vue3 Scripe Setup

✨️ Thin Size (6kb)

props & emits & instance

it emit a event entitle done ,example:

it will be called when your erased area more than over value

you can use component instance to reset canvas, example:

<script setup lang="ts">
import { ErasableLayer, type ErasableInstanceRef } from 'erasable-pkg'
import { ref } from 'vue';

const erasableRef = ref<ErasableInstanceRef | null>(null)


function onReset() {
  erasableRef.value?.reset();
}

</script>
<template>
  <div>
    <ErasableLayer ref="erasableRef">
      <div style="width: 360px; height: 180px;background-color: blue;">
        <span>???</span>
      </div>
    </ErasableLayer>

    <button @click="onReset">reset</button>
  </div>
</template>

aursordev：😊 Enjoy it.