tinyjs-plugin-calligraphy
v1.0.0
Published
The Tiny.js plugin for calligraphy
Downloads
8
Readme
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的图片和绘制次数决定
依赖
Tiny.js
: Link
API文档
http://tinyjs.alibaba.net/plugins/tinyjs-plugin-mars.html#docs
License
MIT license.