The Tiny.js plugin for calligraphy
npm install tinyjs-plugin-calligraphy> 书法插件，一款面向手写字能力的插件，轻松实现书法效果
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 源码
`` html` js
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、笔刷相关设置
` js
// 选择笔刷：细
tablet.selectBrush(Tiny.calligraphy.BRUSH_TYPE.SMALL);
// 设置笔刷墨量：少量
tablet.setBrushInk(Tiny.calligraphy.BRUSH_INK.LESS);
// 设置笔刷颜色：绿
tablet.setBrushColor(0x00ff00);
// 设置压速，值越大，越饱满
tablet.setPressureVelocity(4);
`
##### 3、清空和撤销
` js
// 清空
tablet.clear();
// 撤销
tablet.undo();
`
##### 4、获取绘制的图片
通过 tinyjs-plugin-extract 插件导出 tablet;
> 注意：
> 此方法获取的是真实的绘制内容，即图片的尺寸就是绘制对象的最小尺寸，如果要获取整个画布可传入 stage
##### 5、~~获取完整绘制数据~~
` js`
tablet.getHistory();
// => [{"O":0,"D":[{"X":243.95347595214844,"Y":272.40594482421875,"T":8},{...}]}]
数据结构：
` json
// 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、事件
` js`
// 每一笔的开始事件
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 插件。接入也非常简单：
` html`
另外，该插件在 particles 容器下，限制最大笔画点的数量，默认是二万个，即超过该数量将不进行绘制。
你可以根据自己的情况设置最合理的值：
` js
// 此值一定要在 Tablet 实例化前设置，否则无效
Tiny.calligraphy.Tablet.maxStroke = 1e4;
const tablet = new Tiny.calligraphy.Tablet(app.renderer);
`
##### 8、定制笔的风格
假设你选择了张 50*50 的图片作为笔刷：
` js
// 更改笔刷
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...';
`
你也可以扩展更多尺寸的笔刷：
` js
// 新增一个笔刷（笔刷名为 CUSTOM，书写过程中的最大尺寸为 30）
Tiny.calligraphy.Brush.add('custom', 30);
// 使用定义的笔刷
tablet.selectBrush(Tiny.calligraphy.BRUSH_TYPE.CUSTOM);
`
你也可以扩展更多墨量的笔刷：
` js
// 增加一个更少墨的笔：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、~~回放~~
回放数据的获取：
` js`
const data = tablet.getPlainHistory();
创建回放：
` js
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的图片和绘制次数决定
http://tinyjs.alibaba.net/plugins/tinyjs-plugin-mars.html#docs
MIT license.
> 部分代码来自 https://github.com/cobysy/shodo