Tinyjs-plugin-calligraphy NPM

tinyjs-plugin-calligraphy

书法插件，一款面向手写字能力的插件，轻松实现书法效果

查看demo

demo/

引用方法

推荐作为依赖使用
- npm install tinyjs-plugin-calligraphy --save
也可以直接引用线上cdn地址，注意要使用最新的版本号，例如：
- https://gw.alipayobjects.com/os/lib/tinyjs-plugin-calligraphy/0.6.0/index.js
- https://gw.alipayobjects.com/os/lib/tinyjs-plugin-calligraphy/0.6.0/index.debug.js

起步

首先当然是要引入，推荐NPM方式，当然你也可以使用CDN或下载独立版本，先从几个例子入手吧！

1、最简单的例子

引用 Tiny.js 源码

<script src="https://gw.alipayobjects.com/os/lib/tinyjs/tiny/1.5.0/tiny.js"></script>

import * as calligraphy from 'tinyjs-plugin-calligraphy';

const app = new Tiny.Application({
  ...
  renderOptions: {
    preserveDrawingBuffer: true,
  },
});

const container = new Tiny.Container();
// 实例化
const tablet = new Tiny.calligraphy.Tablet(app.renderer);

// 开始接受笔画
tablet.start();

container.addChild(tablet);
app.run(container);

注意：在 WebGL 渲染模式下，toDataURL 生成的图片可能是纯黑图，可以通过设置启动参数中的 renderOptions: { preserveDrawingBuffer: true } 来规避

2、笔刷相关设置

// 选择笔刷：细
tablet.selectBrush(Tiny.calligraphy.BRUSH_TYPE.SMALL);

// 设置笔刷墨量：少量
tablet.setBrushInk(Tiny.calligraphy.BRUSH_INK.LESS);

// 设置笔刷颜色：绿
tablet.setBrushColor(0x00ff00);

// 设置压速，值越大，越饱满
tablet.setPressureVelocity(4);

3、清空和撤销

// 清空
tablet.clear();

// 撤销
tablet.undo();

4、获取绘制的图片

通过 tinyjs-plugin-extract 插件导出 tablet;

注意：此方法获取的是真实的绘制内容，即图片的尺寸就是绘制对象的最小尺寸，如果要获取整个画布可传入 stage

5、获取完整绘制数据

tablet.getHistory();
// => [{"O":0,"D":[{"X":243.95347595214844,"Y":272.40594482421875,"T":8},{...}]}]

数据结构：

// StrokeHistory
[
  // 0: STROKE
  {
    O: STROKE_OPERATION // 值为 0
    D: StrokeData[] // 见下
  },
  // 1: SET_BRUSH
  {
    O: STROKE_OPERATION // 值为 1
    D: BRUSH_TYPE
  },
  // 2: SET_INK
  {
    O: STROKE_OPERATION // 值为 2
    D: BRUSH_INK
  },
  // 3: SET_COLOR
  {
    O: STROKE_OPERATION // 值为 3
    D: number // 如：0xffff00
  },
]

// StrokeData
{
  P: number // 压力值（暂不支持）
  T: number // 距离第一笔的耗时（累加）
  X: number // 坐标 x
  Y: number // 坐标 y
}

6、事件

// 每一笔的开始事件
tablet.on('stroke-begin', function() {
  console.log('beigin');
});
// 每一笔的绘制事件
tablet.on('stroke-move', function({ x, y }) {
  console.log('position', x, y);
});
// 每一笔的结束事件
tablet.on('stroke-end', function(history) {
  console.log(history);
});

7、性能相关

为获得最大的绘制性能，你可以借助 particles 插件。接入也非常简单：

<!-- 在通过 script 标签引入即可 -->
<script src="https://gw.alipayobjects.com/os/lib/tinyjs-plugin-particles/0.3.1/index.js"></script>

另外，该插件在 particles 容器下，限制最大笔画点的数量，默认是二万个，即超过该数量将不进行绘制。你可以根据自己的情况设置最合理的值：

// 此值一定要在 Tablet 实例化前设置，否则无效
Tiny.calligraphy.Tablet.maxStroke = 1e4;

const tablet = new Tiny.calligraphy.Tablet(app.renderer);

8、定制笔的风格

假设你选择了张 50*50 的图片作为笔刷：

// 更改笔刷
Tiny.calligraphy.BRUSH_SIZE.width = 50;
Tiny.calligraphy.BRUSH_SIZE.height = 50;

// 这里假设不考虑墨量，即都是一样（当然如果不一样，就改成各自的图片即可）
Tiny.calligraphy.BRUSH_INK_IMAGE['less'] =
Tiny.calligraphy.BRUSH_INK_IMAGE['medium'] =
Tiny.calligraphy.BRUSH_INK_IMAGE['plenty'] = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA...';

你也可以扩展更多尺寸的笔刷：

// 新增一个笔刷（笔刷名为 CUSTOM，书写过程中的最大尺寸为 30）
Tiny.calligraphy.Brush.add('custom', 30);

// 使用定义的笔刷
tablet.selectBrush(Tiny.calligraphy.BRUSH_TYPE.CUSTOM);

你也可以扩展更多墨量的笔刷：

// 增加一个更少墨的笔：FEWER
Tiny.calligraphy.BRUSH_INK.FEWER = 'fewer';

// 增加这个笔的笔触图片
Tiny.calligraphy.BRUSH_INK_IMAGE['fewer'] = 'data:image/png;base64,iVBORw0KGgoAAA...';

// 使用这个笔刷
tablet.setBrushInk(Tiny.calligraphy.BRUSH_INK.FEWER);

9、回放

回放数据的获取：

const data = tablet.getPlainHistory();

创建回放：

const app = new Tiny.Application({
  ...
  renderOptions: {
    preserveDrawingBuffer: true,
  },
});

const container = new Tiny.Container();
// 实例化
const player = new Tiny.calligraphy.Player(app.renderer, data);

container.addChild(player);
app.run(container);

// 开始播放
player.play();

原理

受 shodo 的启发，TinyJS 的 calligraphy 插件可以模拟毛笔的效果，其实现原理也极其聪明、简单，其核心逻辑在 StrokeEngine.js 中，下面我们一步步拆解。

1、准备一张图片，它像笔点在纸上：
2、监听 touch 事件，当 touchmove 时，将 x/y 坐标及流失时间 t 通过运算映射为显示对象（1的图片）的属性，如坐标、缩放，每一次 move 创建一个显示对象。可以理解为有 N 个点组成了线
3、缩放值与流失时间成反比，这样可以做到画的越快，“线条”越细。笔触效果由1的图片和绘制次数决定