Skip to content

脚本编程

字玩支持为字符或字形添加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()

字符脚本

点击字符编辑界面工具栏中黑色控制台按钮,可以打开字符脚本界面。

字符默认脚本为:

js
function script_4jCbXf8WnbwcQ6yOk7udU (character, constants, FP) {
	//Todo something
}

其中4jCbXf8WnbwcQ6yOk7udU为字符ID,该函数名称不支持修改,用户可以在该函数中编写脚本。 脚本函数包含character,constants,FP三个参数,供用户调用。character为当前字符对象,constants为全局参数列表,FP(FontPlayer缩写)为字玩内置API集合,具体使用方式可参见API一节。

参数类型描述
characterCharacter当前字符对象
constantsConstantsMap全局参数列表
FP字玩内置API集合

字形脚本

在脚本中,用户可以调用字形参数,为字形添加组件、关键点与辅助线。 点击字形编辑界面工具栏中黑色控制台按钮,可以打开字形脚本界面。

字形默认脚本为:

js
function script_G_30KhMvOntZjgDbzrWUA (glyph, constants, FP) {
	//Todo something
}

其中G_30KhMvOntZjgDbzrWUA为形符ID,该函数名称不支持修改,用户可以在该函数中编写脚本。 脚本函数包含glyph, constants, FP三个参数,供用户调用。glyph为当前字形对象,constants为全局参数列表,FP(FontPlayer缩写)为字玩内置API集合,具体使用方式可参见API一节。

参数类型描述
glyphCustomGlyph当前字形对象
constantsConstantsMap全局参数列表
FP字玩内置API集合