# easyrender **Repository Path**: semdy/easyrender ## Basic Information - **Project Name**: easyrender - **Description**: a lite frameworks for canvas - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2016-12-30 - **Last Updated**: 2021-11-02 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # easyrender a lite frameworks for canvas, simply, faster and liter. for more information see API document or [demos](#live-demo). #简要文档 ## EC提供的属性 ##
properties 类型 默认 描述
ua String navigator.userAgent 浏览器标识
isTouch Boolean 视浏览器类型而定 是否是可触摸设备
noop Function function(){} 空方法
EVENTS Object -- 属性：START, MOVE, END, RESIZE
## EC提供的静态方法 ##
method parameter 描述 return
extend Object: source -> 继承的对象
Object: props... -> 被继承的对象 		对象的继承 source
provide Object: props -> 扩展的方法或属性 扩展EC的静态方法或属性 EC
classExtend Object: protoProps -> 继承的原型链
Object: staticProps -> 设置额外的静态属性 		类的继承 新的constructor
isPointInPath Object: {x, y} -> 坐标点
Object: object -> 组件对象 		检测坐标点是否在组件边界内 Boolean
isDefined Object: obj 检查变量是否被定义 Boolean
isNumber Object: obj obj是否为数字类型 Boolean
isString Object: obj obj是否为字符串类型 Boolean
isObject Object: obj obj是否为Object Boolean
isArray Object: obj obj是否为数组 Boolean
getStyle Object: element -> DOMObject
String: attr -> 样式属性 		获取指定节点样式 String
## EC.Util ##
method parameter 描述 return
color String: rgb -> 颜色rgb toHex(rgb) -> RGB颜色转换为16进制 String: hex
String: hex -> 颜色16进制值
Number: alpha -> 颜色透明度		 toRgb(hex, alpha) -> 16进制颜色转为RGB格式 String: rgb
getParameter name:参数名 获取网页url参数 String
hitTest objectA, objectB 检测两个组件是否有碰触 Boolean
## EC.Event ##
method parameter 描述
on name: 事件名
callback: 事件监听listener
scope: 设定上下文		 发起一个事件监听
once name: 事件名
callback: 事件监听listener
scope: 设定上下文		 发起一个事件监听，且仅一次有效
off name: 事件名
callback: 事件监听listener		 取消一个事件监听
dispatch / emit name: 事件名 触发一个事件
clear -- 清空事件池
## RES ## `extends EC.Event`
method parameter 描述 return
loadImage src: 图片地址 加载一张图片 Event
ajaxSetup object: ajax全局配置参数 ajax全局配置 undefined
ajax params: ajax配置参数 发起ajax请求，用法与jQuery.ajax类似 XMLHttpRequest
request params: ajax配置参数 配置参数与ajax相同，但返回内容不同。
支持的写法RES.request(params).then(succFun, errFun).always(alwaysFun);
虽支持promise写法，但是并不是真正的promise模式 		Event
get url: 请求地址
params: ajax配置参数		 request({type: 'GET'})的简易调用 Event
post url: 请求地址
params: ajax配置参数		 request({type: 'POST'})的简易调用 Event
getJSON url: 请求地址
params: ajax配置参数		 request({type: 'GET', dataType: 'json'})的简易调用, 自动将获取到的数据转json Event
loadJson url: 请求地址 request({url: url, dataType: "json"})的简易调用, 自动将获取到的数据转json Event
loadJsonp url: 请求地址 跨域请求数据 Event
loadScript url: js文件地址 异步加载一个外部js文件 Event
getRes resId: 资源label 获取资源配置项 object
getTexture resId: 资源label 获取资源纹理图 IMG DOMObject
el selector: 节点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 "" 请求地址
type GET 请求类型
async true 请同步或异步
data {} 请求参数配置
headers {} 设置请求响应头
cache true 是否可缓存
cors false 是否通过withCredentials跨域请求
global true 是否触发ajax全局的相关事件
beforeSend noop 请求发生前执行的回调，当返回false时，终止请求
success noop 请求成功时执行的回调
error noop 请求失败时执行的回调
complete noop 请求成功或失败时执行的回调
timeout 0 设置超时上限, 为0时则不设上限
context null 配置上下文
dataType text 设置返回的数据类型,可选值有：text, html, xml, json, jsonp, script
callbackName ? 请求类型为jsonp时，设置的回调函数名称
contentType application/x-www-form-urlencoded;charset=UTF-8 设置请求响应类型
xhr new XMLHttpRequest 自定义XMLHttpRequest
## EC.Ticker ## `extends EC.Event`
method parameter 描述
start -- 开始当前ticker
stop -- 停止当前ticker
### EC.Ticker events ###
name 描述
ticker 当Ticker运行时执行的回调
## EC.Timer ## `extends EC.Event`
method parameter 描述 return
constructor Number: delay -> 间隔时间
Number: repeatCount -> 重复次数		 按设定间隔时间执行脚本 Event
start -- 开始计时 Event
stop -- 停止计时 Event
wait Number: time -> 计时结束后延迟指定时间执行complete事件 计时结束设置延迟 Event
pause Number: time -> 计时暂停指定时间后，继续计时，不设定则不会继续计时 暂停计时 Event
setRepeatCount Number: count -> 设定计时次数 设定计时次数 Event
reset -- 重置计时 Event
### EC.Timer events ###
name 描述
timer 当Timer运行时执行的回调
complete 当Timer结束时执行的回调
pause 当Timer暂停时执行的回调
## EC.Tween ##
method parameter 描述 return
constructor Object: object -> component
Object: congfig -> Tween的配置		 可配置的参数有：
{reverse: true} 当动画结束后，又以动画的形式返回初始状态;
{loop: true} 动画无限循环
{loop: 2...} 指定动画执行几次
 EC.Tween类
to Object: tweenAttrs -> 动画结束状态参数
Number: duration -> 动画持续时间
Function: Easing -> 缓动动画类 		配置动画结束状态 EC.Tween类
wait Number: time -> 动画暂停时间 设置动画暂停时间 EC.Tween类
stop -- 停止动画 EC.Tween类
onUpdate Function: callback -> 当前状态更新时执行的回调
Object: context -> 设定上下文 		当前状态更新时间执行 EC.Tween类
call Function: callback -> 动画结束时执行的回调
Object: context -> 设定上下文 		动画结束时执行 EC.Tween类
### EC.Tween 静态方法 ###
method parameter 描述 return
get Object: 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 子集
Linear None
Quadratic In
Out
InOut
Cubic In
Out
InOut
Quartic In
Out
InOut
Quintic In
Out
InOut
Sinusoidal In
Out
InOut
Exponential In
Out
InOut
Circular In
Out
InOut
Elastic In
Out
InOut
Back In
Out
InOut
Bounce In
Out
InOut
## EC.DisplayObjectContainer ## `extends EC.Event`
properties 类型 默认 描述
x Number 0 横坐标
y Number 0 纵坐标
width Number 0 宽度
height Number 0 高度
visible Boolean true 是否可见
touchEnabled Boolean false 是否开启响应事件
alpha Number/undefined undefined 透明度
scaleX Number 1 横向放大倍数
scaleY Number 1 纵向放大倍数
rotation Number 0 旋转角度
skewX Number 0 横向斜切角度
skewY Number 0 纵向斜切角度
anchorX Number 0 横向中心点
anchorY Number 0 纵向中心点
numChildren Number 0 返回当前容器子集的个数
cursor String pointer 鼠标滑过时显示的鼠标样式，仅PC下有效
### EC.DisplayObjectContainer methods ###
method parameter 描述 return
addChild Object: childObject -> 子集对象
Number: index -> 子集的添加位置		 向容器添加子集 EC.DisplayObjectContainer
removeChild Object: childObject -> 子集对象 容器中移除一个子集 EC.DisplayObjectContainer
removeAllChildren -- 清除子集 EC.DisplayObjectContainer
getChilds -- 获取当前容器所有子集对象 EC.DisplayObjectContainer
getBounds -- 获取当前容器的边界 new Bounds()
getChildIndex Object: childObject -> 获取子集的索引值 获取当前容器的边界 EC.DisplayObjectContainer
setChildIndex Object: childObject -> 设置子集的索引值
Number: index -> 索引值 		获取当前容器的边界 EC.DisplayObjectContainer
setParams Object: params -> 参数集 设置当前容器的相关属性 EC.DisplayObjectContainer
size -- 获取容器子集的个数 Number
### EC.DisplayObjectContainer events ###
name 描述
addToStage 当前容器添加到舞台时执行的回调
remove 在被从父容器中移除时执行的回调
enterframe 舞台实时渲染时执行的回调
## Bounds ##
properties 类型 默认 描述
x Number -- 返回边界的x坐标
y Number -- 返回边界的y坐标
width Number -- 返回边界的宽度
height Number -- 返回边界的高度
### Bounds methods ###
methods parameter 描述 return
intersects Object: target -> 被检测的目标对象 检测两个组件是否有交叉 Boolean
## EC.Sprite ## `extends EC.DisplayObjectContainer`
properties 类型 默认 描述
mask EC.Shape undefined 添加遮罩
## EC.TextField ## `extends EC.DisplayObjectContainer`
properties 类型 默认 描述
text String "" 显示的文本
size Number 16 字号
textAlign String start 文本水平对齐方式
textBaseline String top 文本垂直对齐方式
fontFamily String Arial 字体
textColor String #000 文本颜色
strokeColor String #000 字本描边颜色
textStyle String normal 文本样式
textWeight String normal 字体加粗
lineSpacing Number 2 行间距
numLines Number 1 行数
stroke Boolean false 是否描边
strokeOnly Boolean false 是否只描边
multiple Boolean false 是否开启文本自动换行
## EC.BitMap ## `extends EC.DisplayObjectContainer`
properties 类型 默认 描述
sx Number/undefined undefined 图片裁切的x起始位置
sy Number/undefined undefined 图片裁切的y起始位置
swidth Number/undefined undefined 图片裁切的宽度
sheight Number/undefined undefined 图片裁切的高度
texture Img DOMObject undefined BitMap的纹理
### EC.BitMap methods ###
methods parameter 描述 return
setTexture Object/IMG DOMObject: dataObject -> 纹理参数 设置纹理 EC.BitMap
## EC.Shape ## `extends EC.DisplayObjectContainer`
properties 类型 默认 描述
radius Number 0 形状的半径或圆角大小
fillStyle String #000 填充样式
strokeStyle String #000 描边样式
shadowColor String #000 阴影颜色
shadowBlur String 0 阴影的模糊级别
shadowOffsetX String 0 阴影距形状的水平距离
shadowOffsetY String 0 阴影距形状的垂直距离
lineCap String "" 线条的结束端点样式
lineJoin String "" 两条线相交时，所创建的拐角类型
lineWidth String 0 当前的线条宽度
miterLimit String "" 最大斜接长度
dashLength Number 0 虚线的长度(较老的浏览器可能不支持)
dashGap Number 0 虚线之间的间隙(较老的浏览器可能不支持)
### EC.Shape methods ###
methods parameter 描述 return
fill String/Number: color -> 填充颜色
Number: alpha -> 填充透明度 		设置填充颜色及透明度 EC.Shape
stroke String/Number: color -> 描边颜色
Number: alpha -> 描边透明度 		设置描边颜色及透明度 EC.Shape
rect x: x坐标
y: y坐标
width: 宽度
height: 高度 		画矩形 EC.Shape
arc x: x坐标
y: y坐标
radius: 半径
startAngle: 起始弧度
endAngle: 结束弧度
counterclockwise: 方向 		画圆 EC.Shape
arcTo startX: 起始x坐标
startY: 起始y坐标
endX： 结束x坐标
endY: 结束y坐标
radius: 圆角大小
 画圆角折线 EC.Shape
roundRect x: x坐标
y: y坐标
width: 宽度
height: 高度
radius: 圆角大小 		画圆角矩形 EC.Shape
moveTo x: x坐标
y: y坐标
 将笔触移动至指定位置 EC.Shape
lineTo Array<x, y> 从笔触位置到该指定位置画线条 EC.Shape
line x: x起始位置
y: y起始位置
endX: x结束位置
endY: y结束位置
 画实线 EC.Shape
dashedLine x: x起始位置
y: y起始位置
endX: x结束位置
endY: y结束位置
dashLength: 虚线间隔长度 		画虚线 EC.Shape
ellipse x: x起始位置
y: y起始位置
width: 宽度
height: 高度
 画椭圆 EC.Shape
clip -- 裁切 EC.Shape
quadraticCurveTo cpx: 贝塞尔控制点的 x 坐标
cpy: 贝塞尔控制点的 y 坐标
x: 结束点的 x 坐标
y: 结束点的 y 坐标
 创建二次贝塞尔曲线 EC.Shape
quadraticCurveTo cp1x: 第一个贝塞尔控制点的 x 坐标
cp1y: 第一个贝塞尔控制点的 y 坐标
cp2x: 第二个贝塞尔控制点的 x 坐标
cp2y: 第二个贝塞尔控制点的 y 坐标
x: 结束点的 x 坐标
y: 结束点的 y 坐标
 创建三次方贝塞尔曲线 EC.Shape
close -- 闭合路径 EC.Shape
## EC.Masker ## `extends EC.Shape` ## EC.TextInput ## `extends EC.Sprite`
properties 类型 默认 描述
width Number 400 输入框的宽度
height Number 64 输入框的高度
backgroundColor String "" 输入框的背景颜色
backgroundImage String "" 输入框的背景图片
backgroundRepeat String repeat 背景图片的填充方式，或选值有： repeat, no-repeat, repeat-x, repeat-y
backgroundAlpha Number 1 背景颜色透明度
borderColor String #000 边框颜色
borderAlpha Number 1 边框颜色透明度
borderRadius Number 0 输入框圆角大小
borderWidth Number 2 边框粗细
fontSize Number 28 文本字号
fontFamily String 继承自TextField默认字体 输入框文本字体
lineHeight Number 16 输入框文本行高
lineSpacing Number 2 输入框文本行间距
color String #000 文本颜色
padding Number/Array<Number,Number,Number,Number,> 3 输入框内填充
placeholder String "" 输入框提示
placeholderColor String #999 输入框提示文本颜色
inputType String text 输入框类型
### EC.TextInput events ###
name 描述
focus 当输入框聚集时执行的回调
change 当输入框的值发生变化时执行的回调
blur 当输入框失去聚集时执行的回调
input 实时监控输入框值的变化
## EC.BitMapText ## `extends EC.Sprite`
properties 类型 默认 描述
text String "" 显示的文本
font String/Object "" 字体配置文件
textAlign String left 文本水平对齐方式
letterSpacing Number 0 文本间隔
## EC.Button ## `extends EC.Sprite` ### EC.Button methods ###
methods parameter 描述 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 类型 默认 描述
x Number 0 x值
y Number 0 y值
### EC.Point methods ###
methods parameter 描述 return
set Number: x -> x值
Number: y -> y值 		设置x,y的值 EC.Point
## EC.MovieClip ## `extends EC.Sprite`
method parameter 描述 return
constructor Object/String: resUrl -> MovieClip图片资源
Object/String: resConfig -> MovieClip配置参数		 精灵图动画 MovieClip
gotoAndPlay Number: startFrame -> 动画播放的起始帧
Number: playTimes -> 动画播放次数，当为-1时表示重复循环播放
Nubmer: frameRate -> 动画帧速，默认为24 		开始播放动画 MovieClip
gotoAndStop Number: endFrame -> 停止动画并停留在指定帧 停止动画 MovieClip
prevFrame -- 回退一帧 MovieClip
nextFrame -- 前进一帧 MovieClip
play -- 开始动画 MovieClip
stop -- 开始动画 MovieClip
pause Number: time -> 动画暂停时间，然后继续动画，不设定则不会继续 暂停动画 MovieClip
wait Number: time -> 动画结束后，延迟指定时间执行complete事件 动画结束指定延迟执行complete事件 MovieClip
setFrameRate Number: frameRate -> 设置帧速 暂停动画 MovieClip
### EC.MovieClip events ###
name 描述
complete 当动画停止时执行的回调
loopcomplete 当动画播放完一轮时执行的回调
pause 当动画暂停时执行的回调
## EC.Stage ## `extends EC.DisplayObjectContainer`
properties 类型 默认 描述
canvas DOMObject canvas object canvas节点对象
renderContext Object CanvasRenderingContext2D canvas 2d对象
compositeOperation String source-over 新图像的绘制方式
width Number options.width（只读） 画布宽度
height Number options.height（只读） 画布高度
scaleRatio Number 1（只读） 画布缩放比率
### EC.Stage options ###
properties 类型 默认 描述
showFps Boolean false 是否开启性能监测
scaleMode String showAll 画布缩放方式，可选值有:showAll, noScale, fixedWidth
width Number window innerWidth 画布宽度
height Number window innerHeight 画布高度
### EC.Stage methods ###
methods parameter 描述 return
addChild Object: childObject -> 添加子集 向舞台添加一个子集 EC.Stage
showFps Object: {left, top, right, bottom} 性能监测表显示的位置 设置性能监测表显示的位置 EC.Stage
stop -- 停止渲染 EC.Stage
### TouchEvents ###
name 描述
touchstart 手指或鼠标按下时执行的回调
longtouch 长按时执行的回调
touchmove 手指或鼠标移动时执行的回调
touchend 手指或鼠标抬起时执行的回调
touch 手指或鼠标按下并抬起时执行的回调
touchenter 手指或鼠标进入时执行的回调
touchout 手指或鼠标离开时执行的回调
## live demo ## - [弹幕](https://semdy.github.io/easyrender/dist/index.html "弹幕") - [奔跑的兔子](https://semdy.github.io/easyrender/dist/MovieClip.html "奔跑的兔子") - [系列图动画+tween测试](https://semdy.github.io/easyrender/dist/MovieClip2.html) - [序列帧动画+事件测试](https://semdy.github.io/easyrender/dist/MovieClip3.html) - [形状](https://semdy.github.io/easyrender/dist/shape.html) - [遮罩](https://semdy.github.io/easyrender/dist/Mask.html) - [文本输入框](https://semdy.github.io/easyrender/dist/TextInput.html) - [文本排版](https://semdy.github.io/easyrender/dist/Text.html) - [BitMapText](https://semdy.github.io/easyrender/dist/BitMapText.html) - [Button](https://semdy.github.io/easyrender/dist/Button.html) - [TouchEvent](https://semdy.github.io/easyrender/dist/TouchEvent.html) - [Drag](https://semdy.github.io/easyrender/dist/Drag.html) - [碰撞检测](https://semdy.github.io/easyrender/dist/hitTest.html)