Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

History

239 Commits

Repository files navigation

easyrender

a lite frameworks for canvas, simply, faster and liter. for more information see API document or demos.

简要文档

EC提供的属性

properties类型默认描述
uaStringnavigator.userAgent浏览器标识
isTouchBoolean视浏览器类型而定是否是可触摸设备
noopFunctionfunction(){}空方法
EVENTSObject--属性:START, MOVE, END, RESIZE

EC提供的静态方法

methodparameter描述return
extendObject: source -> 继承的对象
Object: props... -> 被继承的对象
对象的继承source
provideObject: props -> 扩展的方法或属性扩展EC的静态方法或属性EC
classExtendObject: protoProps -> 继承的原型链
Object: staticProps -> 设置额外的静态属性
类的继承新的constructor
isPointInPathObject: {x, y} -> 坐标点
Object: object -> 组件对象
检测坐标点是否在组件边界内Boolean
isDefinedObject: obj检查变量是否被定义Boolean
isNumberObject: objobj是否为数字类型Boolean
isStringObject: objobj是否为字符串类型Boolean
isFunctionObject: objobj是否为Function类型Boolean
isObjectObject: objobj是否为ObjectBoolean
isEmptyObjectObject: objobj是否为空的ObjectBoolean
isArrayObject: objobj是否为数组Boolean
copyObject: obj
Boolean: depth 是否深度拷贝
复制Object或者ArrayObject/Array
camelizeString: key将"a-b-c"转换成"aBC"的写法String
lowercaseString: key将"aBC"转换成"a-b-c"的写法String
getStyleObject: element -> DOMObject
String: attr -> 样式属性
获取指定节点样式String

EC.Util

methodparameter描述return
colorString: rgb -> 颜色rgbtoHex(rgb) -> RGB颜色转换为16进制String: hex
String: hex -> 颜色16进制值
Number: alpha -> 颜色透明度
toRgb(hex, alpha) -> 16进制颜色转为RGB格式String: rgb
numberFloat Number: numtoInt(rgb) -> 将小数转换为整数init number
getParametername:参数名获取网页url参数String
hitTestobjectA, objectB检测两个组件是否有碰触Boolean

EC.Pool

instance methodparameter描述return
getPoolBySignString: name 对象标识符根据对象标识符获取对应的对象池Object
getItemByClassString: name 对象标识符
Constructor: className 获取的对象池为空时的返回的构造函数并实例化
根据传入的对象标识符,查询对象池对象池为空创建新的类,否则从对象池中取Object
recoverString: name 对象标识符
Object: instance 实例化对象
将对象回收到对象池方便后续继续使用
clearString: name 对象标识符将对象池清空

EC.Event

methodparameter描述
onname: 事件名
callback: 事件监听listener
scope: 设定上下文
发起一个事件监听
oncename: 事件名
callback: 事件监听listener
scope: 设定上下文
发起一个事件监听,且仅一次有效
hasname: 事件名
callback?: 事件监听listener
判断当前事件池中是否有指定的事件监听
offname: 事件名
callback?: 事件监听listener
取消一个事件监听
dispatchname: 事件名
...args: 传递的参数
触发一个事件
clearEvent--清空事件池

RES

extends EC.Event

methodparameter描述return
loadImagesrc: 图片地址加载一张图片Event
ajaxSetupobject: ajax全局配置参数ajax全局配置undefined
ajaxparams: ajax配置参数发起ajax请求,用法与jQuery.ajax类似XMLHttpRequest
requestparams: ajax配置参数配置参数与ajax相同,但返回内容不同。
支持的写法RES.request(params).then(succFun, errFun).always(alwaysFun);
虽支持promise写法,但是并不是真正的promise模式
Event
geturl: 请求地址
params: ajax配置参数
request({method: 'GET'})的简易调用 Event
posturl: 请求地址
params: ajax配置参数
request({method: 'POST'})的简易调用 Event
loadJsonurl: 请求地址request({url: url, dataType: "json"})的简易调用, 自动将获取到的数据转json Event
loadJsonpurl: 请求地址跨域请求数据Event
loadScripturl: js文件地址异步加载一个外部js文件Event
getResresId: 资源label获取资源配置项object
getTextureresId: 资源label获取资源纹理图IMG DOMObject
elselector: 节点selector
container: 节点父容器selector
一个简单的元素选择器DOMObject/Array<DOMObject>

RES events

name描述
success当request/image/script处理成功时执行的回调
error当request/image/script处理失败时执行的回调
complete当request/resource加载完成时执行的回调
progress当resource正在加载时执行的回调,传递两个参数loaded, total

ajax options

name默认值描述
url""请求地址
methodGET请求方式
asynctrue请同步或异步
data{}请求参数配置
headers{}设置请求响应头
cachetrue是否可缓存
corsfalse是否通过withCredentials跨域请求
processDatatrue是否将请求的数据转化成a=1&b=2的标准formData格式,否则直接将数据序列化
xhrFields{}给xhr添加额外属性
globaltrue是否触发ajax全局的相关事件
beforeSendnoop请求发生前执行的回调,当返回false时,终止请求
successnoop请求成功时执行的回调
errornoop请求失败时执行的回调
completenoop请求成功或失败时执行的回调
progressnoop请求过程进度返回的回调
timeout0设置超时上限, 为0时则不设上限
contextnull配置上下文
dataTypejson设置返回的数据类型,可选值有:text, html, xml, json, jsonp, script
responseTypenull设置返回的数据类型,可选值有:blob,xml,json,...
callbackName?请求类型为jsonp时,设置的回调函数名称
contentTypeapplication/x-www-form-urlencoded;charset=UTF-8设置请求响应类型
xhrnew XMLHttpRequest自定义XMLHttpRequest

EC.Ticker

extends EC.Event

methodparameter描述
start--开始当前ticker
stop--停止当前ticker

EC.Ticker events

name描述
ticker当Ticker运行时执行的回调

EC.Timer

extends EC.Event

methodparameter描述return
constructorNumber: delay -> 间隔时间
Number: repeatCount -> 重复次数
按设定间隔时间执行脚本Event
start--开始计时Event
stop--停止计时Event
waitNumber: time -> 计时结束后延迟指定时间执行complete事件计时结束设置延迟Event
pauseNumber: time -> 计时暂停指定时间后,继续计时,不设定则不会继续计时暂停计时Event
setRepeatCountNumber: count -> 设定计时次数设定计时次数Event
reset--重置计时Event

EC.Timer events

name描述
timer当Timer运行时执行的回调
complete当Timer结束时执行的回调
pause当Timer暂停时执行的回调

EC.Tween

methodparameter描述return
constructorObject: object -> component
Object: congfig -> Tween的配置
可配置的参数有:
{reverse: true} 当动画结束后,又以动画的形式返回初始状态;
{loop: true} 动画结束回到初始状态无限循环
{loop: n...} 指定动画执行n次
{yoyo: true} 动画无限循环
{yoyo: n...} 指定动画执行n次
EC.Tween类
to Object: tweenAttrs -> 动画结束状态参数
Number: duration -> 动画持续时间
Function: Easing -> 缓动动画类
配置动画结束状态EC.Tween类
waitNumber: time -> 动画暂停时间设置动画暂停时间EC.Tween类
stop--停止动画EC.Tween类
onStart Function: callback -> 当前tween开始执行的回调
Object: context -> 设定上下文
当前tween开始执行EC.Tween类
onUpdate Function: callback -> 当前状态更新时执行的回调
Object: context -> 设定上下文
当前状态更新时间执行EC.Tween类
onStop Function: callback -> 当前tween停止的回调
Object: context -> 设定上下文
当前tween停止时执行EC.Tween类
call Function: callback -> 动画结束时执行的回调
Object: context -> 设定上下文
动画结束时执行EC.Tween类

EC.Tween 静态方法

methodparameter描述return
getObject: object -> component
Object: congfig -> Tween的配置
可配置的参数有:
{reverse: true} 当动画结束后,又以动画的形式返回初始状态;
{loop: true} 动画无限循环
{loop: 2...} 指定动画执行几次
new EC.Tween类
removeTweens Object: target -> component 停止目标object的动画EC.Tween
removeAllTweens Object: container -> Stage或Sprite 停止指定容器内容所有子集的动画EC.Tween

EC.Easing 列表

method子集
LinearNone
QuadraticIn
Out
InOut
CubicIn
Out
InOut
QuarticIn
Out
InOut
QuinticIn
Out
InOut
SinusoidalIn
Out
InOut
ExponentialIn
Out
InOut
CircularIn
Out
InOut
ElasticIn
Out
InOut
BackIn
Out
InOut
BounceIn
Out
InOut

EC.DisplayObject

extends EC.Event

properties类型默认描述
xNumber0横坐标
yNumber0纵坐标
widthNumber0宽度
heightNumber0高度
visibleBooleantrue是否可见
touchEnabledBooleanfalse是否开启响应事件
alphaNumber1透明度
scaleXNumber1横向放大倍数
scaleYNumber1纵向放大倍数
rotationNumber0旋转角度
skewXNumber0横向斜切角度
skewYNumber0纵向斜切角度
anchorXNumber0横向中心点
anchorYNumber0纵向中心点
cursorStringpointer鼠标滑过时显示的鼠标样式,仅PC下有效
maskEC.Shapeundefined添加遮罩

EC.DisplayObject methods

methodparameter描述return
remove--从父容器中移除自己EC.DisplayObject
eachFunction: iterator -> 子集迭代器
Object: context -> 指定上下文
子集迭代EC.DisplayObject
collideWithDisplayObject检测两个显示对象是否碰撞Boolean
getSize-获取当前对象的宽高Object: {width:number, height:number}
getBounds--获取当前容器的边界new Bounds()
setParamsObject: params -> 参数集设置当前容器的相关属性EC.DisplayObject
broadcastString: name -> 事件名称
[...args] -> 事件传值
向子节点(包括自己)广播事件EC.DisplayObject
emitString: name -> 事件名称
[...args] -> 事件传值
向父节点(包括自己)广播事件EC.DisplayObject
definePropertyString: property -> 被定义的属性
Object: descriptor -> 被定义属性的描述
定义新属性或修改原有的属性EC.DisplayObject

EC.DisplayObject events

name描述
addToStage当前容器添加到舞台时执行的回调
remove在被从父容器中移除时执行的回调
enterframe舞台实时渲染时执行的回调

EC.DisplayObjectContainer

extends EC.DisplayObject

properties类型默认描述
numChildrenNumber0返回当前容器子集的个数

EC.DisplayObjectContainer methods

methodparameter描述return
addChildAtObject: childObject -> 子集对象
Number: index -> 子集的添加位置
向容器添加子集EC.DisplayObjectContainer
addChildObject: childObject -> 子集对象向容器添加子集EC.DisplayObjectContainer
removeChildObject: childObject -> 子集对象容器中移除一个子集EC.DisplayObjectContainer
removeChildAtNumber: index -> 子集对象索引值从容器中指定位置移除一个子集EC.DisplayObjectContainer
removeAllChildren--清除子集EC.DisplayObjectContainer
getChilds--获取当前容器所有子集对象EC.DisplayObjectContainer集合
getChildAtNumber: index -> 子集对象索引值获取指定位置的子集EC.DisplayObjectContainer
getChildIndexObject: childObject -> 获取子集的索引值获取当前容器的边界EC.DisplayObjectContainer
setChildIndexObject: childObject -> 设置子集的索引值
Number: index -> 索引值
获取当前容器的边界EC.DisplayObjectContainer
containsObject: childObject判断当前显示对象是否已经在父容器中Boolean
size--获取容器子集的个数Number

EC.DisplayObjectContainer events

extend EC.DisplayObject events

Bounds

properties类型默认描述
xNumber--返回边界的x坐标
yNumber--返回边界的y坐标
widthNumber--返回边界的宽度
heightNumber--返回边界的高度

Bounds methods

methodsparameter描述return
intersectsObject: target -> 被检测的目标对象检测两个组件是否有交叉Boolean

EC.Sprite

extends EC.DisplayObjectContainer

properties类型默认描述
cacheAsBitmapBooleanfalse是否将Sprite做缓存处理,以提升一部分性能

Sprite methods

methodsparameter描述return
resize-重新计算Sprite的宽高Sprite instance

EC.TextField

extends EC.DisplayObjectContainer

properties类型默认描述
textString""显示的文本
sizeNumber16字号
textAlignStringstart文本水平对齐方式
textBaselineStringtop文本垂直对齐方式
fontFamilyStringArial字体
textColorString#000文本颜色
strokeColorString#000字本描边颜色
textStyleStringnormal文本样式
italicBooleanfalse字体是否倾斜
textWeightStringnormal字体加粗
boldBooleanfalse字体是否加粗
lineSpacingNumber2行间距
numLinesNumber1行数
strokeBooleanfalse是否描边
strokeOnlyBooleanfalse是否只描边
multilineBooleanfalse是否开启文本自动换行

EC.Bitmap

extends EC.DisplayObjectContainer

properties类型默认描述
sxNumber/undefinedundefined图片裁切的x起始位置
syNumber/undefinedundefined图片裁切的y起始位置
swidthNumber/undefinedundefined图片裁切的宽度
sheightNumber/undefinedundefined图片裁切的高度
textureImg DOMObjectundefinedBitmap的纹理

EC.Bitmap methods

methodsparameter描述return
setTextureObject/IMG DOMObject: dataObject -> 纹理参数设置纹理EC.Bitmap

EC.Shape

extends EC.DisplayObjectContainer

properties类型默认描述
radiusNumber0形状的半径或圆角大小
fillStyleString#000填充样式
strokeStyleString#000描边样式
shadowColorString#000阴影颜色
shadowBlurString0阴影的模糊级别
shadowOffsetXString0阴影距形状的水平距离
shadowOffsetYString0阴影距形状的垂直距离
lineCapString""线条的结束端点样式
lineJoinString""两条线相交时,所创建的拐角类型
lineWidthString0当前的线条宽度
miterLimitString""最大斜接长度
dashLengthNumber0虚线的长度(较老的浏览器可能不支持)
dashGapNumber0虚线之间的间隙(较老的浏览器可能不支持)

EC.Shape methods

methodsparameter描述return
fill String/Number: color -> 填充颜色
Number: alpha -> 填充透明度
设置填充颜色及透明度EC.Shape
stroke String/Number: color -> 描边颜色
Number: alpha -> 描边透明度
设置描边颜色及透明度EC.Shape
drawRectx: x坐标
y: y坐标
width: 宽度
height: 高度
画矩形EC.Shape
drawArcx: x坐标
y: y坐标
radius: 半径
startAngle: 起始弧度
endAngle: 结束弧度
counterclockwise: 方向
画圆EC.Shape
drawCirclex: x坐标
y: y坐标
radius: 半径
画圆EC.Shape
arcTostartX: 起始x坐标
startY: 起始y坐标
endX: 结束x坐标
endY: 结束y坐标
radius: 圆角大小
画圆角折线EC.Shape
drawRoundRectx: x坐标
y: y坐标
width: 宽度
height: 高度
radius: 圆角大小
画圆角矩形EC.Shape
moveTox: x坐标
y: y坐标
将笔触移动至指定位置EC.Shape
lineTox: x坐标
y: y坐标
从笔触位置到该指定位置画线条EC.Shape
drawLinex: x起始位置
y: y起始位置
endX: x结束位置
endY: y结束位置
画实线EC.Shape
drawDashedLinex: x起始位置
y: y起始位置
endX: x结束位置
endY: y结束位置
dashLength: 虚线间隔长度
画虚线EC.Shape
drawEllipsex: x起始位置
y: y起始位置
width: 宽度
height: 高度
画椭圆EC.Shape
drawCurveArray<x,y> points
例如: [[0, 10], [20, 50], [30, 100]]
画平滑曲线EC.Shape
clip--裁切EC.Shape
quadraticCurveTocpx: 贝塞尔控制点的 x 坐标
cpy: 贝塞尔控制点的 y 坐标
x: 结束点的 x 坐标
y: 结束点的 y 坐标
创建二次贝塞尔曲线EC.Shape
quadraticCurveTocp1x: 第一个贝塞尔控制点的 x 坐标
cp1y: 第一个贝塞尔控制点的 y 坐标
cp2x: 第二个贝塞尔控制点的 x 坐标
cp2y: 第二个贝塞尔控制点的 y 坐标
x: 结束点的 x 坐标
y: 结束点的 y 坐标
创建三次方贝塞尔曲线EC.Shape
close--闭合路径EC.Shape

EC.Rectangle(x, y, width, height)

extends EC.Shape

properties类型默认描述
xNumber0矩形x坐标
yNumber0矩形y坐标
widthNumber0矩形宽度
heightNumber0矩形高度

EC.TextInput

extends EC.Sprite

properties类型默认描述
widthNumber400输入框的宽度
heightNumber64输入框的高度
backgroundColorString""输入框的背景颜色
backgroundImageString""输入框的背景图片
backgroundRepeatStringrepeat背景图片的填充方式,或选值有: repeat, no-repeat, repeat-x, repeat-y
backgroundAlphaNumber1背景颜色透明度
borderColorString#000边框颜色
borderAlphaNumber1边框颜色透明度
borderRadiusNumber0输入框圆角大小
borderWidthNumber2边框粗细
fontSizeNumber28文本字号
fontFamilyString继承自TextField默认字体输入框文本字体
lineSpacingNumber2输入框文本行间距
colorString#000文本颜色
paddingNumber/Array<Number,Number,Number,Number,>3输入框内填充
placeholderString""输入框提示
placeholderColorString#777输入框提示文本颜色
inputTypeStringtext输入框类型

EC.TextInput events

name描述
focus当输入框聚集时执行的回调
change当输入框的值发生变化时执行的回调
blur当输入框失去聚集时执行的回调
input实时监控输入框值的变化

EC.BitmapText

extends EC.Sprite

properties类型默认描述
textString""显示的文本
fontString/Object""字体配置文件
textAlignStringleft文本水平对齐方式
letterSpacingNumber0文本间隔

EC.Button

extends EC.Sprite

EC.Button methods

methodsparameter描述return
setButton String/Object: status -> 按钮状态 设置按钮状态 normal, hover, active, disabled四选其一
具体详见 [Button demo](https://semdy.github.io/easyrender/dist/Button.html)
EC.Button

EC.Point

extends EC.Event

properties类型默认描述
xNumber0x值
yNumber0y值

EC.Point methods

methodsparameter描述return
set Number: x -> x值
Number: y -> y值
设置x,y的值EC.Point
clone拷贝一份PointEC.Point
toStringPoint类字符串化EC.Point
addObject: Point实例Point类与自身坐标累加,并返回一个新Point实例EC.Point
distance计算本身坐标与0,0之间的距离Number
copyFromObject: Point将Point类的坐标覆盖本身坐标EC.Point
equalsObject: Point判断Point与本身坐标是否相等Boolean
offsetNumber: x
Nubmer: y
本身坐标累加EC.Point
subtractObject: Point计算Point与本身坐标差值,并返回新的Point实例EC.Point
getAngleObject: Point计算本身坐标与0,0之间的角度Number

EC.Point 静态methods

methodsparameter描述return
calcDistanceNumber: x1
Number: y1
Number: x2
Number: y2
计算两点之前的距离Number
distanceObject: Point
Object: Point
计算两个Point类之间的距离Number
fromValuesNumber: x
Number: y
将x,y转换成[x, y]Array
getAngleNumber: x1
Number: y1
Number: x2
Number: y2
计算两点之前的角度Number

EC.MovieClip properties

extends EC.Sprite

properties类型默认描述
currentFrameNumber0当前动画所在帧数
totalFramesNumber--当前动画帧数的长度
frameRateNumber1000/24帧的播放速度

EC.MovieClip

extends EC.Sprite

methodparameter描述return
constructorObject/String: resUrl -> MovieClip图片资源
Object/String: resConfig -> MovieClip配置参数
精灵图动画MovieClip
gotoAndPlayNumber: startFrame -> 动画播放的起始帧
Number: playTimes -> 动画播放次数,当为-1时表示重复循环播放
Nubmer: frameRate -> 动画帧速,默认为24
开始播放动画MovieClip
gotoAndStopNumber: endFrame -> 停止动画并停留在指定帧停止动画MovieClip
prevFrame--回退一帧MovieClip
nextFrame--前进一帧MovieClip
play--开始动画MovieClip
stop--开始动画MovieClip
pauseNumber: time -> 动画暂停时间,然后继续动画,不设定则不会继续暂停动画MovieClip
waitNumber: time -> 动画结束后,延迟指定时间执行complete事件动画结束指定延迟执行complete事件MovieClip
setFrameRateNumber: frameRate -> 设置帧速暂停动画MovieClip
isPlaying--判断当前动画是否在播放Boolean

EC.MovieClip events

name描述
complete当动画停止时执行的回调
loopcomplete当动画播放完一轮时执行的回调
pause当动画暂停时执行的回调

EC.ScrollView properties

extends EC.Sprite

properties类型默认描述
verticalBooleantrue是否垂直滚动
initialValueNumber0初始滚动位置
adjustValueNumber0滚动容器的高度或宽度调节
disabledBooleanfalse是否可滚动
layoutObject: EC.Spritenull滚动容器
stepNumberundefined滚动snap

EC.ScrollView

extends EC.Sprite

methodparameter描述return
scrollToNumber: value -> 滚动值
Number: duration -> 滚动速度
Function: ease -> 滚动easing
滚动到指定位置EC.ScrollView
setContentspr: content 设置滚动的内容EC.ScrollView
clearContent清除滚动的内容EC.ScrollView
refresh重新计算scrollview相关参数的值EC.ScrollView
stop--立即停止滚动EC.ScrollView

EC.ScrollView events

name描述
scroll滚动时执行的回调
totop当滚动到顶部时执行的回调
tobottom当滚动到底部时执行的回调
scrollstop当滚动停止时执行的回调
rebound当重新回弹至顶部或底部时执行的回调

EC.Stage

extends EC.DisplayObjectContainer

properties类型默认描述
canvasDOMObjectcanvas objectcanvas节点对象
renderContextObjectCanvasRenderingContext2Dcanvas 2d对象
blendModeStringsource-over新图像的绘制方式
widthNumberoptions.width(只读)画布宽度
heightNumberoptions.height(只读)画布高度
scaleRatioNumber1(只读)画布缩放比率
clearXNumber0清空画布的起始位置x
clearYNumber0清空画布的起始位置y
clearWidthNumbercanvas width清空画布的宽度
clearHeightNumbercanvas height清空画布的高度

EC.Stage options

properties类型默认描述
showFpsBooleanfalse是否开启性能监测
scaleModeStringshowAll画布缩放方式,可选值有:showAll, noScale, fixedWidth, noBorder
widthNumberwindow innerWidth画布宽度
heightNumberwindow innerHeight画布高度
frameRateNumber60图像每秒渲染的帧数
blendModeStringsource-over图像叠加模式
forceUpdateBooleanfalse为true时将使用setInterval代替requestAnimationFrame
autoRenderBooleantrue是否自动开始渲染
autoPauseRenderBooleantrue当页面隐藏或失去焦点时是否自动暂停渲染
onPauseFunctionEC.noop当页面暂停渲染时的回调
onResumeFunctionEC.noop当页面重新开始渲染时的回调

EC.Stage methods

methodsparameter描述return
addChild Object: childObject -> 添加子集 向舞台添加一个子集EC.Stage
showFps Object: {left, top, right, bottom} 性能监测表显示的位置 设置性能监测表显示的位置EC.Stage
startRender--开始渲染EC.Stage
stopRender--停止渲染EC.Stage
clear--清除画布EC.Stage
render--渲染画布EC.Stage

TouchEvents

name描述
touchstart手指或鼠标按下时执行的回调
longtouch长按时执行的回调
touchmove手指或鼠标移动时执行的回调
touchend手指或鼠标抬起时执行的回调
touch手指或鼠标按下并抬起时执行的回调
touchenter手指或鼠标进入时执行的回调
touchout手指或鼠标离开时执行的回调

live demo

About

a lite frameworks for canvas

Topics

Resources

Stars

3 stars

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages