jcc2d

Class: TextFace

TextFace

new JC.TextFace(text, style)

core/TextFace.js, line 38

文本，继承至Container

var text = new JC.TextFace(
  'JC jcc2d canvas renderer',
  {
    fontSize: '16px',
    ...
  }
);
Name Type Description
text string
style object
Name Type Description
fontSize string optional

文字的字号
fontFamily string optional

文字的字体
fontStyle string optional

文字的 style ('normal', 'italic' or 'oblique')
fontWeight string optional

文字的 weight ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900')
fill boolean optional

文字填充模式 默认为: ture
fillColor string optional

文字填充的颜色
stroke boolean optional

文字描边模式 默认为: false
strokeColor string optional

文字描边的颜色
lineWidth number optional

文字描边的宽度
textAlign string optional

文字的水平对齐方式 默认值: 'center' (top|bottom|middle|alphabetic|hanging)
textBaseline string optional

文字的垂直对齐方式 默认值: 'middle' (top|bottom|middle|alphabetic|hanging)

Extends

Members

alphaNumber

控制渲染对象的透明度

boundsJC.Bounds

显示对象的包围盒

childsArray

渲染对象的列表

cursorBoolean

当渲染对象是按钮时所具备的光标样式

interactiveboolean

Enable interaction events for the DisplayObject. Touch, pointer and mouse
events will not be emitted unless interactive is set to true.

maskJC.Graphics

对象的遮罩层

originXNumber

控制渲染对象的x变换中心

originYNumber

控制渲染对象的y变换中心

passEventBoolean

当前对象是否穿透自身的事件检测

pausedBoolean

是否暂停自身的动画

pivotXNumber

控制渲染对象的相对本身x轴位置的进一步偏移，将会影响旋转中心点

pivotYNumber

控制渲染对象的相对本身y轴位置的进一步偏移，将会影响旋转中心点

rotationNumber

控制渲染对象的旋转角度

scaleNumber

对渲染对象进行x、y轴同时缩放

scaleXNumber

控制渲染对象的x轴的缩放

scaleYNumber

控制渲染对象的y轴的缩放

skewXNumber

控制渲染对象的x轴的斜切

skewYNumber

控制渲染对象的y轴的斜切

souldSortBoolean

强制该对象在渲染子集之前为他们排序

timeScaleNumber

自身及后代动画的缩放比例

visibleBoolean

控制渲染对象是否显示

xNumber

控制渲染对象的x位置

yNumber

控制渲染对象的y位置

zIndexNumber

当前对象的z-index层级，z-index的值只会影响该对象在其所在的渲染列表内产生影响

Methods

inherited adds(object){JC.Container}

core/Container.js, line 151

向容器添加一个物体

container.adds(sprite,sprite2,text3,graphice);
Name Type Description
object JC.Container
Returns:
Type Description
JC.Container

inherited animate(options, clear){JC.Animate}

core/DisplayObject.js, line 287

animate动画，指定动画的启始位置和结束位置

display.animate({
  from: {x: 100},
  to: {x: 200},
  ease: JC.Tween.Bounce.Out, // 执行动画使用的缓动函数 默认值为 JC.Tween.Ease.InOut
  repeats: 10, // 动画运动完后再重复10次
  infinite: true, // 无限循环动画
  alternate: true, // 偶数次的时候动画回放
  duration: 1000, // 动画时长 ms单位 默认 300ms
  onUpdate: function(state,rate){},
  onComplete: function(){ console.log('end'); } // 动画执行结束回调
});
Name Type Description
options Object

动画配置参数

Name Type Description
from Object optional

设置对象的起始位置和起始姿态等，该项配置可选
to Object

设置对象的结束位置和结束姿态等
ease String optional

执行动画使用的缓动函数 默认值为 JC.Tween.Ease.InOut
repeats Number optional

设置动画执行完成后再重复多少次，优先级没有infinite高
infinite Boolean optional

设置动画无限次执行，优先级高于repeats
alternate Boolean optional

设置动画是否偶数次回返
duration Number optional

设置动画执行时间 默认 300ms
wait Number optional

设置动画延迟时间，在重复动画不会生效 默认 0ms
delay Number optional

设置动画延迟时间，在重复动画也会生效 默认 0ms
onUpdate function optional

设置动画更新时的回调函数
onComplete function optional

设置动画结束时的回调函数，如果infinite为true该事件将不会触发
clear Boolean

是否去掉之前的动画
Returns:
Type Description
JC.Animate

inherited contains(global){Boolean}

core/DisplayObject.js, line 586

检测坐标点是否在多变性内

Name Type Description
global JC.Point
Returns:
Type Description
Boolean 是否包含该点

inherited emit(type, ev)

eventer/Eventer.js, line 86

事件对象的触发事件函数

Name Type Description
type String

事件类型
ev JC.InteractionData

事件数据

inherited getGlobalPos(){Object}

core/DisplayObject.js, line 564

获取物体相对于canvas世界坐标系的坐标位置

Returns:
Type Description
Object

inherited isVisible(){Boolean}

core/DisplayObject.js, line 423

检查对象是否可见

Returns:
Type Description
Boolean 对象是否可见

inherited keyFrames(options, clear){JC.Animate}

core/DisplayObject.js, line 354

keyFrames动画，设置物体动画的keyframe，可以为相邻的两个keyFrames之前配置差值时间及时间函数

display.keyFrames({
  ks: data.layers[0], // ae导出的动画数据
  fr: 30, // 动画的帧率，默认：30fps
  repeats: 10, // 动画运动完后再重复10次
  infinite: true, // 无限循环动画
  alternate: true, // 偶数次的时候动画回放
  onUpdate: function(state,rate){},
  onComplete: function(){ console.log('end'); } // 动画执行结束回调
});
Name Type Description
options Object

动画配置参数

Name Type Description
ks Object

配置关键帧的位置、姿态，ae导出的动画数据
fr Number optional

配置关键帧的位置、姿态，ae导出的动画数据
repeats Number optional

设置动画执行完成后再重复多少次，优先级没有infinite高
infinite Boolean optional

设置动画无限次执行，优先级高于repeats
alternate Boolean optional

设置动画是否偶数次回返
wait Number optional

设置动画延迟时间，在重复动画不会生效 默认 0ms
delay Number optional

设置动画延迟时间，在重复动画也会生效 默认 0ms
onUpdate function optional

设置动画更新时的回调函数
onComplete function optional

设置动画结束时的回调函数，如果infinite为true该事件将不会触发
clear Boolean

是否去掉之前的动画
Returns:
Type Description
JC.Animate

inherited motion(options, clear){JC.Animate}

core/DisplayObject.js, line 322

motion动画，让物体按照设定好的曲线运动

display.motion({
  path: new JC.SvgCurve('M10 10 H 90 V 90 H 10 L 10 10), // path路径，需要继承自Curve
  attachTangent: true, // 物体是否捕获切线方向
  ease: JC.Tween.Ease.bezier(0.25,0.1,0.25,1), // 执行动画使用的缓动函数 默认值为 JC.Tween.Ease.InOut
  repeats: 10, // 动画运动完后再重复10次
  infinite: true, // 无限循环动画
  alternate: true, // 偶数次的时候动画回放
  duration: 1000, // 动画时长 ms单位 默认 300ms
  onUpdate: function(state,rate){}, // 动画更新回调
  onComplete: function(){ console.log('end'); } // 动画执行结束回调
});
Name Type Description
options Object

动画配置参数

Name Type Description
path Curve

path路径，需要继承自Curve，可以传入BezierCurve实例、NURBSCurve实例、SvgCurve实例
attachTangent Boolean optional

物体是否捕获切线方向
ease String optional

执行动画使用的缓动函数 默认值为 JC.Tween.Ease.InOut
repeats Number optional

设置动画执行完成后再重复多少次，优先级没有infinite高
infinite Boolean optional

设置动画无限次执行，优先级高于repeats
alternate Boolean optional

设置动画是否偶数次回返
duration Number optional

设置动画执行时间 默认 300ms
wait Number optional

设置动画延迟时间，在重复动画不会生效 默认 0ms
delay Number optional

设置动画延迟时间，在重复动画也会生效 默认 0ms
onUpdate function optional

设置动画更新时的回调函数
onComplete function optional

设置动画结束时的回调函数，如果infinite为true该事件将不会触发
clear Boolean

是否去掉之前的动画
Returns:
Type Description
JC.Animate

inherited off(type, fn){this}

eventer/Eventer.js, line 44

事件对象的事件解绑函数

Name Type Description
type String

事件类型
fn function

注册时回调函数的引用
Returns:
Type Description
this

inherited on(type, fn){this}

eventer/Eventer.js, line 29

事件对象的事件绑定函数

Name Type Description
type String

事件类型
fn function

回调函数
Returns:
Type Description
this

inherited once(type, fn){this}

eventer/Eventer.js, line 69

事件对象的一次性事件绑定函数

Name Type Description
type String

事件类型
fn function

回调函数
Returns:
Type Description
this

inherited pause()

core/Container.js, line 353

暂停自身和子级的所有动画进度

inherited queues(runner, options, clear){JC.Queues}

core/DisplayObject.js, line 414

以链式调用的方式触发一串动画 （不支持alternate）

display.queues({ from: { x: 1 }, to: { x: 2 } })
  .then({ path: JC.BezierCurve([ point1, point2, point3, point4 ]) })
  .then({ from: { x: 2 }, to: { x: 1 } })
  .then({ from: { scale: 1 }, to: { scale: 0 } })
  .on('complete', function() {
    console.log('end queues');
  });
Name Type Default Description
runner Object optional

添加动画，可以是 animate 或者 motion 动画配置
options Object {} optional

整个动画的循环等配置

Name Type Default Description
repeats Object 0 optional

设置动画执行完成后再重复多少次，优先级没有infinite高
infinite Object false optional

设置动画无限次执行，优先级高于repeats
wait Number optional

设置动画延迟时间，在重复动画不会生效 默认 0ms
delay Number optional

设置动画延迟时间，在重复动画也会生效 默认 0ms
clear Boolean false optional

是否去掉之前的动画
Returns:
Type Description
JC.Queues

inherited remove(object)

core/Container.js, line 183

从容器移除一个物体

container.remove(sprite,sprite2,text3,graphice);
Name Type Description
object JC.Container

inherited removeMask()

core/DisplayObject.js, line 430

移除对象上的遮罩

inherited restart()

core/Container.js, line 360

恢复自身和子级的所有动画进度

inherited runners(options, clear){JC.Animate}

core/DisplayObject.js, line 388

不推荐使用，建议使用queues方法达到同样效果
runners动画，多个复合动画的组合形式，不支持alternate

display.runners({
  runners: [
    { from: {}, to: {} },
    { path: JC.BezierCurve([ point1, point2, point3, point4 ]) },
  ], // 组合动画，支持组合 animate、motion
  delay: 1000, // ae导出的动画数据
  wait: 100, // ae导出的动画数据
  repeats: 10, // 动画运动完后再重复10次
  infinite: true, // 无限循环动画
  onUpdate: function(state,rate){},
  onComplete: function(){ console.log('end'); } // 动画执行结束回调
});
Name Type Description
options Object

动画配置参数

Name Type Default Description
runners Object

组合动画，支持 animate、motion 这些的自定义组合
repeats Number 0 optional

设置动画执行完成后再重复多少次，优先级没有infinite高
infinite Boolean false optional

设置动画无限次执行，优先级高于repeats
wait Number 0 optional

设置动画延迟时间，在重复动画不会生效 默认 0ms
delay Number 0 optional

设置动画延迟时间，在重复动画也会生效 默认 0ms
onUpdate function optional

设置动画更新时的回调函数
onComplete function optional

设置动画结束时的回调函数，如果infinite为true该事件将不会触发
clear Boolean

是否去掉之前的动画
Returns:
Type Description
JC.Animate

inherited setArea(shape, clock)

core/DisplayObject.js, line 574

设置显示对象的事件检测区域

Name Type Description
shape JC.Polygon | JC.Rectangle

JC内置形状类型的实例
clock Boolean

是否锁住当前设置的监测区域不会被内部更新修改。

inherited setBounds(bounds)

core/Container.js, line 344

设置渲染物体的包围盒

Name Type Description
bounds JC.Bounds

inherited setSpeed(speed)

core/Container.js, line 368

设置自身及子级的动画速度

Name Type Description
speed Number

设置的速率值

inherited updateMovin(progress, session)

core/Container.js, line 130

更新bodymovin动画

Name Type Description
progress number

progress
session object