@liyongleihf2006/handwriting-board v1.0.5

handwriting-board

手写板,支持导出画布,移动端支持双指无限拖拽 1. 导出操作直接导出原生canvas,对于生成ObjectURL或者DataURL或者其他添加水印等等操作可以在导出canvas后,您自己对canvas进行处理 2. 导出的canvas的大小只包含绘画内容的范围,也就是无论画布拖拽的范围多么广大,但导出的时候只会导出从绘画的所有的图形的左上角到右下角的矩形区域

安装

npm install @liyongleihf2006/handwriting-board --save

使用

<canvas id="containerRef"></canvas>

import Board from 'handwriting-board'
const containerRef = document.querySelector('#containerRef');
const handwritingBoard = new Board(containerRef, {
  grid: true,
  gridGap: 100,
  gridFillStyle: 'rgb(250,250,250)',
  rule: true,
  ruleGap: 10,
  ruleUnitLen: 5,
  ruleStrokeStyle: 'rgba(0,0,0,0.5)',
  voice: 1,
  color: '#333',
  stack: true,
  cleanR: 20,
  moveCountTotal: 20,
  writeLocked: false,
  dragLocked: false,
  showBorder: true,
  borderStyle: '#333',
  borderWidth: 2
});

参数说明

注意

1. 实例上面最好不要直接修改grid rule属性,因为这两个属性修改后需要重新渲染画布才能体现在视觉上
2. 实例上不要直接修改voice属性,因为笔尖粗细是一个循序渐进的过程,直接设置并不能立即生效
3. stack只能在初始化的时候配置,因为对于记录历史应该初始化时就决定了
4. 其他属性可以随时在实例上面进行修改

默认位置函数

// dom元素的相对于文档的位置不好确定,情况比较复杂,所以获取画布的位置的工作交给每个使用者根据自己具体场景来获取了
// 为什么需要画布的位置呢? 因为画笔在绘画的时候需要通过鼠标/触摸来获取其在画布上面的位置,对于触摸事件来说尚不支持offsetY和offsetX这种获取其相对于画布自身的偏移位置,所以只能使用pageX和pageY来获取事件激活的相对于文档位置,而想要定位到画布上面的具体位置,就要使用其减去画布自身相对于文档的位置。
(()=>{
  const scrollingElement = document.scrollingElement as HTMLElement;
  const rect = this.canvas.getBoundingClientRect();
  return {
    x:rect.x + scrollingElement.scrollLeft,
    y:rect.y + scrollingElement.scrollTop
  }
});

实例方法