脚本编程
字玩支持为字符或字形添加javascript脚本,用程序控制组件绘制。
核心理念
用户可以使用脚本绘制可调参笔画,然后拖过拖拽骨架组装笔画形成字形,并辅以参数调整其风格。
参数读取
在脚本中,首先读取字形组件参数,然后根据参数绘制笔画。 每次修改参数后会重新执行脚本,这样绘制的形状就会相应更新。
骨架拖拽
脚本中会定义每个笔画的关键点,骨架包含一系列关键点(但并不一定是全部关键点),定义语句如下:
const skeleton = { start, bend, end }
在编辑界面,用户可以拖拽字形骨架以调整结构,脚本中的computeParamsByJoints方法会根据调整后的骨架重新计算影响骨架的参数。
用户可以拖拽除起点以外其他骨架关键点,脚本中包含相关方法:onSkeletonDragStart、onSkeletonDrag、onSkeletonDragEnd。 拖拽开始时mousedown时调用onSkeletonDragStart,拖拽中mousemove时调用onSkeletonDrag,拖拽结束mouseup时调用onSkeletonDragEnd。
脚本会根据骨架绘制字体形状,以实现骨架、风格分离的设计理念,同一套骨架可以绘制出多种风格笔画,用户可以对同一骨架结构的模板,轻松更改风格属性从而生成不同风格的个性化字库。
笔画绘制
脚本中使用读取的参数进行笔画绘制,绘制时需调用相关API,示例代码:
// 创建钢笔组件
const pen = new FP.PenComponent()
pen.beginPath()
// 绘制右侧(外侧)轮廓
pen.moveTo(out_dian_curves[0].start.x, out_dian_curves[0].start.y)
for (let i = 0; i < out_dian_curves.length; i++) {
const curve = out_dian_curves[i]
pen.bezierTo(curve.control1.x, curve.control1.y, curve.control2.x, curve.control2.y, curve.end.x, curve.end.y)
}
// 绘制轮廓连接线
pen.lineTo(in_dian_curves[in_dian_curves.length - 1].end.x, in_dian_curves[in_dian_curves.length - 1].end.y)
// 绘制左侧(内侧)轮廓
for (let i = in_dian_curves.length - 1; i >= 0; i--) {
const curve = in_dian_curves[i]
pen.bezierTo(curve.control2.x, curve.control2.y, curve.control1.x, curve.control1.y, curve.start.x, curve.start.y)
}
// 绘制轮廓连接线
pen.lineTo(out_dian_curves[0].start.x, out_dian_curves[0].start.y)
pen.closePath()
字符脚本
点击字符编辑界面工具栏中黑色控制台按钮,可以打开字符脚本界面。
字符默认脚本为:
function script_4jCbXf8WnbwcQ6yOk7udU (character, constants, FP) {
//Todo something
}
其中4jCbXf8WnbwcQ6yOk7udU为字符ID,该函数名称不支持修改,用户可以在该函数中编写脚本。 脚本函数包含character,constants,FP三个参数,供用户调用。character为当前字符对象,constants为全局参数列表,FP(FontPlayer缩写)为字玩内置API集合,具体使用方式可参见API一节。
参数 | 类型 | 描述 |
---|---|---|
character | Character | 当前字符对象 |
constants | ConstantsMap | 全局参数列表 |
FP | 无 | 字玩内置API集合 |
字形脚本
在脚本中,用户可以调用字形参数,为字形添加组件、关键点与辅助线。 点击字形编辑界面工具栏中黑色控制台按钮,可以打开字形脚本界面。
字形默认脚本为:
function script_G_30KhMvOntZjgDbzrWUA (glyph, constants, FP) {
//Todo something
}
其中G_30KhMvOntZjgDbzrWUA为形符ID,该函数名称不支持修改,用户可以在该函数中编写脚本。 脚本函数包含glyph, constants, FP三个参数,供用户调用。glyph为当前字形对象,constants为全局参数列表,FP(FontPlayer缩写)为字玩内置API集合,具体使用方式可参见API一节。
参数 | 类型 | 描述 |
---|---|---|
glyph | CustomGlyph | 当前字形对象 |
constants | ConstantsMap | 全局参数列表 |
FP | 无 | 字玩内置API集合 |