@yik_l/sign v1.0.0

开始使用

npm i @yik_l/sign -S
cnpm i @yik_l/sign -S
yarn add @yik_l/sign -S

案例地址 https://static-02ef2b4d-6a6b-4cce-af4e-e27f3205fa1f.bspapp.com/sign#/screen

<!--
 * @Description: 
 * @Author: LiuYan
 * @Date: 2022-02-11 10:53:01
 * @LastEditTime: 2022-08-27 21:59:49
 * @LastEditors: LiuYan
 * @Reference: 
-->
<template>
  <div class="screen">
    <div class="sign">
      <canvas id="canvas" width="300px" height="300px"></canvas>
      <img :src="src" />
    </div>
    <br />
    <el-button @click="onClear">清楚绘制</el-button>
    <el-button @click="onSave" type="primary">保存</el-button>
    <br />
    <textarea class="base64">{{ src }}</textarea>
  </div>
</template>

<script>
import Sign from '@yik_l/sign'
export default {
  data() {
    return {
      sign: null,
      src: '',
    }
  },
  mounted() {
    this.sign = new Sign({
      el: '#canvas',
    })
  },
  methods: {
    onClear() {
      this.sign.clear()
      this.src = ''
    },
    onSave() {
      this.src = this.sign.save()
    },
  },
}
</script>
<style lang="less" scoped>
.sign {
  display: flex;
  canvas {
    margin-right: 10px;
  }
}
.screen {
  padding-left: 100px;
  box-sizing: border-box;
  .base64 {
    width: 800px;
    height: 300px;
  }
}
#canvas,
img {
  border: 1px solid #999;
}
</style>

参数

new Sign({
  el:'#canvas', // canvas dom
  lineWidth : 3, // 线条宽度
  color = "#0088ff", //线条颜色
  bg:'#fff', // 背景颜色或者背景图片  图标必须是线上地址 带有http
})