绘制印章的开源工具DrawStampUtils使用

最近写了一个绘制印章的工具DrawStampUtils，具有比较完整的印章修改效果，定制化度较高，git地址(https://github.com/xxss0903/drawstamputils)，也可以在npmjs中搜索DrawStampUtils即可

  // 将要绘制的canvas组件的引用传入，还有就是对应的毫米转像素的大小传入即可
  const stampCanvas = ref<HTMLCanvasElement | null>(null)
  const MM_PER_PIXEL = 10 // 毫米换算像素
    const drawStampUtils = new DrawStampUtils(stampCanvas.value, MM_PER_PIXEL)
    drawStampUtils.refreshStamp()

效果如下

印章的设计界面包含了标尺方便进行大小测量以及定位

整体包含了常用的印章设计内容，公司名称，印章类型，印章编码，税号等等。

配置选项	功能描述
ISecurityPattern	控制防伪纹路的相关参数
- openSecurityPattern	是否启用防伪纹路
- securityPatternWidth	设置防伪纹路的宽度
- securityPatternLength	设置防伪纹路的长度
- securityPatternCount	设置防伪纹路的数量
- securityPatternAngleRange	设置防伪纹路的角度范围
ICompany	控制印章公司相关的参数
- companyName	设置公司名称
- compression	控制公司名称的压缩比例
- borderOffset	设置边框偏移量
- textDistributionFactor	控制文字分布因子
- fontFamily	设置字体
- fontHeight	设置字体高度
ICode	控制印章编码相关的参数
- code	设置编码内容
- compression	控制编码的压缩比例
- fontHeight	设置编码字体大小
- fontFamily	设置编码字体
- borderOffset	设置编码边框偏移量
- fontWidth	设置编码字体宽度
- textDistributionFactor	控制编码文字分布因子
ITaxNumber	控制税号相关的参数
- code	设置税号内容
- compression	控制税号的压缩比例
- fontHeight	设置税号字体大小
- fontFamily	设置税号字体
- fontWidth	设置税号字体宽度
- letterSpacing	控制税号字符间距
- positionY	设置税号文字垂直位置
- totalWidth	设置税号文字总宽度
IAgingEffectParams	控制做旧效果的相关参数
- x	设置做旧效果的 x 轴位置
- y	设置做旧效果的 y 轴位置
- noiseSize	控制噪声大小
- noise	控制噪声强度
- strongNoiseSize	控制强噪声大小
- strongNoise	控制强噪声强度
- fade	控制淡化强度
- seed	设置随机种子
通过获取对应的配置即可修改绘制，下面用绘制五角星作为示例：

  // 首先获取到五角星的配置，然后设置配置中的参数，最后重新绘制即可
  const updateDrawConfigs = () => {
    const drawConfigs = drawStampUtils.getDrawConfigs()
    const drawStar: IDrawStar = drawConfigs.drawStar
    drawStar.drawStar = true
    drawStar.starDiameter = 11
    
    drawStampUtils.refreshStamp()
  }

更多的示例请参考demo项目，demo使用vue3写的，但是库对于react也同样适用。