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