1.0.9 • Published 3 years ago

elesign

Licence

MIT

Version

1.0.9

Deps

Size

15 kB

Vulns

Weekly

Summary Dependency Versions

elesign

通过 canvas 实现线上涂鸦，签名，清空，转为 png，橡皮擦，撤销回退，重做前进，可自定义画笔的颜色(或图片)、粗细。

props 属性

属性名	说明	类型	默认值
width	画布宽度	Number	500
height	画布高度	Number	200
canvasStyle	画布样式	Object	{ border: '2px solid #6699cc'}
color	画笔颜色	String	#000
lineWidth	画笔粗细	String 或 Number	10
empty	空的文字内容	String	签名区域
defaultImg	画布初始的值，格式应该是 canvas 的 toDataURL() 方法，生成的是 base64 的图片	String	""
isEraser	是否橡皮擦转状态	Boolean	false
eraserSize	橡皮擦大小	Number	25

expose 暴露的实例属性

属性名	说明	类型
redo	清空的方法	function
toPng	转为 png 的的方法	function
backward	撤销后退的方法	function
forward	重做前进的的方法	function
isEmpty	画布是否为空	Boolean
isBackwardAble	是否可以撤销回退	Boolean
isForwardAble	是否可以重做前进	Boolean

使用示例

<template>
  <div class="draw-wrap">
    <elesign ref="elesignRef" color="red" lineWidth="5" width="400" empty="请签名" />
    <div class="tool">
      <button @click="redo">重做</button>
      <button @click="toPng">打印png</button>
      <div>{{ '画布是否为空：' + isEmpty }}</div>
    </div>
  </div>
</template>
<script setup>
import { computed, ref } from 'vue';
import elesign from 'elesign';
const elesignRef = ref('');
const isEmpty = computed(() => {
  return elesignRef.value?.isEmpty;
});
/* 清空 */
function redo() {
  elesignRef.value?.redo();
}
/* 打印图片 */
function toPng() {
  let pic = elesignRef.value?.toPng();
  console.log(pic);
}
</script>
<style>
.draw-wrap {
  background: #fff;
  color: #000;
  padding: 40px;
}
.tool div {
  margin-top: 16px;
}
.tool button {
  margin-top: 16px;
  margin-right: 8px;
}
</style>

Keywords

canvas 电子涂鸦线上签名