Class: Graphics

new JC.Graphics(mesh, options)

形状对象，继承至Container

const options = {
  cache: true,
  bounds: new JC.Bounds(-50, -50, 50, 50)
};
function drawRect(ctx) {
 ctx.fillStyle = 'red';
 ctx.fillRect(-10, -10, 10, 10);
}

function Cricle(options) {
  this.radius = options.radius || 0;
  this.color = options.color || '#3a3cfd';
}
Cricle.prototype.render = function(ctx) {
  ctx.beginPath();
  ctx.fillStyle = this.color;
  ctx.arc(0, 0, this.radius, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.fill();
}

const rect = new JC.Graphics(drawRect);
const cricle = new JC.Graphics(new Cricle());

Name Type Description

mesh

function | object

绘制对象，可以是函数，也可以是带有render方法的对象，绘制时会将当前绘图环境传递给它

options

object

绘制对象

Name	Type	Description
`cache`	boolean	optional 是否缓存改绘制对象，加入绘制对象非常复杂并后续无需更新时设置为 true 可以优化性能
`bounds`	JC.Bounds	optional 绘制对象的包围盒，在需要缓存时需要手动设置

Extends

JC.Container

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

jcc2d

Class: Graphics

new JC.Graphics(mesh, options)

Extends

Members

alphaNumber

boundsJC.Bounds

childsArray

cursorBoolean

interactiveboolean

maskJC.Graphics

originXNumber

originYNumber

passEventBoolean

pausedBoolean

pivotXNumber

pivotYNumber

rotationNumber

scaleNumber

scaleXNumber

scaleYNumber

skewXNumber

skewYNumber

souldSortBoolean

timeScaleNumber

visibleBoolean

xNumber

yNumber

zIndexNumber

Methods

inherited adds(object){JC.Container}

Returns:

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

Returns:

inherited contains(global){Boolean}

Returns:

inherited emit(type, ev)

inherited getGlobalPos(){Object}

Returns:

inherited isVisible(){Boolean}

Returns:

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

Returns:

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

Returns:

inherited off(type, fn){this}

Returns:

inherited on(type, fn){this}

Returns:

inherited once(type, fn){this}

Returns:

inherited pause()

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

Returns:

inherited remove(object)

inherited removeMask()

inherited restart()

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

Returns:

inherited setArea(shape, clock)

inherited setBounds(bounds)

inherited setSpeed(speed)

inherited updateMovin(progress, session)