Skip to content

CustomGlyph

CustomGlyph为自定义字形类,包含添加组件、关键点、参考线等方法。

public getParam (name: string)

简介

getParam方法用于获取指定参数值。

参数
  1. name: string 参数名称
返回值

参数数值

示例
js
const length = glyph.getParam('length')

public addComponent(component: Component)

简介

addComponent方法用于将指定的组件添加到当前对象中。

参数
  1. component: Component 要添加的组件对象,必须是 Component 类型 其中Component类型包含四种组件类型:
type Component = PenComponent | PolygonComponent | EllipseComponent | RectangleComponent
返回值

void 无返回值。该方法仅用于执行添加操作。

示例
js
const pen = new FP.PenComponent()
glyph.addComponent(pen)

public addJoint (joint: Joint)

简介

addJoint方法用于为字形添加关键点。关键点可以作为用户编辑字形时的参考点,也可以用于调整字形位置时的拖拽参考。

参数
  1. joint: Joint 要添加的关键点对象,必须是 Joint 对象实例
返回值

void 无返回值。该方法仅用于执行添加操作。

示例
js
const start = new FP.Joint(
  'start',
  {
    x: start_x,
    y: start_y,
  },
)
const end = new FP.Joint(
  'end',
  {
    x: end_x,
    y: end_y,
  },
)

glyph.addJoint(start)
glyph.addJoint(end)

public addRefLine (refline)

简介

addRefLine方法用于为字形添加辅助线。辅助线可以作为用户编辑字形时的参考。

参数
  1. refline 要添加的辅助线对象
返回值

void 无返回值。该方法仅用于执行添加操作。

示例
js
const refline = (p1, p2) => {
  return {
    name: `${p1.name}-${p2.name}`,
    start: p1.name,
    end: p2.name,
  }
}

glyph.addRefLine(refline(start, end))

public onSkeletonDragStart: Function = null

简介

glyph的onSkeletonDragStart变量用于定义字形骨架拖拽编辑开始时需要调用的函数

示例
js
glyph.onSkeletonDragStart = (data) => {
  // joint数据格式:{x, y, name}
  const { draggingJoint } = data
  glyph.tempData = {}
  glyph.getJoints().map((joint) => {
    const _joint = {
      name: joint.name,
      x: joint.x,
      y: joint.y,
    }
    glyph.tempData[_joint.name] = _joint
  })
}

public onSkeletonDrag: Function = null

简介

glyph的onSkeletonDrag变量用于定义字形骨架拖拽编辑中需要调用的函数

示例
js
glyph.onSkeletonDrag = (data) => {
  if (!glyph.tempData) return
  glyph.clear()
  // joint数据格式:{x, y, name}
  const jointsMap = getJointsMap(data)
  const _params = computeParamsByJoints(jointsMap)
  updateGlyphByParams(_params, global_params)
}

public onSkeletonDragEnd: Function = null

简介

glyph的onSkeletonDrag变量用于定义字形骨架拖拽编辑结束时需要调用的函数

示例
js
glyph.onSkeletonDragEnd = (data) => {
  if (!glyph.tempData) return
  glyph.clear()
  // joint数据格式:{x, y, name}
  const jointsMap = getJointsMap(data)
  const _params = computeParamsByJoints(jointsMap)
  updateGlyphByParams(_params, global_params)
  glyph.setParam('长度', _params.length)
  glyph.tempData = null
}