pixi-plugin-calligraphy

PIXI[FOR 手淘小程序]书法插件，默认使用毛笔

使用方法

npm install @tbminiapp/pixi-plugin-calligraphy -S

1、最简单的例子

import * as calligraphy from "@tbminiapp/pixi-plugin-calligraphy";

const app = new PIXI.Application({
  // ...
});

const container = new PIXI.Container();
// 实例化
const tablet = new calligraphy.Tablet({
  width,
  height,
  resolution: app.renderer.resolution
});

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

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

2、笔刷相关设置

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

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

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

3、清空和撤销

// 清空
tablet.clear();

// 撤销
tablet.undo();

4、获取完整绘制数据

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
  }
]

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

5、事件

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

6、定制笔的风格

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

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

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

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

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

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

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

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

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

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

7、回放

回放数据的获取：

const data = tablet.getPlainHistory();

创建回放：

const app = new PIXI.Application({
  // ...
});

const container = new PIXI.Container();
// 实例化
const player = new calligraphy.Player({
  width,
  height,
  resolution: app.renderer.resolution
}}, data);

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

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

依赖

• @tbminiapp/pixi-miniprogram-engine

API文档

• 见 docs/index.html

写在最后

代码改写于 https://github.com/cobysy/shodo, 代码版权归原作者