类 |
- 说明 |
-
|---|---|
Class | Class是提供类的创建的辅助工具。 |
Hilo | Hilo的基础核心方法集合。 |
EventMixin | EventMixin是一个包含事件相关功能的mixin。可以通过 Class.mix(target, EventMixin) 来为target增加事件功能。 |
Camera | Camera类表示摄像机。 |
Camera3d | Camera3d 伪3D虚拟摄像机。 |
ParticleSystem | 粒子系统 |
Matrix | Matrix类表示一个转换矩阵，它确定如何将点从一个坐标空间映射到另一个坐标空间。 |
LoadQueue | LoadQueue是一个队列下载工具。 |
HTMLAudio | HTMLAudio声音播放模块。此模块使用HTMLAudioElement播放音频。 -使用限制：iOS平台需用户事件触发才能播放，很多Android浏览器仅能同时播放一个音频。 |
WebAudio | WebAudio声音播放模块。它具有更好的声音播放和控制能力，适合在iOS6+平台使用。 -兼容情况：iOS6+、Chrome33+、Firefox28+支持，但Android浏览器均不支持。 |
WebSound | 声音播放管理器。 |
CanvasRenderer | canvas画布渲染器。所有可视对象将渲染在canvas画布上。舞台Stage会根据参数canvas选择不同的渲染器，开发者无需直接使用此类。 |
DOMRenderer | DOM+CSS3渲染器。将可视对象以DOM元素方式渲染出来。舞台Stage会根据参数canvas选择不同的渲染器，开发者无需直接使用此类。 |
Renderer | 渲染器抽象基类。 |
WebGLRenderer | webgl画布渲染器。所有可视对象将渲染在canvas画布上。 |
Ease | Ease类包含为Tween类提供各种缓动功能的函数。 |
Tween | Tween类提供缓动功能。 |
TextureAtlas | TextureAtlas纹理集是将许多小的纹理图片整合到一起的一张大图。这个类可根据一个纹理集数据读取纹理小图、精灵动画等。 |
Ticker | Ticker是一个定时器类。它可以按指定帧率重复运行，从而按计划执行代码。 |
drag | drag是一个包含拖拽功能的mixin。可以通过 Class.mix(view, drag)或Hilo.copy(view, drag)来为view增加拖拽功能。 |
Bitmap | Bitmap类表示位图图像类。 |
BitmapText | BitmapText类提供使用位图文本的功能。当前仅支持单行文本。 |
Button | Button类表示简单按钮类。它有弹起、经过、按下和不可用等四种状态。 |
CacheMixin | CacheMixin是一个包含cache功能的mixin。可以通过 Class.mix(target, CacheMixin) 来为target增加cache功能。 |
Container | Container是所有容器类的基类。每个Container都可以添加其他可视对象为子级。 |
DOMElement | DOMElement是dom元素的包装。 |
Drawable | Drawable是可绘制图像的包装。 |
Graphics | Graphics类包含一组创建矢量图形的方法。 |
Sprite | 动画精灵类。 |
Stage | 舞台是可视对象树的根，可视对象只有添加到舞台或其子对象后才会被渲染出来。创建一个hilo应用一般都是从创建一个stage开始的。 |
Text | Text类提供简单的文字显示功能。复杂的文本功能可以使用DOMElement。 |
View | View类是所有可视对象或组件的基类。 |
-
-
-
-
-
- 继承 Bitmap
- View
-
-
-
-
-
-
- 模块 hilo/view/Bitmap
-
-
-
-
-
- 依赖
- hilo/core/Hilo, hilo/core/Class, hilo/view/View, hilo/view/Drawable
-
-
-
-
- 源码
- Bitmap.js
-
-
-
- Bitmap类表示位图图像类。
-
-
-
-使用示例:
-
-var bmp = new Hilo.Bitmap({image:imgElem, rect:[0, 0, 100, 100]});
-stage.addChild(bmp);
-
-
-
-
-
-
-
-
-
- | - | 属性 | -定义于 | -
|---|
| - | 方法 | -定义于 | -
|---|---|---|
| - |
-
- Bitmap(properties:Object)
-
- 构造函数。
- |
- Bitmap | -
| - - | -
- setImage(image:Image|String, rect:Array):Bitmap
-
-
-
- 设置位图的图片。
-
- |
- - Bitmap - | -
-
-
-
-
-
- 继承 BitmapText
- Container View
-
-
-
-
-
-
- 模块 hilo/view/BitmapText
-
-
-
-
-
- 依赖
- hilo/core/Class, hilo/core/Hilo, hilo/view/Container, hilo/view/Bitmap
-
-
-
-
- 源码
- BitmapText.js
-
-
-
- BitmapText类提供使用位图文本的功能。当前仅支持单行文本。
-
-
-
-
-
-
| - | 属性 | -定义于 | -
|---|---|---|
| - - | -
-
-
- glyphs:Object
-
-
-
- 位图字体的字形集合。格式为：{letter:{image:img, rect:[0,0,100,100]}}。
-
- |
- - BitmapText - | -
| - - | -
-
-
- letterSpacing:Number
-
-
-
- 字距，即字符间的间隔。默认值为0。
-
- |
- - BitmapText - | -
| - - | -
-
-
- text:String
-
-
-
- 位图文本的文本内容。只读属性。设置文本请使用setFont方法。
-
- |
- - BitmapText - | -
| - - | -
-
-
- textAlign:String
-
-
-
- 文本对齐方式，值为left、center、right, 默认left。只读属性。设置文本请使用setTextAlign方法。
-
- |
- - BitmapText - | -
| - | 方法 | -定义于 | -
|---|---|---|
| - |
-
- BitmapText(properties:Object)
-
- 构造函数。
- |
- BitmapText | -
| - - | -
- hasGlyphs(str:String):Boolean
-
-
-
- 返回能否使用当前指定的字体显示提供的字符串。
-
- |
- - BitmapText - | -
| - - | -
- setText(text:String):BitmapText
-
-
-
- 设置位图文本的文本内容。
-
- |
- - BitmapText - | -
| - - | -
- setTextAlign(textAlign):BitmapText
-
-
-
- 设置位图文本的对齐方式。
-
- |
- - BitmapText - | -
| - - | -
- createGlyphs(text:String, image:Image, col:Number, row:Number):BitmapText
-
-
- static
- 简易方式生成字形集合。
-
- |
- - BitmapText - | -
-
-
-
-
-
- 继承 Button
- View
-
-
-
-
-
-
- 模块 hilo/view/Button
-
-
-
-
-
- 依赖
- hilo/core/Hilo, hilo/core/Class, hilo/view/View, hilo/view/Drawable
-
-
-
-
- 源码
- Button.js
-
-
-
- Button类表示简单按钮类。它有弹起、经过、按下和不可用等四种状态。
-
-
-
-示例:
-
-var btn = new Hilo.Button({
- image: buttonImage,
- upState: {rect:[0, 0, 64, 64]},
- overState: {rect:[64, 0, 64, 64]},
- downState: {rect:[128, 0, 64, 64]},
- disabledState: {rect:[192, 0, 64, 64]}
-});
-
-
-
-
-
-
-
-
-
- | - | 属性 | -定义于 | -
|---|---|---|
| - - | -
-
-
- disabledState:Object
-
-
-
- 按钮不可用状态的属性或其drawable的属性的集合。
-
- |
- - Button - | -
| - - | -
-
-
- downState:Object
-
-
-
- 按钮按下状态的属性或其drawable的属性的集合。
-
- |
- - Button - | -
| - - | -
-
-
- enabled:Boolean
-
-
-
- 指示按钮是否可用。默认为true。只读属性。
-
- |
- - Button - | -
| - - | -
-
-
- overState:Object
-
-
-
- 按钮经过状态的属性或其drawable的属性的集合。
-
- |
- - Button - | -
| - - | -
-
-
- state:String
-
-
-
- 按钮的状态名称。它是 Button.UP|OVER|DOWN|DISABLED 之一。 只读属性。
-
- |
- - Button - | -
| - - | -
-
-
- upState:Object
-
-
-
- 按钮弹起状态的属性或其drawable的属性的集合。
-
- |
- - Button - | -
| - - | -
-
-
- useHandCursor:Boolean
-
-
-
- 当设置为true时，表示指针滑过按钮上方时是否显示手形光标。默认为true。
-
- |
- - Button - | -
| - - | -
-
-
- OVER:String
-
-
- static
- 按钮经过状态的常量值，即：'over'。
-
- |
- - Button - | -
| - - | -
-
-
- DISABLED:String
-
-
- static
- 按钮不可用状态的常量值，即：'disabled'。
-
- |
- - Button - | -
| - - | -
-
-
- DOWN:String
-
-
- static
- 按钮按下状态的常量值，即：'down'。
-
- |
- - Button - | -
| - - | -
-
-
- UP:String
-
-
- static
- 按钮弹起状态的常量值，即：'up'。
-
- |
- - Button - | -
| - | 方法 | -定义于 | -
|---|---|---|
| - |
-
- Button(properties:Object)
-
- 构造函数。
- |
- Button | -
| - - | -
- setEnabled(enabled:Boolean):Button
-
-
-
- 设置按钮是否可用。
-
- |
- - Button - | -
| - - | -
- setState(state:String):Button
-
-
-
- 设置按钮的状态。此方法由Button内部调用，一般无需使用此方法。
-
- |
- - Button - | -
-
-
-
-
-
-
-
-
- 模块 hilo/view/CacheMixin
-
-
-
-
-
- 依赖
- hilo/core/Hilo, hilo/core/Class, hilo/view/Drawable
-
-
-
-
- 源码
- CacheMixin.js
-
-
-
- CacheMixin是一个包含cache功能的mixin。可以通过 Class.mix(target, CacheMixin) 来为target增加cache功能。
-
-
-
| - | 方法 | -定义于 | -
|---|---|---|
| - - | -
- cache(forceUpdate:Boolean)
-
-
- static
- 缓存到图片里。可用来提高渲染效率。
-
- |
- - CacheMixin - | -
| - - | -
- updateCache()
-
-
- static
- 更新缓存
-
- |
- - CacheMixin - | -
| - - | -
- setCacheDirty(dirty)
-
-
- static
- 设置缓存是否dirty
-
- |
- - CacheMixin - | -
-
-
-
-
-
-
-
-
- 模块 hilo/game/Camera
-
-
-
-
-
- 依赖
- hilo/core/Hilo, hilo/core/Class
-
-
-
-
- 源码
- Camera.js
-
-
-
- Camera类表示摄像机。
-
-
-
| - | 属性 | -定义于 | -
|---|---|---|
| - - | -
-
-
- bounds:Array
-
-
-
- 摄像机移动边界的矩形区域 [x, y, width, height]
-
- |
- - Camera - | -
| - - | -
-
-
- deadzone:Array
-
-
-
- 摄像机不移动的矩形区域 [ x, y, width, height]
-
- |
- - Camera - | -
| - - | -
-
-
- height:Number
-
-
-
- 镜头高
-
- |
- - Camera - | -
| - - | -
-
-
- scroll:Object
-
-
-
- 滚动值 {x:0, y:0}
-
- |
- - Camera - | -
| - - | -
-
-
- target:View
-
-
-
- 摄像机跟随的目标
-
- |
- - Camera - | -
| - - | -
-
-
- width:Number
-
-
-
- 镜头宽
-
- |
- - Camera - | -
| - | 方法 | -定义于 | -
|---|---|---|
| - |
-
- Camera(properties:Object)
-
- 构造函数。
- |
- Camera | -
| - - | -
- follow(target:Object, deadzone:Array)
-
-
-
- 跟随目标
-
- |
- - Camera - | -
| - - | -
- tick(deltaTime:Number)
-
-
-
- 更新
-
- |
- - Camera - | -
-
-
-
-
-
-
-
-
- 模块 hilo/game/Camera3d
-
-
-
-
-
- 依赖
- hilo/core/Hilo, hilo/core/Class
-
-
-
-
- 源码
- Camera3d.js
-
-
-
- Camera3d 伪3D虚拟摄像机。
-
-
-
| - | 属性 | -定义于 | -
|---|---|---|
| - - | -
-
-
- fv:Number
-
-
-
- 镜头视点距离（屏幕视点相对眼睛距离，绝对了坐标缩放比例）
-
- |
- - Camera3d - | -
| - - | -
-
-
- fx:Number
-
-
-
- 镜头视点X（屏幕视点相对屏幕左上角X距离）
-
- |
- - Camera3d - | -
| - - | -
-
-
- fy:Number
-
-
-
- 镜头视点Y（屏幕视点相对屏幕左上角Y距离）
-
- |
- - Camera3d - | -
| - - | -
-
-
- rotationX:Number
-
-
-
- X轴旋转角度
-
- |
- - Camera3d - | -
| - - | -
-
-
- rotationY:Number
-
-
-
- Y轴旋转角度
-
- |
- - Camera3d - | -
| - - | -
-
-
- rotationZ:Number
-
-
-
- Z轴旋转角度
-
- |
- - Camera3d - | -
| - - | -
-
-
- stage:Object
-
-
-
- 3D对象所在容器，可以是stage或container，结合ticker时是必须参数，用来Z深度排序
-
- |
- - Camera3d - | -
| - - | -
-
-
- x:Number
-
-
-
- 镜头三维坐标x
-
- |
- - Camera3d - | -
| - - | -
-
-
- y:Number
-
-
-
- 镜头三维坐标y
-
- |
- - Camera3d - | -
| - - | -
-
-
- z:Number
-
-
-
- 镜头三维坐标z
-
- |
- - Camera3d - | -
| - | 方法 | -定义于 | -
|---|---|---|
| - |
-
- Camera3d()
-
- 构造函数。
- |
- Camera3d | -
| - - | -
- project(三维坐标对象:object)
-
-
-
- 将三维坐标转换投影为二维坐标，同时返回Z轴深度，和投影显示的缩放比例
-
- |
- - Camera3d - | -
| - - | -
- rotateX(X旋转角度:Number)
-
-
-
- 旋转X轴方向角度，相当于欧拉角系统的 beta
-
- |
- - Camera3d - | -
| - - | -
- rotateY(Y旋转角度:Number)
-
-
-
- 旋转Y轴方向角度，相当于欧拉角系统的 gamma
-
- |
- - Camera3d - | -
| - - | -
- rotateZ(Z旋转角度:Number)
-
-
-
- 旋转Z轴方向角度，相当于欧拉角系统的 alpha
-
- |
- - Camera3d - | -
| - - | -
- sortZ()
-
-
-
- Z深度排序
-
- |
- - Camera3d - | -
| - - | -
- tick()
-
-
-
- Ticker 轮询使用
-
- |
- - Camera3d - | -
| - - | -
- translate(x坐标:Number, y坐标:Number, z坐标:Number)
-
-
-
- 仿射矩阵位移变换，不同于直接修改Camera3d.x/y/z.
-
- |
- - Camera3d - | -
-
-
-
-
-
- 继承 CanvasRenderer
- Renderer
-
-
-
-
-
-
- 模块 hilo/renderer/CanvasRenderer
-
-
-
-
-
- 依赖
- hilo/core/Class, hilo/core/Hilo, hilo/renderer/Renderer
-
-
-
-
- 源码
- CanvasRenderer.js
-
-
-
- canvas画布渲染器。所有可视对象将渲染在canvas画布上。舞台Stage会根据参数canvas选择不同的渲染器，开发者无需直接使用此类。
-
-
-
| - | 属性 | -定义于 | -
|---|---|---|
| - - | -
-
-
- context:CanvasRenderingContext2D
-
-
-
- canvas画布的上下文。只读属性。
-
- |
- - CanvasRenderer - | -
| - | 方法 | -定义于 | -
|---|---|---|
| - |
-
- CanvasRenderer(properties:Object)
-
- 构造函数。
- |
- CanvasRenderer | -
-
-
-
-
-
-
-
-
- 模块 hilo/core/Class
-
-
-
-
-
-
- 源码
- Class.js
-
-
-
- Class是提供类的创建的辅助工具。
-
-
创建类示例：
-
-var Bird = Hilo.Class.create({
- Extends: Animal,
- Mixes: EventMixin,
- constructor: function(name){
- this.name = name;
- },
- fly: function(){
- console.log('I am flying');
- },
- Statics: {
- isBird: function(bird){
- return bird instanceof Bird;
- }
- }
-});
-
-var swallow = new Bird('swallow');
-swallow.fly();
-Bird.isBird(swallow);
-
-
-
-
-
-
-
-
-
-
-
-
- | - | 方法 | -定义于 | -
|---|---|---|
| - - | -
- create(properties:Object):Object
-
-
- static
- 根据参数指定的属性和方法创建类。
-
- |
- - Class - | -
| - - | -
- mix(target:Object, source:Object):Object
-
-
- static
- 混入属性或方法。
-
- |
- - Class - | -
-
-
-
-
-
- 继承 Container
- View
-
-
-
-
-
-
- 模块 hilo/view/Container
-
-
-
-
-
- 依赖
- hilo/core/Hilo, hilo/core/Class, hilo/view/View
-
-
-
-
- 源码
- Container.js
-
-
-
- Container是所有容器类的基类。每个Container都可以添加其他可视对象为子级。
-
-
-
| - | 属性 | -定义于 | -
|---|---|---|
| - - | -
-
-
- children:Array
-
-
-
- 容器的子元素列表。只读。
-
- |
- - Container - | -
| - - | -
-
-
- clipChildren:Boolean
-
-
-
- 指示是否裁剪超出容器范围的子元素。默认为false。
-
- |
- - Container - | -
| - - | -
-
-
- pointerChildren:Boolean
-
-
-
- 指示容器的子元素是否能响应用户交互事件。默认为true。
-
- |
- - Container - | -
| - | 方法 | -定义于 | -
|---|---|---|
| - |
-
- Container(properties:Object)
-
- 构造函数。
- |
- Container | -
| - - | -
-
-
-
- 在最上面添加子元素。
-
- |
- - Container - | -
| - - | -
- addChildAt(child:View, index:Number)
-
-
-
- 在指定索引位置添加子元素。
-
- |
- - Container - | -
| - - | -
-
-
-
- 返回是否包含参数指定的子元素。
-
- |
- - Container - | -
| - - | -
- getChildAt(index:Number)
-
-
-
- 返回指定索引位置的子元素。
-
- |
- - Container - | -
| - - | -
- getChildById(id:String)
-
-
-
- 返回指定id的子元素。
-
- |
- - Container - | -
| - - | -
- getChildIndex(child:View)
-
-
-
- 返回指定子元素的索引值。
-
- |
- - Container - | -
| - - | -
- getNumChildren():Uint
-
-
-
- 返回容器的子元素的数量。
-
- |
- - Container - | -
| - - | -
- getViewAtPoint(x:Number, y:Number, usePolyCollision:Boolean, global:Boolean, eventMode:Boolean)
-
-
-
- 返回由x和y指定的点下的对象。
-
- |
- - Container - | -
| - - | -
- removeAllChildren():Container
-
-
-
- 删除所有的子元素。
-
- |
- - Container - | -
| - - | -
- removeChild(child:View):View
-
-
-
- 删除指定的子元素。
-
- |
- - Container - | -
| - - | -
- removeChildAt(index:Int):View
-
-
-
- 在指定索引位置删除子元素。
-
- |
- - Container - | -
| - - | -
- removeChildById(id:String):View
-
-
-
- 删除指定id的子元素。
-
- |
- - Container - | -
| - - | -
- setChildIndex(child:View, index:Number)
-
-
-
- 设置子元素的索引位置。
-
- |
- - Container - | -
| - - | -
- sortChildren(keyOrFunction:Object)
-
-
-
- 根据指定键值或函数对子元素进行排序。
-
- |
- - Container - | -
| - - | -
-
-
-
- 交换两个子元素的索引位置。
-
- |
- - Container - | -
| - - | -
- swapChildrenAt(index1:Number, index2:Number)
-
-
-
- 交换两个指定索引位置的子元素。
-
- |
- - Container - | -
-
-
-
-
-
- 继承 DOMElement
- View
-
-
-
-
-
-
- 模块 hilo/view/DOMElement
-
-
-
-
-
- 依赖
- hilo/core/Hilo, hilo/core/Class, hilo/view/View, hilo/view/Drawable
-
-
-
-
- 源码
- DOMElement.js
-
-
-
- DOMElement是dom元素的包装。
-
-
-
-使用示例:
-
-var domView = new Hilo.DOMElement({
- element: Hilo.createElement('div', {
- style: {
- backgroundColor: '#004eff',
- position: 'absolute'
- }
- }),
- width: 100,
- height: 100,
- x: 50,
- y: 70
-}).addTo(stage);
-
-
-
-
-
-
-
-
-
- | - | 属性 | -定义于 | -
|---|
| - | 方法 | -定义于 | -
|---|---|---|
| - |
-
- DOMElement(properties:Object)
-
- 构造函数。
- |
- DOMElement | -
-
-
-
-
-
- 继承 DOMRenderer
- Renderer
-
-
-
-
-
-
- 模块 hilo/renderer/DOMRenderer
-
-
-
-
-
- 依赖
- hilo/core/Class, hilo/core/Hilo, hilo/renderer/Renderer, hilo/view/Drawable
-
-
-
-
- 源码
- DOMRenderer.js
-
-
-
- DOM+CSS3渲染器。将可视对象以DOM元素方式渲染出来。舞台Stage会根据参数canvas选择不同的渲染器，开发者无需直接使用此类。
-
-
-
| - | 属性 | -定义于 | -
|---|
| - | 方法 | -定义于 | -
|---|---|---|
| - |
-
- DOMRenderer(properties:Object)
-
- 构造函数。
- |
- DOMRenderer | -
-
-
-
-
-
-
-
-
- 模块 hilo/view/Drawable
-
-
-
-
-
- 依赖
- hilo/core/Hilo, hilo/core/Class
-
-
-
-
- 源码
- Drawable.js
-
-
-
- Drawable是可绘制图像的包装。
-
-
-
| - | 属性 | -定义于 | -
|---|---|---|
| - - | -
-
-
- image:Object
-
-
-
- 要绘制的图像。即可被CanvasRenderingContext2D.drawImage使用的对象类型，可以是HTMLImageElement、HTMLCanvasElement、HTMLVideoElement等对象。
-
- |
- - Drawable - | -
| - - | -
-
-
- rect:array
-
-
-
- 要绘制的图像的矩形区域。
-
- |
- - Drawable - | -
| - | 方法 | -定义于 | -
|---|---|---|
| - |
-
- Drawable(properties:Object)
-
- 构造函数。
- |
- Drawable | -
| - - | -
- init(properties:Object)
-
-
-
- 初始化可绘制对象。
-
- |
- - Drawable - | -
| - - | -
- isDrawable(elem:Object):Boolean
-
-
- static
- 判断参数elem指定的元素是否可包装成Drawable对象。
-
- |
- - Drawable - | -
-
-
-
-
-
-
-
-
- 模块 hilo/tween/Ease
-
-
-
-
-
-
- 源码
- Ease.js
-
-
-
- Ease类包含为Tween类提供各种缓动功能的函数。
-
-
-
| - | 属性 | -定义于 | -
|---|---|---|
| - - | -
-
-
- Back
-
-
-
- 向后缓动函数。包含EaseIn、EaseOut、EaseInOut三个函数。
-
- |
- - Ease - | -
| - - | -
-
-
- Bounce
-
-
-
- 弹跳缓动函数。包含EaseIn、EaseOut、EaseInOut三个函数。
-
- |
- - Ease - | -
| - - | -
-
-
- Circ
-
-
-
- 圆形缓动函数。包含EaseIn、EaseOut、EaseInOut三个函数。
-
- |
- - Ease - | -
| - - | -
-
-
- Cubic
-
-
-
- 三次缓动函数。包含EaseIn、EaseOut、EaseInOut三个函数。
-
- |
- - Ease - | -
| - - | -
-
-
- Elastic
-
-
-
- 弹性缓动函数。包含EaseIn、EaseOut、EaseInOut三个函数。
-
- |
- - Ease - | -
| - - | -
-
-
- Expo
-
-
-
- 指数缓动函数。包含EaseIn、EaseOut、EaseInOut三个函数。
-
- |
- - Ease - | -
| - - | -
-
-
- Linear
-
-
-
- 线性匀速缓动函数。包含EaseNone函数。
-
- |
- - Ease - | -
| - - | -
-
-
- Quad
-
-
-
- 二次缓动函数。包含EaseIn、EaseOut、EaseInOut三个函数。
-
- |
- - Ease - | -
| - - | -
-
-
- Quart
-
-
-
- 四次缓动函数。包含EaseIn、EaseOut、EaseInOut三个函数。
-
- |
- - Ease - | -
| - - | -
-
-
- Quint
-
-
-
- 五次缓动函数。包含EaseIn、EaseOut、EaseInOut三个函数。
-
- |
- - Ease - | -
| - - | -
-
-
- Sine
-
-
-
- 正弦缓动函数。包含EaseIn、EaseOut、EaseInOut三个函数。
-
- |
- - Ease - | -
-
-
-
-
-
-
-
-
- 模块 hilo/event/EventMixin
-
-
-
-
-
- 依赖
- hilo/core/Class
-
-
-
-
- 源码
- EventMixin.js
-
-
-
- EventMixin是一个包含事件相关功能的mixin。可以通过 Class.mix(target, EventMixin) 来为target增加事件功能。
-
-
-
| - | 方法 | -定义于 | -
|---|---|---|
| - - | -
- on(type:String, listener:Function, once:Boolean):Object
-
-
- static
- 增加一个事件监听。
-
- |
- - EventMixin - | -
| - - | -
- off(type:String, listener:Function):Object
-
-
- static
- 删除一个事件监听。如果不传入任何参数，则删除所有的事件监听；如果不传入第二个参数，则删除指定类型的所有事件监听。
-
- |
- - EventMixin - | -
| - - | -
- fire(type:String, detail:Object):Boolean
-
-
- static
- 发送事件。当第一个参数类型为Object时，则把它作为一个整体事件对象。
-
- |
- - EventMixin - | -
-
-
-
-
-
- 继承 Graphics
- View
-
-
-
-
-
-
- 模块 hilo/view/Graphics
-
-
-
-
-
- 依赖
- hilo/core/Hilo, hilo/core/Class, hilo/view/View, hilo/view/CacheMixin
-
-
-
-
- 源码
- Graphics.js
-
-
-
- Graphics类包含一组创建矢量图形的方法。
-
-
-
-
-
-
| - | 属性 | -定义于 | -
|---|---|---|
| - - | -
-
-
- fillAlpha:Number
-
-
-
- 内容填充的透明度。默认值为0。只读属性。
-
- |
- - Graphics - | -
| - - | -
-
-
- fillStyle:String
-
-
-
- 内容填充的样式。默认值为'0'，即黑色。只读属性。
-
- |
- - Graphics - | -
| - - | -
-
-
- lineAlpha:Number
-
-
-
- 笔画的线条透明度。默认为1。只读属性。
-
- |
- - Graphics - | -
| - - | -
-
-
- lineCap:String
-
-
-
- 笔画的线条端部样式。可选值有：butt、round、square等，默认为null。只读属性。
-
- |
- - Graphics - | -
| - - | -
-
-
- lineJoin:String
-
-
-
- 笔画的线条连接样式。可选值有：miter、round、bevel等，默认为null。只读属性。
-
- |
- - Graphics - | -
| - - | -
-
-
- lineWidth:Number
-
-
-
- 笔画的线条宽度。默认为1。只读属性。
-
- |
- - Graphics - | -
| - - | -
-
-
- miterLimit:Number
-
-
-
- 斜连线长度和线条宽度的最大比率。此属性仅当lineJoin为miter时有效。默认值为10。只读属性。
-
- |
- - Graphics - | -
| - - | -
-
-
- strokeStyle:String
-
-
-
- 笔画边框的样式。默认值为'0'，即黑色。只读属性。
-
- |
- - Graphics - | -
| - | 方法 | -定义于 | -
|---|---|---|
| - |
-
- Graphics(properties:Object)
-
- 构造函数。
- |
- Graphics | -
| - - | -
- beginBitmapFill(image:HTMLImageElement, repetition:String):Graphics
-
-
-
- 开始一个位图填充样式。
-
- |
- - Graphics - | -
| - - | -
- beginFill(fill:String, alpha:Number):Graphics
-
-
-
- 指定绘制图形的填充样式和透明度。
-
- |
- - Graphics - | -
| - - | -
- beginLinearGradientFill(x0:Number, y0:Number, x1:Number, y1:Number, colors:Array, ratois:Array):Graphics
-
-
-
- 指定绘制图形的线性渐变填充样式。
-
- |
- - Graphics - | -
| - - | -
- beginPath():Graphics
-
-
-
- 开始一个新的路径。
-
- |
- - Graphics - | -
| - - | -
- beginRadialGradientFill(x0:Number, y0:Number, r0:Number, x1:Number, y1:Number, r1:Number, colors:Array, ratois:Array):Graphics
-
-
-
- 指定绘制图形的放射性渐变填充样式。
-
- |
- - Graphics - | -
| - - | -
- bezierCurveTo(cp1x:Number, cp1y:Number, cp2x:Number, cp2y:Number, x:Number, y:Number):Graphics
-
-
-
- 绘制从当前位置开始到点(x, y)结束的贝塞尔曲线。
-
- |
- - Graphics - | -
| - - | -
- clear():Graphics
-
-
-
- 清除所有绘制动作并复原所有初始状态。
-
- |
- - Graphics - | -
| - - | -
- closePath():Graphics
-
-
-
- 关闭当前的路径。
-
- |
- - Graphics - | -
| - - | -
- drawCircle(x:Number, y:Number, radius:Number):Graphics
-
-
-
- 绘制一个圆。
-
- |
- - Graphics - | -
| - - | -
- drawEllipse(x:Number, y:Number, width:Number, height:Number):Graphics
-
-
-
- 绘制一个椭圆。
-
- |
- - Graphics - | -
| - - | -
- drawRect(x:Number, y:Number, width:Number, height:Number):Graphics
-
-
-
- 绘制一个矩形。
-
- |
- - Graphics - | -
| - - | -
- drawRoundRect(x:Number, y:Number, width:Number, height:Number, cornerSize:Number):Graphics
-
-
-
- 绘制一个圆角矩形。
-
- |
- - Graphics - | -
| - - | -
- drawRoundRectComplex(x:Number, y:Number, width:Number, height:Number, cornerTL:Number, cornerTR:Number, cornerBR:Number, cornerBL:Number):Graphics
-
-
-
- 绘制一个复杂的圆角矩形。
-
- |
- - Graphics - | -
| - - | -
- drawSVGPath(pathData:String):Graphics
-
-
-
- 根据参数指定的SVG数据绘制一条路径。
-代码示例:
-
- var path = 'M250 150 L150 350 L350 350 Z'; -var shape = new Hilo.Graphics({width:500, height:500}); -shape.drawSVGPath(path).beginFill('#0ff').endFill(); - |
- - Graphics - | -
| - - | -
- endFill():Graphics
-
-
-
- 应用并结束笔画的绘制和图形样式的填充。
-
- |
- - Graphics - | -
| - - | -
- lineStyle(thickness:Number, lineColor:String, lineAlpha:Number, lineCap:String, lineJoin:String, miterLimit:Number):Graphics
-
-
-
- 指定绘制图形的线条样式。
-
- |
- - Graphics - | -
| - - | -
- lineTo(x:Number, y:Number):Graphics
-
-
-
- 绘制从当前位置开始到点(x, y)结束的直线。
-
- |
- - Graphics - | -
| - - | -
- moveTo(x:Number, y:Number):Graphics
-
-
-
- 将当前绘制位置移动到点(x, y)。
-
- |
- - Graphics - | -
| - - | -
- quadraticCurveTo(cpx:Number, cpy:Number, x:Number, y:Number):Graphics
-
-
-
- 绘制从当前位置开始到点(x, y)结束的二次曲线。
-
- |
- - Graphics - | -
var path = 'M250 150 L150 350 L350 350 Z';
-var shape = new Hilo.Graphics({width:500, height:500});
-shape.drawSVGPath(path).beginFill('#0ff').endFill();
-
-
-
-
-
-
-
-
- 模块 hilo/media/HTMLAudio
-
-
-
-
-
- 依赖
- hilo/core/Hilo, hilo/core/Class, hilo/event/EventMixin
-
-
-
-
- 源码
- HTMLAudio.js
-
-
-
- HTMLAudio声音播放模块。此模块使用HTMLAudioElement播放音频。
-使用限制：iOS平台需用户事件触发才能播放，很多Android浏览器仅能同时播放一个音频。
-
-
-
| - | 属性 | -定义于 | -
|---|---|---|
| - - | -
-
-
- autoPlay:Boolean
-
-
-
- 是否自动播放。默认为false。
-
- |
- - HTMLAudio - | -
| - - | -
-
-
- duration:Number
-
-
-
- 音频的时长。只读属性。
-
- |
- - HTMLAudio - | -
| - - | -
-
-
- loaded:Boolean
-
-
-
- 音频资源是否已加载完成。只读属性。
-
- |
- - HTMLAudio - | -
| - - | -
-
-
- loop:Boolean
-
-
-
- 是否循环播放。默认为false。
-
- |
- - HTMLAudio - | -
| - - | -
-
-
- muted:Boolean
-
-
-
- 是否静音。默认为false。
-
- |
- - HTMLAudio - | -
| - - | -
-
-
- playing:Boolean
-
-
-
- 是否正在播放音频。只读属性。
-
- |
- - HTMLAudio - | -
| - - | -
-
-
- src:String
-
-
-
- 播放的音频的资源地址。
-
- |
- - HTMLAudio - | -
| - - | -
-
-
- volume:Number
-
-
-
- 音量的大小。取值范围：0-1。
-
- |
- - HTMLAudio - | -
| - - | -
-
-
- isSupported
-
-
- static
- 浏览器是否支持HTMLAudio。
-
- |
- - HTMLAudio - | -
| - | 方法 | -定义于 | -
|---|---|---|
| - |
-
- HTMLAudio(properties:Object)
-
- 构造函数。
- |
- HTMLAudio | -
| - - | -
- load()
-
-
-
- 加载音频文件。
-
- |
- - HTMLAudio - | -
| - - | -
- pause()
-
-
-
- 暂停音频。
-
- |
- - HTMLAudio - | -
| - - | -
- play()
-
-
-
- 播放音频。如果正在播放，则会重新开始。
-注意：为了避免第一次播放不成功，建议在load音频后再播放。
-
- |
- - HTMLAudio - | -
| - - | -
- resume()
-
-
-
- 恢复音频播放。
-
- |
- - HTMLAudio - | -
| - - | -
- setMute(muted)
-
-
-
- 设置静音模式。注意: iOS设备无法设置静音模式。
-
- |
- - HTMLAudio - | -
| - - | -
- setVolume(volume)
-
-
-
- 设置音量。注意: iOS设备无法设置音量。
-
- |
- - HTMLAudio - | -
| - - | -
- stop()
-
-
-
- 停止音频播放。
-
- |
- - HTMLAudio - | -
-
-
-
-
-
-
-
-
- 模块 hilo/core/Hilo
-
-
-
-
-
-
- 源码
- Hilo.js
-
-
-
- Hilo的基础核心方法集合。
-
-
-
| - | 属性 | -定义于 | -
|---|---|---|
| - - | -
-
-
- browser
-
-
- static
- 浏览器特性集合。包括：
-
-
|
- - Hilo - | -
| - - | -
-
-
- event
-
-
- static
- 事件类型枚举对象。包括：
-
-
|
- - Hilo - | -
| - - | -
-
-
- align
-
-
- static
- 可视对象对齐方式枚举对象。包括：
-
-
|
- - Hilo - | -
| - | 方法 | -定义于 | -
|---|---|---|
| - - | -
- getElementRect(elem:HTMLElement):Object
-
-
- static
- 获取DOM元素在页面中的内容显示区域。
-
- |
- - Hilo - | -
| - - | -
- createElement(type:String, properties:Object):HTMLElement
-
-
- static
- 创建一个DOM元素。可指定属性和样式。
-
- |
- - Hilo - | -
| - - | -
- viewToString(view:View):String
-
-
- static
- 为指定的可视对象生成一个包含路径的字符串表示形式。如Stage1.Container2.Bitmap3。
-
- |
- - Hilo - | -
| - - | -
- getUid(prefix:String):String
-
-
- static
- 获取一个全局唯一的id。如Stage1，Bitmap2等。
-
- |
- - Hilo - | -
| - - | -
- getElement(id:String):HTMLElement
-
-
- static
- 根据参数id获取一个DOM元素。此方法等价于document.getElementById(id)。
-
- |
- - Hilo - | -
| - - | -
- copy(target:Object, source:Object, strict:Boolean):Object
-
-
- static
- 简单的浅复制对象。
-
- |
- - Hilo - | -
| - - | -
- getTransformCSS(obj:View):String
-
-
- static
- 生成可视对象的CSS变换样式。
-
- |
- - Hilo - | -
-
-
-
-
-
-
-
-
- 模块 hilo/loader/LoadQueue
-
-
-
-
-
- 依赖
- hilo/core/Class, hilo/event/EventMixin, hilo/loader/ImageLoader, hilo/loader/ScriptLoader
-
-
-
-
- 源码
- LoadQueue.js
-
-
-
- LoadQueue是一个队列下载工具。
-
-
-
| - | 属性 | -定义于 | -
|---|---|---|
| - - | -
-
-
- maxConnections:Int
-
-
-
- 同时下载的最大连接数。默认为2。
-
- |
- - LoadQueue - | -
| - | 方法 | -定义于 | -
|---|---|---|
| - |
-
- LoadQueue(source:Object)
-
- 构造函数。
- |
- LoadQueue | -
| - - | -
- add(source:Object|Array):LoadQueue
-
-
-
- 增加要下载的资源。可以是单个资源对象或多个资源的数组。
-
- |
- - LoadQueue - | -
| - - | -
- get(id:String):Object
-
-
-
- 根据id或src地址获取资源对象。
-
- |
- - LoadQueue - | -
| - - | -
- getContent(id:String):Object
-
-
-
- 根据id或src地址获取资源内容。
-
- |
- - LoadQueue - | -
| - - | -
- getLoaded():Uint
-
-
-
- 获取已下载的资源数量。
-
- |
- - LoadQueue - | -
| - - | -
- getSize(loaded:Boolean):Number
-
-
-
- 获取全部或已下载的资源的字节大小。
-
- |
- - LoadQueue - | -
| - - | -
- getTotal():Uint
-
-
-
- 获取所有资源的数量。
-
- |
- - LoadQueue - | -
| - - | -
- start():LoadQueue
-
-
-
- 开始下载队列。
-
- |
- - LoadQueue - | -
-
-
-
-
-
-
-
-
- 模块 hilo/geom/Matrix
-
-
-
-
-
- 依赖
- hilo/core/Class
-
-
-
-
- 源码
- Matrix.js
-
-
-
- Matrix类表示一个转换矩阵，它确定如何将点从一个坐标空间映射到另一个坐标空间。
-
-
-
| - | 方法 | -定义于 | -
|---|---|---|
| - |
-
- Matrix(a:Number, b:Number, c:Number, d:Number, tx:Number, ty:Number)
-
- 构造函数。
- |
- Matrix | -
| - - | -
-
-
-
- 将某个矩阵与当前矩阵连接，从而将这两个矩阵的几何效果有效地结合在一起。
-
- |
- - Matrix - | -
| - - | -
- identity():Matrix
-
-
-
- 为每个矩阵属性设置一个值，该值将导致 null 转换。通过应用恒等矩阵转换的对象将与原始对象完全相同。
-
- |
- - Matrix - | -
| - - | -
- invert():Matrix
-
-
-
- 执行原始矩阵的逆转换。您可以将一个逆矩阵应用于对象来撤消在应用原始矩阵时执行的转换。
-
- |
- - Matrix - | -
| - - | -
- rotate(angle:Number):Matrix
-
-
-
- 对 Matrix 对象应用旋转转换。
-
- |
- - Matrix - | -
| - - | -
- scale(sx:Number, sy:Number):Matrix
-
-
-
- 对矩阵应用缩放转换。
-
- |
- - Matrix - | -
| - - | -
- transformPoint(point:Object, round:Boolean, returnNew:Boolean):Object
-
-
-
- 返回将 Matrix 对象表示的几何转换应用于指定点所产生的结果。
-
- |
- - Matrix - | -
| - - | -
- translate(dx:Number, dy:Number):Matrix
-
-
-
- 沿 x 和 y 轴平移矩阵，由 dx 和 dy 参数指定。
-
- |
- - Matrix - | -
-
-
-
-
-
-
-
-
- 模块 hilo/game/ParticleSystem
-
-
-
-
-
- 依赖
- hilo/core/Hilo, hilo/core/Class, hilo/view/View, hilo/view/Container, hilo/view/Bitmap, hilo/view/Drawable
-
-
-
-
- 源码
- ParticleSystem.js
-
-
-
- 粒子系统
-
-
-
-
-
-
| - | 属性 | -定义于 | -
|---|---|---|
| - - | -
-
-
- emitNum:Number
-
-
-
- 每次发射数量变化量
-
- |
- - ParticleSystem - | -
| - - | -
-
-
- emitNumVar:Number
-
-
-
- 每次发射数量
-
- |
- - ParticleSystem - | -
| - - | -
-
-
- emitterX:Number
-
-
-
- 发射器位置x
-
- |
- - ParticleSystem - | -
| - - | -
-
-
- emitterY:Number
-
-
-
- 发射器位置y
-
- |
- - ParticleSystem - | -
| - - | -
-
-
- emitTime:Number
-
-
-
- 发射间隔
-
- |
- - ParticleSystem - | -
| - - | -
-
-
- emitTimeVar:Number
-
-
-
- 发射间隔变化量
-
- |
- - ParticleSystem - | -
| - - | -
-
-
- gx:Number
-
-
-
- 重力加速度x
-
- |
- - ParticleSystem - | -
| - - | -
-
-
- gy:Number
-
-
-
- 重力加速度y
-
- |
- - ParticleSystem - | -
| - - | -
-
-
- totalTime:Number
-
-
-
- 总时间
-
- |
- - ParticleSystem - | -
| - | 方法 | -定义于 | -
|---|---|---|
| - |
-
- ParticleSystem(properties:Object)
-
- 构造函数。
- |
- ParticleSystem | -
| - - | -
- onUpdate(dt:Number)
-
-
-
- 更新
-
- |
- - ParticleSystem - | -
| - - | -
- reset(cfg:Object)
-
-
-
- 重置属性
-
- |
- - ParticleSystem - | -
| - - | -
- start()
-
-
-
- 开始
-
- |
- - ParticleSystem - | -
| - - | -
- stop(clear:Boolean)
-
-
-
- 停止
-
- |
- - ParticleSystem - | -
-
-
-
-
-
-
-
-
- 模块 hilo/renderer/Renderer
-
-
-
-
-
- 依赖
- hilo/core/Hilo, hilo/core/Class
-
-
-
-
- 源码
- Renderer.js
-
-
-
- 渲染器抽象基类。
-
-
-
| - | 属性 | -定义于 | -
|---|---|---|
| - - | -
-
-
- canvas:Object
-
-
-
- 渲染器对应的画布。它可能是一个普通的DOM元素，比如div，也可以是一个canvas画布元素。只读属性。
-
- |
- - Renderer - | -
| - - | -
-
-
- renderType:String
-
-
-
- 渲染方式。只读属性。
-
- |
- - Renderer - | -
| - - | -
-
-
- stage:Object
-
-
-
- 渲染器对应的舞台。只读属性。
-
- |
- - Renderer - | -
| - | 方法 | -定义于 | -
|---|---|---|
| - |
-
- Renderer(properties:Object)
-
- 构造函数。
- |
- Renderer | -
| - - | -
- clear(x:Number, y:Number, width:Number, height:Number)
-
-
-
- 清除画布指定区域。需要子类来实现。
-
- |
- - Renderer - | -
| - - | -
-
-
-
- 绘制可视对象。需要子类来实现。
-
- |
- - Renderer - | -
| - - | -
-
-
-
- 结束绘制可视对象后的后续处理方法。需要子类来实现。
-
- |
- - Renderer - | -
| - - | -
- hide()
-
-
-
- 隐藏可视对象。需要子类来实现。
-
- |
- - Renderer - | -
| - - | -
-
-
-
- 从画布中删除可视对象。注意：不是从stage中删除对象。需要子类来实现。
-
- |
- - Renderer - | -
| - - | -
- resize(width:Number, height:Number)
-
-
-
- 改变渲染器的画布大小。
-
- |
- - Renderer - | -
| - - | -
-
-
-
- 为开始绘制可视对象做准备。需要子类来实现。
-
- |
- - Renderer - | -
| - - | -
- transform()
-
-
-
- 对可视对象进行变换。需要子类来实现。
-
- |
- - Renderer - | -
-
-
-
-
-
- 继承 Sprite
- View
-
-
-
-
-
-
- 模块 hilo/view/Sprite
-
-
-
-
-
- 依赖
- hilo/core/Hilo, hilo/core/Class, hilo/view/View, hilo/view/Drawable
-
-
-
-
- 源码
- Sprite.js
-
-
-
- 动画精灵类。
-
-
-
-
-
-
| - | 属性 | -定义于 | -
|---|---|---|
| - - | -
-
-
- currentFrame:number
-
-
-
- 当前播放帧的索引。从0开始。只读属性。
-
- |
- - Sprite - | -
| - - | -
-
-
- interval:number
-
-
-
- 精灵动画的帧间隔。如果timeBased为true，则单位为毫秒，否则为帧数。
-
- |
- - Sprite - | -
| - - | -
-
-
- loop:boolean
-
-
-
- 判断精灵是否可以循环播放。默认为true。
-
- |
- - Sprite - | -
| - - | -
-
-
- onEnterFrame:Function
-
-
-
- 精灵动画的播放头进入新帧时的回调方法。默认值为null。此方法已废弃，请使用addFrameCallback方法。
-
- |
- - Sprite - | -
| - - | -
-
-
- paused:boolean
-
-
-
- 判断精灵是否暂停。默认为false。
-
- |
- - Sprite - | -
| - - | -
-
-
- timeBased:boolean
-
-
-
- 指定精灵动画是否是以时间为基准。默认为false，即以帧为基准。
-
- |
- - Sprite - | -
| - | 方法 | -定义于 | -
|---|---|---|
| - |
-
- Sprite(properties)
-
- 构造函数。
- |
- Sprite | -
| - - | -
- addFrame(frame:Object, startIndex:Int):Sprite
-
-
-
- 往精灵动画序列中增加帧。
-
- |
- - Sprite - | -
| - - | -
- getFrame(indexOrName:Object):Object
-
-
-
- 获取精灵动画序列中指定的帧。
-
- |
- - Sprite - | -
| - - | -
- getFrameIndex(frameValue:Object):Object
-
-
-
- 获取精灵动画序列中指定帧的索引位置。
-
- |
- - Sprite - | -
| - - | -
- getNumFrames():Uint
-
-
-
- 返回精灵动画的总帧数。
-
- |
- - Sprite - | -
| - - | -
- goto(indexOrName:Object, pause:Boolean):Sprite
-
-
-
- 跳转精灵动画到指定的帧。
-
- |
- - Sprite - | -
| - - | -
- play():Sprite
-
-
-
- 播放精灵动画。
-
- |
- - Sprite - | -
| - - | -
- setFrame(frame:Object, index:Int):Sprite
-
-
-
- 设置精灵动画序列指定索引位置的帧。
-
- |
- - Sprite - | -
| - - | -
- setFrameCallback(frame:Int|String, callback:Function):Sprite
-
-
-
- 设置指定帧的回调函数。即每当播放头进入指定帧时调用callback函数。若callback为空，则会删除回调函数。
-
- |
- - Sprite - | -
| - - | -
- stop():Sprite
-
-
-
- 暂停播放精灵动画。
-
- |
- - Sprite - | -
-
-
-
-
-
- 继承 Stage
- Container View
-
-
-
-
-
-
- 模块 hilo/view/Stage
-
-
-
-
-
- 依赖
- hilo/core/Hilo, hilo/core/Class, hilo/view/Container, hilo/renderer/CanvasRenderer, hilo/renderer/DOMRenderer, hilo/renderer/WebGLRenderer
-
-
-
-
- 源码
- Stage.js
-
-
-
- 舞台是可视对象树的根，可视对象只有添加到舞台或其子对象后才会被渲染出来。创建一个hilo应用一般都是从创建一个stage开始的。
-
-
示例:
-
-var stage = new Hilo.Stage({
- renderType:'canvas',
- container: containerElement,
- width: 320,
- height: 480
-});
-
-
-
-
-
-
-
-
-
- | - | 属性 | -定义于 | -
|---|---|---|
| - - | -
-
-
- canvas:HTMLCanvasElement|HTMLElement
-
-
-
- 舞台所对应的画布。它可以是一个canvas或一个普通的div。只读属性。
-
- |
- - Stage - | -
| - - | -
-
-
- paused:Boolean
-
-
-
- 指示舞台是否暂停刷新渲染。
-
- |
- - Stage - | -
| - - | -
-
-
- renderer:Renderer
-
-
-
- 舞台渲染器。只读属性。
-
- |
- - Stage - | -
| - - | -
-
-
- viewport:Object
-
-
-
- 舞台内容在页面中的渲染区域。包含的属性有：left、top、width、height。只读属性。
-
- |
- - Stage - | -
| - | 方法 | -定义于 | -
|---|---|---|
| - |
-
- Stage(properties:Object)
-
- 构造函数。
- |
- Stage | -
| - - | -
- addTo(domElement:HTMLElement):Stage
-
-
-
- 添加舞台画布到DOM容器中。注意：此方法覆盖了View.addTo方法。
-
- |
- - Stage - | -
| - - | -
- enableDOMEvent(type:String|Array, enabled:Boolean):Stage
-
-
-
- 开启/关闭舞台的DOM事件响应。要让舞台上的可视对象响应用户交互，必须先使用此方法开启舞台的相应事件的响应。
-
- |
- - Stage - | -
| - - | -
- resize(width:Number, height:Number, forceResize:Boolean)
-
-
-
- 改变舞台的大小。
-
- |
- - Stage - | -
| - - | -
- tick(delta:Number)
-
-
-
- 调用tick会触发舞台的更新和渲染。开发者一般无需使用此方法。
-
- |
- - Stage - | -
| - - | -
- updateViewport():Object
-
-
-
- 更新舞台在页面中的可视区域，即渲染区域。当舞台canvas的样式border、margin、padding等属性更改后，需要调用此方法更新舞台渲染区域。
-
- |
- - Stage - | -
-
-
-
-
-
- 继承 Text
- View
-
-
-
-
-
-
- 模块 hilo/view/Text
-
-
-
-
-
- 依赖
- hilo/core/Class, hilo/core/Hilo, hilo/view/View, hilo/view/CacheMixin
-
-
-
-
- 源码
- Text.js
-
-
-
- Text类提供简单的文字显示功能。复杂的文本功能可以使用DOMElement。
-
-
-
-
-
-
| - | 属性 | -定义于 | -
|---|---|---|
| - - | -
-
-
- color:String
-
-
-
- 指定使用的字体颜色。
-
- |
- - Text - | -
| - - | -
-
-
- font:String
-
-
-
- 文本的字体CSS样式。只读属性。设置字体样式请用setFont方法。
-
- |
- - Text - | -
| - - | -
-
-
- lineSpacing:Number
-
-
-
- 指定文本的行距。单位为像素。默认值为0。
-
- |
- - Text - | -
| - - | -
-
-
- maxWidth:Number
-
-
-
- 指定文本的最大宽度。默认值为200。
-
- |
- - Text - | -
| - - | -
-
-
- outline:Boolean
-
-
-
- 指定文本是绘制边框还是填充。
-
- |
- - Text - | -
| - - | -
-
-
- text:String
-
-
-
- 指定要显示的文本内容。
-
- |
- - Text - | -
| - - | -
-
-
- textAlign:String
-
-
-
- 指定文本的对齐方式。可以是以下任意一个值：'start', 'end', 'left', 'right', and 'center'。
-
- |
- - Text - | -
| - - | -
-
-
- textHeight:Number
-
-
-
- 指示文本内容的高度，只读属性。仅在canvas模式下有效。
-
- |
- - Text - | -
| - - | -
-
-
- textVAlign:String
-
-
-
- 指定文本的垂直对齐方式。可以是以下任意一个值：'top', 'middle', 'bottom'。
-
- |
- - Text - | -
| - - | -
-
-
- textWidth:Number
-
-
-
- 指示文本内容的宽度，只读属性。仅在canvas模式下有效。
-
- |
- - Text - | -
| - | 方法 | -定义于 | -
|---|---|---|
| - |
-
- Text(properties:Object)
-
- 构造函数。
- |
- Text | -
| - - | -
- setFont(font:String):Text
-
-
-
- 设置文本的字体CSS样式。
-
- |
- - Text - | -
| - - | -
- measureFontHeight(font:String):Number
-
-
- static
- 测算指定字体样式的行高。
-
- |
- - Text - | -
-
-
-
-
-
-
-
-
- 模块 hilo/util/TextureAtlas
-
-
-
-
-
- 依赖
- hilo/core/Class
-
-
-
-
- 源码
- TextureAtlas.js
-
-
-
- TextureAtlas纹理集是将许多小的纹理图片整合到一起的一张大图。这个类可根据一个纹理集数据读取纹理小图、精灵动画等。
-
-
-
| - | 方法 | -定义于 | -
|---|---|---|
| - |
-
- TextureAtlas(atlasData:Object)
-
- 构造函数。
- |
- TextureAtlas | -
| - - | -
- getFrame(index:Int):Object
-
-
-
- 获取指定索引位置index的帧数据。
-
- |
- - TextureAtlas - | -
| - - | -
- getSprite(id:String):Object
-
-
-
- 获取指定id的精灵数据。
-
- |
- - TextureAtlas - | -
| - - | -
- createSpriteFrames(name:String|Array, frames:String, w:Number, h:Number, loop:Bollean, duration:Number, duration)
-
-
- static
- 创建精灵帧数据的快捷方法。
-
- |
- - TextureAtlas - | -
//方式一 单个动画
- createSpriteFrames("walk", "0-5,8,9", meImg, 55, 88, true, 1);
- //方式二 多组动画
- createSpriteFrames([
- ["walk", "0-5,8,9", meImg, 55, 88, true, 1],
- ["jump", "0-5", meImg, 55, 88, false, 1]
- ]);
-
-
-
-
-
-
-
-
-
-
-
-
-
- 模块 hilo/util/Ticker
-
-
-
-
-
- 依赖
- hilo/core/Class, hilo/core/Hilo
-
-
-
-
- 源码
- Ticker.js
-
-
-
- Ticker是一个定时器类。它可以按指定帧率重复运行，从而按计划执行代码。
-
-
-
| - | 方法 | -定义于 | -
|---|---|---|
| - |
-
- Ticker(fps:Number)
-
- 构造函数。
- |
- Ticker | -
| - - | -
- addTick(tickObject:Object)
-
-
-
- 添加定时器对象。定时器对象必须实现 tick 方法。
-
- |
- - Ticker - | -
| - - | -
- getMeasuredFPS()
-
-
-
- 获得测定的运行时帧率。
-
- |
- - Ticker - | -
| - - | -
- pause()
-
-
-
- 暂停定时器。
-
- |
- - Ticker - | -
| - - | -
- removeTick(tickObject:Object)
-
-
-
- 删除定时器对象。
-
- |
- - Ticker - | -
| - - | -
- resume()
-
-
-
- 恢复定时器。
-
- |
- - Ticker - | -
| - - | -
- start(userRAF:Boolean)
-
-
-
- 启动定时器。
-
- |
- - Ticker - | -
| - - | -
- stop()
-
-
-
- 停止定时器。
-
- |
- - Ticker - | -
-
-
-
-
-
-
-
-
- 模块 hilo/tween/Tween
-
-
-
-
-
- 依赖
- hilo/core/Class
-
-
-
-
- 源码
- Tween.js
-
-
-
- Tween类提供缓动功能。
-
-
-
-使用示例:
-
-ticker.addTick(Hilo.Tween);//需要把Tween加到ticker里才能使用
-
-var view = new View({x:5, y:10});
-Hilo.Tween.to(view, {
- x:100,
- y:20,
- alpha:0
-}, {
- duration:1000,
- delay:500,
- ease:Hilo.Ease.Quad.EaseIn,
- onComplete:function(){
- console.log('complete');
- }
-});
-
-
-
-
-
-
-
-
-
- | - | 属性 | -定义于 | -
|---|---|---|
| - - | -
-
-
- delay:Int
-
-
-
- 缓动延迟时间。单位毫秒。
-
- |
- - Tween - | -
| - - | -
-
-
- duration:Int
-
-
-
- 缓动总时长。单位毫秒。
-
- |
- - Tween - | -
| - - | -
-
-
- ease:Function
-
-
-
- 缓动变化函数。默认为null。
-
- |
- - Tween - | -
| - - | -
-
-
- loop:Boolean
-
-
-
- 缓动是否循环。默认为false。
-
- |
- - Tween - | -
| - - | -
-
-
- onComplete:Function
-
-
-
- 缓动结束回调函数。它接受1个参数：tween。默认值为null。
-
- |
- - Tween - | -
| - - | -
-
-
- onStart:Function
-
-
-
- 缓动开始回调函数。它接受1个参数：tween。默认值为null。
-
- |
- - Tween - | -
| - - | -
-
-
- onUpdate:Function
-
-
-
- 缓动更新回调函数。它接受2个参数：ratio和tween。默认值为null。
-
- |
- - Tween - | -
| - - | -
-
-
- paused:Boolean
-
-
-
- 缓动是否暂停。默认为false。
-
- |
- - Tween - | -
| - - | -
-
-
- repeat:Int
-
-
-
- 缓动重复的次数。默认为0。
-
- |
- - Tween - | -
| - - | -
-
-
- repeatDelay:Int
-
-
-
- 缓动重复的延迟时长。单位为毫秒。
-
- |
- - Tween - | -
| - - | -
-
-
- reverse:Boolean
-
-
-
- 缓动是否反转播放。默认为false。
-
- |
- - Tween - | -
| - - | -
-
-
- target:Object
-
-
-
- 缓动目标。只读属性。
-
- |
- - Tween - | -
| - - | -
-
-
- time:Int
-
-
-
- 缓动已进行的时长。单位毫秒。只读属性。
-
- |
- - Tween - | -
| - | 方法 | -定义于 | -
|---|---|---|
| - |
-
- Tween(target:Object, fromProps:Object, toProps:Object, params:Object)
-
- 构造函数。
- |
- Tween | -
| - - | -
-
-
-
- 连接下一个Tween变换。其开始时间根据delay值不同而不同。当delay值为字符串且以'+'或'-'开始时，Tween的开始时间从当前变换结束点计算，否则以当前变换起始点计算。
-
- |
- - Tween - | -
| - - | -
- pause():Tween
-
-
-
- 暂停缓动动画的播放。
-
- |
- - Tween - | -
| - - | -
- resume():Tween
-
-
-
- 恢复缓动动画的播放。
-
- |
- - Tween - | -
| - - | -
- seek(time:Number, pause:Boolean):Tween
-
-
-
- 跳转Tween到指定的时间。
-
- |
- - Tween - | -
| - - | -
- setProps(fromProps:Object, toProps:Object):Tween
-
-
-
- 设置缓动对象的初始和目标属性。
-
- |
- - Tween - | -
| - - | -
- start():Tween
-
-
-
- 启动缓动动画的播放。
-
- |
- - Tween - | -
| - - | -
- stop():Tween
-
-
-
- 停止缓动动画的播放。
-
- |
- - Tween - | -
| - - | -
- tick():Object
-
-
- static
- 更新所有Tween实例。
-
- |
- - Tween - | -
| - - | -
-
-
- static
- 添加Tween实例。
-
- |
- - Tween - | -
| - - | -
-
-
- static
- 删除Tween实例。
-
- |
- - Tween - | -
| - - | -
- removeAll():Object
-
-
- static
- 删除所有Tween实例。
-
- |
- - Tween - | -
| - - | -
- fromTo(target:Object|Array, fromProps, toProps, params):Tween|Array
-
-
- static
- 创建一个缓动动画，让目标对象从开始属性变换到目标属性。
-
- |
- - Tween - | -
| - - | -
- to(target:Object|Array, toProps, params):Tween|Array
-
-
- static
- 创建一个缓动动画，让目标对象从当前属性变换到目标属性。
-
- |
- - Tween - | -
| - - | -
- from(target:Object|Array, fromProps, params):Tween|Array
-
-
- static
- 创建一个缓动动画，让目标对象从指定的起始属性变换到当前属性。
-
- |
- - Tween - | -
-
-
-
-
-
-
-
-
- 模块 hilo/view/View
-
-
-
-
-
- 依赖
- hilo/core/Hilo, hilo/core/Class, hilo/event/EventMixin, hilo/geom/Matrix
-
-
-
-
- 源码
- View.js
-
-
-
- View类是所有可视对象或组件的基类。
-
-
-
| - | 属性 | -定义于 | -
|---|---|---|
| - - | -
-
-
- align:String|Function
-
-
-
- 可视对象相对于父容器的对齐方式。取值可查看Hilo.align枚举对象。
-
- |
- - View - | -
| - - | -
-
-
- alpha:Number
-
-
-
- 可视对象的透明度。默认值为1。
-
- |
- - View - | -
| - - | -
-
-
- background:Object
-
-
-
- 可视对象的背景样式。可以是CSS颜色值、canvas的gradient或pattern填充。
-
- |
- - View - | -
| - - | -
-
-
- boundsArea:Array
-
-
-
- 可视对象的区域顶点数组。格式为：[{x:10, y:10}, {x:20, y:20}]。
-
- |
- - View - | -
| - - | -
-
-
- depth:Number
-
-
-
- 可视对象的深度，也即z轴的序号。只读属性。
-
- |
- - View - | -
| - - | -
-
-
- drawable:Drawable
-
-
-
- 可视对象的可绘制对象。供高级开发使用。
-
- |
- - View - | -
| - - | -
-
-
- height:Number
-
-
-
- 可视对象的高度。默认值为0。
-
- |
- - View - | -
| - - | -
-
-
- id:String
-
-
-
- 可视对象的唯一标识符。
-
- |
- - View - | -
| - - | -
-
-
- mask:Graphics
-
-
-
- 可视对象的遮罩图形。
-
- |
- - View - | -
| - - | -
-
-
- onUpdate:Function
-
-
-
- 更新可视对象，此方法会在可视对象渲染之前调用。此函数可以返回一个Boolean值。若返回false，则此对象不会渲染。默认值为null。
-限制：如果在此函数中改变了可视对象在其父容器中的层级，当前渲染帧并不会正确渲染，而是在下一渲染帧。可在其父容器的onUpdate方法中来实现。
-
- |
- - View - | -
| - - | -
-
-
- parent:Container
-
-
-
- 可视对象的父容器。只读属性。
-
- |
- - View - | -
| - - | -
-
-
- pivotX:Number
-
-
-
- 可视对象的中心点的x轴坐标。默认值为0。
-
- |
- - View - | -
| - - | -
-
-
- pivotY:Number
-
-
-
- 可视对象的中心点的y轴坐标。默认值为0。
-
- |
- - View - | -
| - - | -
-
-
- pointerEnabled:Boolean
-
-
-
- 可视对象是否接受交互事件。默认为接受交互事件，即true。
-
- |
- - View - | -
| - - | -
-
-
- rotation:Number
-
-
-
- 可视对象的旋转角度。默认值为0。
-
- |
- - View - | -
| - - | -
-
-
- scaleX:Number
-
-
-
- 可视对象在x轴上的缩放比例。默认为不缩放，即1。
-
- |
- - View - | -
| - - | -
-
-
- scaleY:Number
-
-
-
- 可视对象在y轴上的缩放比例。默认为不缩放，即1。
-
- |
- - View - | -
| - - | -
-
-
- visible:Boolean
-
-
-
- 可视对象是否可见。默认为可见，即true。
-
- |
- - View - | -
| - - | -
-
-
- width:Number
-
-
-
- 可视对象的宽度。默认值为0。
-
- |
- - View - | -
| - - | -
-
-
- x:Number
-
-
-
- 可视对象的x轴坐标。默认值为0。
-
- |
- - View - | -
| - - | -
-
-
- y:Number
-
-
-
- 可视对象的y轴坐标。默认值为0。
-
- |
- - View - | -
| - | 方法 | -定义于 | -
|---|---|---|
| - |
-
- View(properties:Object)
-
- 构造函数。
- |
- View | -
| - - | -
-
-
-
- 添加此对象到父容器。
-
- |
- - View - | -
| - - | -
- getBounds():Array
-
-
-
- 获取可视对象在舞台全局坐标系内的外接矩形以及所有顶点坐标。
-
- |
- - View - | -
| - - | -
- getScaledHeight():Number
-
-
-
- 返回可视对象缩放后的高度。
-
- |
- - View - | -
| - - | -
- getScaledWidth():Number
-
-
-
- 返回可视对象缩放后的宽度。
-
- |
- - View - | -
| - - | -
- getStage():Stage
-
-
-
- 返回可视对象的舞台引用。若对象没有被添加到舞台，则返回null。
-
- |
- - View - | -
| - - | -
- hitTestObject(object:View, usePolyCollision:Boolean)
-
-
-
- 检测object参数指定的对象是否与其相交。
-
- |
- - View - | -
| - - | -
- hitTestPoint(x:Number, y:Number, usePolyCollision:Boolean):Boolean
-
-
-
- 检测由x和y参数指定的点是否在其外接矩形之内。
-
- |
- - View - | -
| - - | -
- removeFromParent():View
-
-
-
- 从父容器里删除此对象。
-
- |
- - View - | -
| - - | -
-
-
-
- 可视对象的具体渲染逻辑。子类可通过覆盖此方法实现自己的渲染。
-
- |
- - View - | -
| - - | -
- toString():String
-
-
-
- 返回可视对象的字符串表示。
-
- |
- - View - | -
-
-
-
-
-
-
-
-
- 模块 hilo/media/WebAudio
-
-
-
-
-
- 依赖
- hilo/core/Hilo, hilo/core/Class, hilo/event/EventMixin
-
-
-
-
- 源码
- WebAudio.js
-
-
-
- WebAudio声音播放模块。它具有更好的声音播放和控制能力，适合在iOS6+平台使用。
-兼容情况：iOS6+、Chrome33+、Firefox28+支持，但Android浏览器均不支持。
-
-
-
| - | 属性 | -定义于 | -
|---|---|---|
| - - | -
-
-
- autoPlay:Boolean
-
-
-
- 是否自动播放。默认为false。
-
- |
- - WebAudio - | -
| - - | -
-
-
- duration:Number
-
-
-
- 音频的时长。只读属性。
-
- |
- - WebAudio - | -
| - - | -
-
-
- loaded:Boolean
-
-
-
- 音频资源是否已加载完成。只读属性。
-
- |
- - WebAudio - | -
| - - | -
-
-
- loop:Boolean
-
-
-
- 是否循环播放。默认为false。
-
- |
- - WebAudio - | -
| - - | -
-
-
- muted:Boolean
-
-
-
- 是否静音。默认为false。
-
- |
- - WebAudio - | -
| - - | -
-
-
- playing:Boolean
-
-
-
- 是否正在播放音频。只读属性。
-
- |
- - WebAudio - | -
| - - | -
-
-
- src:String
-
-
-
- 播放的音频的资源地址。
-
- |
- - WebAudio - | -
| - - | -
-
-
- volume:Number
-
-
-
- 音量的大小。取值范围：0-1。
-
- |
- - WebAudio - | -
| - - | -
-
-
- isSupported
-
-
- static
- 浏览器是否支持WebAudio。
-
- |
- - WebAudio - | -
| - - | -
-
-
- enabled
-
-
- static
- 浏览器是否已激活WebAudio。
-
- |
- - WebAudio - | -
| - | 方法 | -定义于 | -
|---|---|---|
| - |
-
- WebAudio(properties:Object)
-
- 构造函数。
- |
- WebAudio | -
| - - | -
- load()
-
-
-
- 加载音频文件。注意：我们使用XMLHttpRequest进行加载，因此需要注意跨域问题。
-
- |
- - WebAudio - | -
| - - | -
- pause()
-
-
-
- 暂停音频。
-
- |
- - WebAudio - | -
| - - | -
- play()
-
-
-
- 播放音频。如果正在播放，则会重新开始。
-
- |
- - WebAudio - | -
| - - | -
- resume()
-
-
-
- 恢复音频播放。
-
- |
- - WebAudio - | -
| - - | -
- setMute(muted)
-
-
-
- 设置是否静音。
-
- |
- - WebAudio - | -
| - - | -
- setVolume(volume)
-
-
-
- 设置音量。
-
- |
- - WebAudio - | -
| - - | -
- stop()
-
-
-
- 停止音频播放。
-
- |
- - WebAudio - | -
| - - | -
- enable()
-
-
- static
- 激活WebAudio。注意：需用户事件触发此方法才有效。激活后，无需用户事件也可播放音频。
-
- |
- - WebAudio - | -
-
-
-
-
-
- 继承 WebGLRenderer
- Renderer
-
-
-
-
-
-
- 模块 hilo/renderer/WebGLRenderer
-
-
-
-
-
- 依赖
- hilo/core/Class, hilo/renderer/Renderer, hilo/geom/Matrix
-
-
-
-
- 源码
- WebGLRenderer.js
-
-
-
- webgl画布渲染器。所有可视对象将渲染在canvas画布上。
-
-
-
| - | 属性 | -定义于 | -
|---|---|---|
| - - | -
-
-
- gl:WebGLRenderingContext
-
-
-
- webgl上下文。只读属性。
-
- |
- - WebGLRenderer - | -
| - - | -
-
-
- isSupport
-
-
- static
- 是否支持WebGL。只读属性。
-
- |
- - WebGLRenderer - | -
| - - | -
-
-
- MAX_BATCH_NUM
-
-
- static
- 最大批渲染数量。
-
- |
- - WebGLRenderer - | -
| - - | -
-
-
- ATTRIBUTE_NUM
-
-
- static
- 顶点属性数。只读属性。
-
- |
- - WebGLRenderer - | -
| - | 方法 | -定义于 | -
|---|---|---|
| - |
-
- WebGLRenderer(properties:Object)
-
- 构造函数。
- |
- WebGLRenderer | -
-
-
-
-
-
-
-
-
- 模块 hilo/media/WebSound
-
-
-
-
-
- 依赖
- hilo/core/Hilo, hilo/media/HTMLAudio, hilo/media/WebAudio
-
-
-
-
- 源码
- WebSound.js
-
-
-
- 声音播放管理器。
-
-
-
-使用示例:
-
-var audio = WebSound.getAudio({
- src: 'test.mp3',
- loop: false,
- volume: 1
-}).on('load', function(e){
- console.log('load');
-}).on('end', function(e){
- console.log('end');
-}).play();
-
-
-
-
-
-
-
-
-
-
-
-
- | - | 方法 | -定义于 | -
|---|---|---|
| - - | -
- enableAudio()
-
-
- static
- 激活音频功能。注意：需用户事件触发此方法才有效。目前仅对WebAudio有效。
-
- |
- - WebSound - | -
| - - | -
- getAudio(source:String|Object):WebAudio|HTMLAudio
-
-
- static
- 获取音频对象。优先使用WebAudio。
-
- |
- - WebSound - | -
| - - | -
- removeAudio(source:String|Object)
-
-
- static
- 删除音频对象。
-
- |
- - WebSound - | -
-
-
-
-
-
-
-
-
- 模块 hilo/util/drag
-
-
-
-
-
- 依赖
- hilo/core/Class, hilo/core/Hilo
-
-
-
-
- 源码
- drag.js
-
-
-
- drag是一个包含拖拽功能的mixin。可以通过 Class.mix(view, drag)或Hilo.copy(view, drag)来为view增加拖拽功能。
-
-
-
-使用示例:
-
-var bmp = new Bitmap({image:img});
-Hilo.copy(bmp, Hilo.drag);
-bmp.startDrag([0, 0, 550, 400]);
-
-
-
-
-
-
-
-
-
-
-
-
- | - | 方法 | -定义于 | -
|---|---|---|
| - - | -
- startDrag(bounds:Array)
-
-
- static
- 开始拖拽
-
- |
- - drag - | -
| - - | -
- stopDrag()
-
-
- static
- 停止拖拽
-
- |
- - drag - | -
1 /** - 2 * Hilo - 3 * Copyright 2015 alibaba.com - 4 * Licensed under the MIT License - 5 */ - 6 - 7 /** - 8 * 创建类示例： - 9 * <pre> - 10 * var Bird = Hilo.Class.create({ - 11 * Extends: Animal, - 12 * Mixes: EventMixin, - 13 * constructor: function(name){ - 14 * this.name = name; - 15 * }, - 16 * fly: function(){ - 17 * console.log('I am flying'); - 18 * }, - 19 * Statics: { - 20 * isBird: function(bird){ - 21 * return bird instanceof Bird; - 22 * } - 23 * } - 24 * }); - 25 * - 26 * var swallow = new Bird('swallow'); - 27 * swallow.fly(); - 28 * Bird.isBird(swallow); - 29 * </pre> - 30 * @namespace Class是提供类的创建的辅助工具。 - 31 * @static - 32 * @module hilo/core/Class - 33 */ - 34 var Class = (function(){ - 35 - 36 /** - 37 * 根据参数指定的属性和方法创建类。 - 38 * @param {Object} properties 要创建的类的相关属性和方法。主要有： - 39 * <ul> - 40 * <li><b>Extends</b> - 指定要继承的父类。</li> - 41 * <li><b>Mixes</b> - 指定要混入的成员集合对象。</li> - 42 * <li><b>Statics</b> - 指定类的静态属性或方法。</li> - 43 * <li><b>constructor</b> - 指定类的构造函数。</li> - 44 * <li>其他创建类的成员属性或方法。</li> - 45 * </ul> - 46 * @returns {Object} 创建的类。 - 47 */ - 48 var create = function(properties){ - 49 properties = properties || {}; - 50 var clazz = properties.hasOwnProperty('constructor') ? properties.constructor : function(){}; - 51 implement.call(clazz, properties); - 52 return clazz; - 53 } - 54 - 55 /** - 56 * @private - 57 */ - 58 var implement = function(properties){ - 59 var proto = {}, key, value; - 60 for(key in properties){ - 61 value = properties[key]; - 62 if(classMutators.hasOwnProperty(key)){ - 63 classMutators[key].call(this, value); - 64 }else{ - 65 proto[key] = value; - 66 } - 67 } - 68 - 69 mix(this.prototype, proto); - 70 }; - 71 - 72 var classMutators = /** @ignore */{ - 73 Extends: function(parent){ - 74 var existed = this.prototype, proto = createProto(parent.prototype); - 75 //inherit static properites - 76 mix(this, parent); - 77 //keep existed properties - 78 mix(proto, existed); - 79 //correct constructor - 80 proto.constructor = this; - 81 //prototype chaining - 82 this.prototype = proto; - 83 //shortcut to parent's prototype - 84 this.superclass = parent.prototype; - 85 }, - 86 - 87 Mixes: function(items){ - 88 items instanceof Array || (items = [items]); - 89 var proto = this.prototype, item; - 90 - 91 while(item = items.shift()){ - 92 mix(proto, item.prototype || item); - 93 } - 94 }, - 95 - 96 Statics: function(properties){ - 97 mix(this, properties); - 98 } - 99 }; -100 -101 /** -102 * @private -103 */ -104 var createProto = (function(){ -105 if(Object.__proto__){ -106 return function(proto){ -107 return {__proto__: proto}; -108 } -109 }else{ -110 var Ctor = function(){}; -111 return function(proto){ -112 Ctor.prototype = proto; -113 return new Ctor(); -114 } -115 } -116 })(); -117 -118 /** -119 * 混入属性或方法。 -120 * @param {Object} target 混入目标对象。 -121 * @param {Object} source 要混入的属性和方法来源。可支持多个来源参数。 -122 * @returns {Object} 混入目标对象。 -123 */ -124 var mix = function(target){ -125 for(var i = 1, len = arguments.length; i < len; i++){ -126 var source = arguments[i], defineProps; -127 for(var key in source){ -128 var prop = source[key]; -129 if(prop && typeof prop === 'object'){ -130 if(prop.value !== undefined || typeof prop.get === 'function' || typeof prop.set === 'function'){ -131 defineProps = defineProps || {}; -132 defineProps[key] = prop; -133 continue; -134 } -135 } -136 target[key] = prop; -137 } -138 if(defineProps) defineProperties(target, defineProps); -139 } -140 -141 return target; -142 }; -143 -144 try{ -145 var defineProperty = Object.defineProperty, -146 defineProperties = Object.defineProperties; -147 defineProperty({}, '$', {value:0}); -148 }catch(e){ -149 if('__defineGetter__' in Object){ -150 defineProperty = function(obj, prop, desc){ -151 if('value' in desc) obj[prop] = desc.value; -152 if('get' in desc) obj.__defineGetter__(prop, desc.get); -153 if('set' in desc) obj.__defineSetter__(prop, desc.set); -154 return obj; -155 }; -156 defineProperties = function(obj, props){ -157 for(var prop in props){ -158 if(props.hasOwnProperty(prop)){ -159 defineProperty(obj, prop, props[prop]); -160 } -161 } -162 return obj; -163 }; -164 } -165 } -166 -167 return {create:create, mix:mix}; -168 -169 })(); -170\ No newline at end of file diff --git a/docs/api/symbols/src/src_core_Hilo.js.html b/docs/api/symbols/src/src_core_Hilo.js.html deleted file mode 100644 index 28fa6d48..00000000 --- a/docs/api/symbols/src/src_core_Hilo.js.html +++ /dev/null @@ -1,354 +0,0 @@ -
1 /** - 2 * Hilo - 3 * Copyright 2015 alibaba.com - 4 * Licensed under the MIT License - 5 */ - 6 - 7 /** - 8 * @namespace Hilo的基础核心方法集合。 - 9 * @static - 10 * @module hilo/core/Hilo - 11 */ - 12 var Hilo = (function(){ - 13 - 14 var win = window, doc = document, docElem = doc.documentElement, - 15 uid = 0; - 16 - 17 return { - 18 /** - 19 * 获取一个全局唯一的id。如Stage1，Bitmap2等。 - 20 * @param {String} prefix 生成id的前缀。 - 21 * @returns {String} 全局唯一id。 - 22 */ - 23 getUid: function(prefix){ - 24 var id = ++uid; - 25 if(prefix){ - 26 var charCode = prefix.charCodeAt(prefix.length - 1); - 27 if (charCode >= 48 && charCode <= 57) prefix += "_"; //0至9之间添加下划线 - 28 return prefix + id; - 29 } - 30 return id; - 31 }, - 32 - 33 /** - 34 * 为指定的可视对象生成一个包含路径的字符串表示形式。如Stage1.Container2.Bitmap3。 - 35 * @param {View} view 指定的可视对象。 - 36 * @returns {String} 可视对象的字符串表示形式。 - 37 */ - 38 viewToString: function(view){ - 39 var result, obj = view; - 40 while(obj){ - 41 result = result ? (obj.id + '.' + result) : obj.id; - 42 obj = obj.parent; - 43 } - 44 return result; - 45 }, - 46 - 47 /** - 48 * 简单的浅复制对象。 - 49 * @param {Object} target 要复制的目标对象。 - 50 * @param {Object} source 要复制的源对象。 - 51 * @param {Boolean} strict 指示是否复制未定义的属性，默认为false，即不复制未定义的属性。 - 52 * @returns {Object} 复制后的对象。 - 53 */ - 54 copy: function(target, source, strict){ - 55 for(var key in source){ - 56 if(!strict || target.hasOwnProperty(key) || target[key] !== undefined){ - 57 target[key] = source[key]; - 58 } - 59 } - 60 return target; - 61 }, - 62 - 63 /** - 64 * 浏览器特性集合。包括： - 65 * <ul> - 66 * <li><b>jsVendor</b> - 浏览器厂商CSS前缀的js值。比如：webkit。</li> - 67 * <li><b>cssVendor</b> - 浏览器厂商CSS前缀的css值。比如：-webkit-。</li> - 68 * <li><b>supportTransform</b> - 是否支持CSS Transform变换。</li> - 69 * <li><b>supportTransform3D</b> - 是否支持CSS Transform 3D变换。</li> - 70 * <li><b>supportStorage</b> - 是否支持本地存储localStorage。</li> - 71 * <li><b>supportTouch</b> - 是否支持触碰事件。</li> - 72 * <li><b>supportCanvas</b> - 是否支持canvas元素。</li> - 73 * </ul> - 74 */ - 75 browser: (function(){ - 76 var ua = navigator.userAgent; - 77 var data = { - 78 iphone: /iphone/i.test(ua), - 79 ipad: /ipad/i.test(ua), - 80 ipod: /ipod/i.test(ua), - 81 ios: /iphone|ipad|ipod/i.test(ua), - 82 android: /android/i.test(ua), - 83 webkit: /webkit/i.test(ua), - 84 chrome: /chrome/i.test(ua), - 85 safari: /safari/i.test(ua), - 86 firefox: /firefox/i.test(ua), - 87 ie: /msie/i.test(ua), - 88 opera: /opera/i.test(ua), - 89 supportTouch: 'ontouchstart' in win, - 90 supportCanvas: doc.createElement('canvas').getContext != null, - 91 supportStorage: false, - 92 supportOrientation: 'orientation' in win, - 93 supportDeviceMotion: 'ondevicemotion' in win - 94 }; - 95 - 96 //`localStorage` is null or `localStorage.setItem` throws error in some cases (e.g. localStorage is disabled) - 97 try{ - 98 var value = 'hilo'; - 99 localStorage.setItem(value, value); -100 localStorage.removeItem(value); -101 data.supportStorage = true; -102 }catch(e){ }; -103 -104 //vendro prefix -105 var jsVendor = data.jsVendor = data.webkit ? 'webkit' : data.firefox ? 'Moz' : data.opera ? 'O' : data.ie ? 'ms' : ''; -106 var cssVendor = data.cssVendor = '-' + jsVendor + '-'; -107 -108 //css transform/3d feature dectection -109 var testElem = doc.createElement('div'), style = testElem.style; -110 var supportTransform = style[jsVendor + 'Transform'] != undefined; -111 var supportTransform3D = style[jsVendor + 'Perspective'] != undefined; -112 if(supportTransform3D){ -113 testElem.id = 'test3d'; -114 style = doc.createElement('style'); -115 style.textContent = '@media ('+ cssVendor +'transform-3d){#test3d{height:3px}}'; -116 doc.head.appendChild(style); -117 -118 docElem.appendChild(testElem); -119 supportTransform3D = testElem.offsetHeight == 3; -120 doc.head.removeChild(style); -121 docElem.removeChild(testElem); -122 }; -123 data.supportTransform = supportTransform; -124 data.supportTransform3D = supportTransform3D; -125 -126 return data; -127 })(), -128 -129 /** -130 * 事件类型枚举对象。包括： -131 * <ul> -132 * <li><b>POINTER_START</b> - 鼠标或触碰开始事件。对应touchstart或mousedown。</li> -133 * <li><b>POINTER_MOVE</b> - 鼠标或触碰移动事件。对应touchmove或mousemove。</li> -134 * <li><b>POINTER_END</b> - 鼠标或触碰结束事件。对应touchend或mouseup。</li> -135 * </ul> -136 */ -137 event: (function(){ -138 var supportTouch = 'ontouchstart' in win; -139 return { -140 POINTER_START: supportTouch ? 'touchstart' : 'mousedown', -141 POINTER_MOVE: supportTouch ? 'touchmove' : 'mousemove', -142 POINTER_END: supportTouch ? 'touchend' : 'mouseup' -143 }; -144 })(), -145 -146 /** -147 * 可视对象对齐方式枚举对象。包括： -148 * <ul> -149 * <li><b>TOP_LEFT</b> - 左上角对齐。</li> -150 * <li><b>TOP</b> - 顶部居中对齐。</li> -151 * <li><b>TOP_RIGHT</b> - 右上角对齐。</li> -152 * <li><b>LEFT</b> - 左边居中对齐。</li> -153 * <li><b>CENTER</b> - 居中对齐。</li> -154 * <li><b>RIGHT</b> - 右边居中对齐。</li> -155 * <li><b>BOTTOM_LEFT</b> - 左下角对齐。</li> -156 * <li><b>BOTTOM</b> - 底部居中对齐。</li> -157 * <li><b>BOTTOM_RIGHT</b> - 右下角对齐。</li> -158 * </ul> -159 */ -160 align: { -161 TOP_LEFT: 'TL', //top & left -162 TOP: 'T', //top & center -163 TOP_RIGHT: 'TR', //top & right -164 LEFT: 'L', //left & center -165 CENTER: 'C', //center -166 RIGHT: 'R', //right & center -167 BOTTOM_LEFT: 'BL', //bottom & left -168 BOTTOM: 'B', //bottom & center -169 BOTTOM_RIGHT: 'BR' //bottom & right -170 }, -171 -172 /** -173 * 获取DOM元素在页面中的内容显示区域。 -174 * @param {HTMLElement} elem DOM元素。 -175 * @returns {Object} DOM元素的可视区域。格式为：{left:0, top:0, width:100, height:100}。 -176 */ -177 getElementRect: function(elem){ -178 try{ -179 //this fails if it's a disconnected DOM node -180 var bounds = elem.getBoundingClientRect(); -181 }catch(e){ -182 bounds = {top:elem.offsetTop, left:elem.offsetLeft, width:elem.offsetWidth, height:elem.offsetHeight}; -183 } -184 -185 var offsetX = ((win.pageXOffset || docElem.scrollLeft) - (docElem.clientLeft || 0)) || 0; -186 var offsetY = ((win.pageYOffset || docElem.scrollTop) - (docElem.clientTop || 0)) || 0; -187 var styles = win.getComputedStyle ? getComputedStyle(elem) : elem.currentStyle; -188 var parseIntFn = parseInt; -189 -190 var padLeft = (parseIntFn(styles.paddingLeft) + parseIntFn(styles.borderLeftWidth)) || 0; -191 var padTop = (parseIntFn(styles.paddingTop) + parseIntFn(styles.borderTopWidth)) || 0; -192 var padRight = (parseIntFn(styles.paddingRight) + parseIntFn(styles.borderRightWidth)) || 0; -193 var padBottom = (parseIntFn(styles.paddingBottom) + parseIntFn(styles.borderBottomWidth)) || 0; -194 var top = bounds.top || 0; -195 var left = bounds.left || 0; -196 -197 return { -198 left: left + offsetX + padLeft, -199 top: top + offsetY + padTop, -200 width: bounds.right - padRight - left - padLeft, -201 height: bounds.bottom - padBottom - top - padTop -202 }; -203 }, -204 -205 /** -206 * 创建一个DOM元素。可指定属性和样式。 -207 * @param {String} type 要创建的DOM元素的类型。比如：'div'。 -208 * @param {Object} properties 指定DOM元素的属性和样式。 -209 * @returns {HTMLElement} 一个DOM元素。 -210 */ -211 createElement: function(type, properties){ -212 var elem = doc.createElement(type), p, val, s; -213 for(p in properties){ -214 val = properties[p]; -215 if(p === 'style'){ -216 for(s in val) elem.style[s] = val[s]; -217 }else{ -218 elem[p] = val; -219 } -220 } -221 return elem; -222 }, -223 -224 /** -225 * 根据参数id获取一个DOM元素。此方法等价于document.getElementById(id)。 -226 * @param {String} id 要获取的DOM元素的id。 -227 * @returns {HTMLElement} 一个DOM元素。 -228 */ -229 getElement: function(id){ -230 return doc.getElementById(id); -231 }, -232 -233 /** -234 * 设置可视对象DOM元素的CSS样式。 -235 * @param {View} obj 指定要设置CSS样式的可视对象。 -236 * @private -237 */ -238 setElementStyleByView: function(obj){ -239 var drawable = obj.drawable, -240 style = drawable.domElement.style, -241 stateCache = obj._stateCache || (obj._stateCache = {}), -242 prefix = Hilo.browser.jsVendor, px = 'px', flag = false; -243 -244 if(this.cacheStateIfChanged(obj, ['visible'], stateCache)){ -245 style.display = !obj.visible ? 'none' : ''; -246 } -247 if(this.cacheStateIfChanged(obj, ['alpha'], stateCache)){ -248 style.opacity = obj.alpha; -249 } -250 if(!obj.visible || obj.alpha <= 0) return; -251 -252 if(this.cacheStateIfChanged(obj, ['width'], stateCache)){ -253 style.width = obj.width + px; -254 } -255 if(this.cacheStateIfChanged(obj, ['height'], stateCache)){ -256 style.height = obj.height + px; -257 } -258 if(this.cacheStateIfChanged(obj, ['depth'], stateCache)){ -259 style.zIndex = obj.depth + 1; -260 } -261 if(flag = this.cacheStateIfChanged(obj, ['pivotX', 'pivotY'], stateCache)){ -262 style[prefix + 'TransformOrigin'] = obj.pivotX + px + ' ' + obj.pivotY + px; -263 } -264 if(this.cacheStateIfChanged(obj, ['x', 'y', 'rotation', 'scaleX', 'scaleY'], stateCache) || flag){ -265 style[prefix + 'Transform'] = this.getTransformCSS(obj); -266 } -267 if(this.cacheStateIfChanged(obj, ['background'], stateCache)){ -268 style.backgroundColor = obj.background; -269 } -270 if(!style.pointerEvents){ -271 style.pointerEvents = 'none'; -272 } -273 -274 //render image as background -275 var image = drawable.image; -276 if(image){ -277 var src = image.src; -278 if(src !== stateCache.image){ -279 stateCache.image = src; -280 style.backgroundImage = 'url(' + src + ')'; -281 } -282 -283 var rect = drawable.rect; -284 if(rect){ -285 var sx = rect[0], sy = rect[1]; -286 if(sx !== stateCache.sx){ -287 stateCache.sx = sx; -288 style.backgroundPositionX = -sx + px; -289 } -290 if(sy !== stateCache.sy){ -291 stateCache.sy = sy; -292 style.backgroundPositionY = -sy + px; -293 } -294 } -295 } -296 -297 //render mask -298 var mask = obj.mask; -299 if(mask){ -300 var maskImage = mask.drawable.domElement.style.backgroundImage; -301 if(maskImage !== stateCache.maskImage){ -302 stateCache.maskImage = maskImage; -303 style[prefix + 'MaskImage'] = maskImage; -304 style[prefix + 'MaskRepeat'] = 'no-repeat'; -305 } -306 -307 var maskX = mask.x, maskY = mask.y; -308 if(maskX !== stateCache.maskX || maskY !== stateCache.maskY){ -309 stateCache.maskX = maskX; -310 stateCache.maskY = maskY; -311 style[prefix + 'MaskPosition'] = maskX + px + ' ' + maskY + px; -312 } -313 } -314 }, -315 -316 /** -317 * @private -318 */ -319 cacheStateIfChanged: function(obj, propNames, stateCache){ -320 var i, len, name, value, changed = false; -321 for(i = 0, len = propNames.length; i < len; i++){ -322 name = propNames[i]; -323 value = obj[name]; -324 if(value != stateCache[name]){ -325 stateCache[name] = value; -326 changed = true; -327 } -328 } -329 return changed; -330 }, -331 -332 /** -333 * 生成可视对象的CSS变换样式。 -334 * @param {View} obj 指定生成CSS变换样式的可视对象。 -335 * @returns {String} 生成的CSS样式字符串。 -336 */ -337 getTransformCSS: function(obj){ -338 var use3d = this.browser.supportTransform3D, -339 str3d = use3d ? '3d' : ''; -340 -341 return 'translate' + str3d + '(' + (obj.x - obj.pivotX) + 'px, ' + (obj.y - obj.pivotY) + (use3d ? 'px, 0px)' : 'px)') -342 + 'rotate' + str3d + (use3d ? '(0, 0, 1, ' : '(') + obj.rotation + 'deg)' -343 + 'scale' + str3d + '(' + obj.scaleX + ', ' + obj.scaleY + (use3d ? ', 1)' : ')'); -344 } -345 }; -346 -347 })();\ No newline at end of file diff --git a/docs/api/symbols/src/src_event_EventMixin.js.html b/docs/api/symbols/src/src_event_EventMixin.js.html deleted file mode 100644 index 0574406e..00000000 --- a/docs/api/symbols/src/src_event_EventMixin.js.html +++ /dev/null @@ -1,143 +0,0 @@ -
1 /** - 2 * Hilo - 3 * Copyright 2015 alibaba.com - 4 * Licensed under the MIT License - 5 */ - 6 - 7 /** - 8 * @class EventMixin是一个包含事件相关功能的mixin。可以通过 Class.mix(target, EventMixin) 来为target增加事件功能。 - 9 * @mixin - 10 * @static - 11 * @module hilo/event/EventMixin - 12 * @requires hilo/core/Class - 13 */ - 14 var EventMixin = { - 15 _listeners: null, - 16 - 17 /** - 18 * 增加一个事件监听。 - 19 * @param {String} type 要监听的事件类型。 - 20 * @param {Function} listener 事件监听回调函数。 - 21 * @param {Boolean} once 是否是一次性监听，即回调函数响应一次后即删除，不再响应。 - 22 * @returns {Object} 对象本身。链式调用支持。 - 23 */ - 24 on: function(type, listener, once){ - 25 var listeners = (this._listeners = this._listeners || {}); - 26 var eventListeners = (listeners[type] = listeners[type] || []); - 27 for(var i = 0, len = eventListeners.length; i < len; i++){ - 28 var el = eventListeners[i]; - 29 if(el.listener === listener) return; - 30 } - 31 eventListeners.push({listener:listener, once:once}); - 32 return this; - 33 }, - 34 - 35 /** - 36 * 删除一个事件监听。如果不传入任何参数，则删除所有的事件监听；如果不传入第二个参数，则删除指定类型的所有事件监听。 - 37 * @param {String} type 要删除监听的事件类型。 - 38 * @param {Function} listener 要删除监听的回调函数。 - 39 * @returns {Object} 对象本身。链式调用支持。 - 40 */ - 41 off: function(type, listener){ - 42 //remove all event listeners - 43 if(arguments.length == 0){ - 44 this._listeners = null; - 45 return this; - 46 } - 47 - 48 var eventListeners = this._listeners && this._listeners[type]; - 49 if(eventListeners){ - 50 //remove event listeners by specified type - 51 if(arguments.length == 1){ - 52 delete this._listeners[type]; - 53 return this; - 54 } - 55 - 56 for(var i = 0, len = eventListeners.length; i < len; i++){ - 57 var el = eventListeners[i]; - 58 if(el.listener === listener){ - 59 eventListeners.splice(i, 1); - 60 if(eventListeners.length === 0) delete this._listeners[type]; - 61 break; - 62 } - 63 } - 64 } - 65 return this; - 66 }, - 67 - 68 /** - 69 * 发送事件。当第一个参数类型为Object时，则把它作为一个整体事件对象。 - 70 * @param {String} type 要发送的事件类型。 - 71 * @param {Object} detail 要发送的事件的具体信息，即事件随带参数。 - 72 * @returns {Boolean} 是否成功调度事件。 - 73 */ - 74 fire: function(type, detail){ - 75 var event, eventType; - 76 if(typeof type === 'string'){ - 77 eventType = type; - 78 }else{ - 79 event = type; - 80 eventType = type.type; - 81 } - 82 - 83 var listeners = this._listeners; - 84 if(!listeners) return false; - 85 - 86 var eventListeners = listeners[eventType]; - 87 if(eventListeners){ - 88 eventListeners = eventListeners.slice(0); - 89 event = event || new EventObject(eventType, this, detail); - 90 if(event._stopped) return false; - 91 - 92 for(var i = 0; i < eventListeners.length; i++){ - 93 var el = eventListeners[i]; - 94 el.listener.call(this, event); - 95 if(el.once) eventListeners.splice(i--, 1); - 96 } - 97 - 98 if(eventListeners.length == 0) delete listeners[eventType]; - 99 return true; -100 } -101 return false; -102 } -103 }; -104 -105 /** -106 * 事件对象类。当前仅为内部类，以后有需求的话可能会考虑独立为公开类。 -107 */ -108 var EventObject = Class.create({ -109 constructor: function EventObject(type, target, detail){ -110 this.type = type; -111 this.target = target; -112 this.detail = detail; -113 this.timeStamp = +new Date(); -114 }, -115 -116 type: null, -117 target: null, -118 detail: null, -119 timeStamp: 0, -120 -121 stopImmediatePropagation: function(){ -122 this._stopped = true; -123 } -124 }); -125 -126 //Trick: `stopImmediatePropagation` compatibility -127 var RawEvent = window.Event; -128 if(RawEvent){ -129 var proto = RawEvent.prototype, -130 stop = proto.stopImmediatePropagation; -131 proto.stopImmediatePropagation = function(){ -132 stop && stop.call(this); -133 this._stopped = true; -134 } -135 } -136\ No newline at end of file diff --git a/docs/api/symbols/src/src_game_Camera.js.html b/docs/api/symbols/src/src_game_Camera.js.html deleted file mode 100644 index 4cc005e4..00000000 --- a/docs/api/symbols/src/src_game_Camera.js.html +++ /dev/null @@ -1,90 +0,0 @@ -
1 /** - 2 * Hilo - 3 * Copyright 2015 alibaba.com - 4 * Licensed under the MIT License - 5 */ - 6 - 7 /** - 8 * @class Camera类表示摄像机。 - 9 * @param {Object} properties 创建对象的属性参数。可包含此类所有可写属性。 - 10 * @module hilo/game/Camera - 11 * @requires hilo/core/Hilo - 12 * @requires hilo/core/Class - 13 * @property {Number} width 镜头宽 - 14 * @property {Number} height 镜头高 - 15 * @property {Object} scroll 滚动值 {x:0, y:0} - 16 * @property {View} target 摄像机跟随的目标 - 17 * @property {Array} bounds 摄像机移动边界的矩形区域 [x, y, width, height] - 18 * @property {Array} deadzone 摄像机不移动的矩形区域 [ x, y, width, height] - 19 */ - 20 var Camera = Class.create(/** @lends Camera.prototype */{ - 21 constructor:function(properties){ - 22 this.width = 0; - 23 this.height = 0; - 24 - 25 this.target = null; - 26 this.deadzone = null; - 27 this.bounds = null; - 28 - 29 this.scroll = { - 30 x:0, - 31 y:0 - 32 }; - 33 - 34 Hilo.copy(this, properties); - 35 }, - 36 /** - 37 * 更新 - 38 * @param {Number} deltaTime - 39 */ - 40 tick:function(deltaTime){ - 41 var target = this.target; - 42 var scroll = this.scroll; - 43 var bounds = this.bounds; - 44 var deadzone = this.deadzone; - 45 - 46 if(target){ - 47 var viewX, viewY; - 48 if(deadzone){ - 49 viewX = Math.min(Math.max(target.x - scroll.x, deadzone[0]), deadzone[0] + deadzone[2]); - 50 viewY = Math.min(Math.max(target.y - scroll.y, deadzone[1]), deadzone[1] + deadzone[3]); - 51 } - 52 else{ - 53 viewX = this.width * .5; - 54 viewY = this.height * .5; - 55 } - 56 - 57 scroll.x = target.x - viewX; - 58 scroll.y = target.y - viewY; - 59 - 60 if(bounds){ - 61 scroll.x = Math.min(Math.max(scroll.x, bounds[0]), bounds[0] + bounds[2]); - 62 scroll.y = Math.min(Math.max(scroll.y, bounds[1]), bounds[1] + bounds[3]); - 63 } - 64 } - 65 else{ - 66 scroll.x = 0; - 67 scroll.y = 0; - 68 } - 69 }, - 70 /** - 71 * 跟随目标 - 72 * @param {Object} target 跟随的目标，必须是有x,y属性的对象 - 73 * @param {Array} deadzone 摄像机不移动的矩形区域 [ x, y, width, height] - 74 */ - 75 follow:function(target, deadzone){ - 76 this.target = target; - 77 if(deadzone !== undefined){ - 78 this.deadzone = deadzone; - 79 } - 80 this.tick(); - 81 } - 82 }); - 83\ No newline at end of file diff --git a/docs/api/symbols/src/src_game_Camera3d.js.html b/docs/api/symbols/src/src_game_Camera3d.js.html deleted file mode 100644 index 32bdb31d..00000000 --- a/docs/api/symbols/src/src_game_Camera3d.js.html +++ /dev/null @@ -1,176 +0,0 @@ -
1 /** - 2 * Hilo - 3 * Copyright 2015 alibaba.com - 4 * Licensed under the MIT License - 5 */ - 6 - 7 /** - 8 * @class Camera3d 伪3D虚拟摄像机。 - 9 * @module hilo/game/Camera3d - 10 * @requires hilo/core/Hilo - 11 * @requires hilo/core/Class - 12 * @property {Number} fv 镜头视点距离（屏幕视点相对眼睛距离，绝对了坐标缩放比例） - 13 * @property {Number} fx 镜头视点X（屏幕视点相对屏幕左上角X距离） - 14 * @property {Number} fy 镜头视点Y（屏幕视点相对屏幕左上角Y距离） - 15 * @property {Object} stage 3D对象所在容器，可以是stage或container，结合ticker时是必须参数，用来Z深度排序 - 16 * @property {Number} x 镜头三维坐标x - 17 * @property {Number} y 镜头三维坐标y - 18 * @property {Number} z 镜头三维坐标z - 19 * @property {Number} rotationX X轴旋转角度 - 20 * @property {Number} rotationY Y轴旋转角度 - 21 * @property {Number} rotationZ Z轴旋转角度 - 22 */ - 23 var Camera3d = (function(){ - 24 - 25 var degtorad = Math.PI / 180; - 26 - 27 //向量旋转 - 28 function rotateX(x, y, z, ca, sa) {//绕X轴旋转 - 29 return { - 30 x: x, - 31 y: y * ca - z * sa, - 32 z: y * sa + z * ca - 33 }; - 34 } - 35 function rotateY(x, y, z, ca, sa) {//绕Y轴旋转 - 36 return { - 37 x: x * ca - z * sa, - 38 y: y, - 39 z: x * sa + z * ca - 40 }; - 41 } - 42 function rotateZ(x, y, z, ca, sa) {//绕Z轴旋转 - 43 return { - 44 x: x * ca - y * sa, - 45 y: x * sa + y * ca, - 46 z: z - 47 }; - 48 } - 49 - 50 var Camera3d = Class.create(/** @lends Camera3d.prototype */{ - 51 - 52 constructor: function(properties){ - 53 properties.x = properties.x || 0; - 54 properties.y = properties.y || 0; - 55 properties.z = properties.z || 0; - 56 properties.rotationX = properties.rotationX || 0; - 57 properties.rotationY = properties.rotationY || 0; - 58 properties.rotationZ = properties.rotationZ || 0; - 59 - 60 Hilo.copy(this, properties); - 61 }, - 62 - 63 /** - 64 * 仿射矩阵位移变换，不同于直接修改Camera3d.x/y/z. 是在Camera3d依次做坐标位移 - 旋转变换 后，再加上一个位移变换。主要功能可以做Zoomin/out 功能 - 65 * @param {Number} x坐标 - 66 * @param {Number} y坐标 - 67 * @param {Number} z坐标 - 68 */ - 69 translate : function(x,y,z){ - 70 this.tx = x; - 71 this.ty = y; - 72 this.tz = z; - 73 }, - 74 - 75 /** - 76 * 旋转X轴方向角度，相当于欧拉角系统的 beta - 77 * @param {Number} X旋转角度 - 78 */ - 79 rotateX : function(angle){ - 80 this.rotationX = angle; - 81 }, - 82 - 83 /** - 84 * 旋转Y轴方向角度，相当于欧拉角系统的 gamma - 85 * @param {Number} Y旋转角度 - 86 */ - 87 rotateY : function(angle){ - 88 this.rotationY = angle; - 89 }, - 90 - 91 /** - 92 * 旋转Z轴方向角度，相当于欧拉角系统的 alpha - 93 * @param {Number} Z旋转角度 - 94 */ - 95 rotateZ : function(angle){ - 96 this.rotationZ = angle; - 97 }, - 98 - 99 /** -100 * 将三维坐标转换投影为二维坐标，同时返回Z轴深度，和投影显示的缩放比例 -101 * @param {object} 三维坐标对象 -102 * @param {object} Hilo.View对象，用于自动转换坐标 -103 */ -104 project : function(vector3D, view){ -105 -106 var rx = this.rotationX * degtorad, -107 ry = this.rotationY * degtorad, -108 rz = this.rotationZ * degtorad, -109 -110 cosX = Math.cos(rx), sinX = Math.sin(rx), -111 cosY = Math.cos(ry), sinY = Math.sin(ry), -112 cosZ = Math.cos(rz), sinZ = Math.sin(rz), -113 -114 // 旋转变换前的 仿射矩阵位移， -115 dx = vector3D.x - this.x, -116 dy = vector3D.y - this.y, -117 dz = vector3D.z - this.z, -118 -119 // 旋转矩阵变换 -120 vector = rotateZ(dx, dy, dz, cosZ, sinZ); -121 vector = rotateY(vector.x, vector.y, vector.z, cosY, sinY); -122 vector = rotateX(vector.x, vector.y, vector.z, cosX, sinX); -123 -124 // 最后的仿射矩阵变换 -125 if(this.tx) vector.x -= this.tx; -126 if(this.ty) vector.y -= this.ty; -127 if(this.tz) vector.z -= this.tz; -128 -129 var perspective = this.fv / (this.fv + vector.z), -130 _x = vector.x * perspective, -131 _y = -vector.y * perspective; -132 -133 if(view) { -134 view.x = _x + this.fx; -135 view.y = _y + this.fy; -136 view.z = -vector.z; -137 view.scaleX = perspective; -138 view.scaleY = perspective; -139 } else { -140 return { -141 x : _x + this.fx, -142 y : _y + this.fy, -143 z : -vector.z, -144 scale : perspective -145 }; -146 } -147 }, -148 -149 /** -150 * Z深度排序 -151 */ -152 sortZ : function(){ -153 this.stage.children.sort(function(view_a, view_b){ -154 return view_a.z > view_b.z; -155 }); -156 }, -157 -158 /** -159 * Ticker 轮询使用 -160 */ -161 tick : function(){ -162 this.sortZ(); -163 } -164 -165 }); -166 -167 return Camera3d; -168 -169 })();\ No newline at end of file diff --git a/docs/api/symbols/src/src_game_ParticleSystem.js.html b/docs/api/symbols/src/src_game_ParticleSystem.js.html deleted file mode 100644 index e4caae0c..00000000 --- a/docs/api/symbols/src/src_game_ParticleSystem.js.html +++ /dev/null @@ -1,293 +0,0 @@ -
1 /** - 2 * Hilo - 3 * Copyright 2015 alibaba.com - 4 * Licensed under the MIT License - 5 */ - 6 - 7 /** - 8 * <iframe src='../../../examples/ParticleSystem.html?noHeader' width = '550' height = '400' scrolling='no'></iframe> - 9 * <br/> - 10 * @class 粒子系统 - 11 * @module hilo/game/ParticleSystem - 12 * @requires hilo/core/Hilo - 13 * @requires hilo/core/Class - 14 * @requires hilo/view/View - 15 * @requires hilo/view/Container - 16 * @requires hilo/view/Bitmap - 17 * @requires hilo/view/Drawable - 18 * @property {Number} emitTime 发射间隔 - 19 * @property {Number} emitTimeVar 发射间隔变化量 - 20 * @property {Number} emitNum 每次发射数量变化量 - 21 * @property {Number} emitNumVar 每次发射数量 - 22 * @property {Number} emitterX 发射器位置x - 23 * @property {Number} emitterY 发射器位置y - 24 * @property {Number} totalTime 总时间 - 25 * @property {Number} gx 重力加速度x - 26 * @property {Number} gy 重力加速度y - 27 * @param {Object} properties 创建对象的属性参数。可包含此类所有可写属性。 - 28 * @param {Object} properties.particle 粒子属性配置 - 29 * @param {Number} properties.particle.x x位置 - 30 * @param {Number} properties.particle.y y位置 - 31 * @param {Number} properties.particle.vx x速度 - 32 * @param {Number} properties.particle.vy y速度 - 33 * @param {Number} properties.particle.ax x加速度 - 34 * @param {Number} properties.particle.ay y加速度 - 35 * @param {Number} properties.particle.life 粒子存活时间 单位s - 36 * @param {Number} properties.particle.alpha 透明度 - 37 * @param {Number} properties.particle.alphaV 透明度变化 - 38 * @param {Number} properties.particle.scale 缩放 - 39 * @param {Number} properties.particle.scaleV 缩放变化速度 - 40 */ - 41 var ParticleSystem = (function(){ - 42 //粒子属性 - 43 var props = ['x', 'y', 'vx', 'vy', 'ax', 'ay', 'rotation', 'rotationV', 'scale', 'scaleV', 'alpha', 'alphaV', 'life']; - 44 var PROPS = []; - 45 for(var i = 0, l = props.length;i < l;i ++){ - 46 var p = props[i]; - 47 PROPS.push(p); - 48 PROPS.push(p + "Var"); - 49 } - 50 - 51 //粒子默认值 - 52 var PROPS_DEFAULT = { - 53 x: 0, - 54 y: 0, - 55 vx: 0, - 56 vy: 0, - 57 ax: 0, - 58 ay: 0, - 59 scale:1, - 60 scaleV:0, - 61 alpha:1, - 62 alphaV:0, - 63 rotation: 0, - 64 rotationV: 0, - 65 life: 1 - 66 }; - 67 - 68 var diedParticles = []; - 69 - 70 var ParticleSystem = Class.create(/** @lends ParticleSystem.prototype */{ - 71 Extends:Container, - 72 constructor:function ParticleSystem(properties){ - 73 this.id = this.id || properties.id || Hilo.getUid("ParticleSystem"); - 74 - 75 this.emitterX = 0; - 76 this.emitterY = 0; - 77 - 78 this.gx = 0; - 79 this.gy = 0; - 80 this.totalTime = Infinity; - 81 - 82 this.emitNum = 10; - 83 this.emitNumVar = 0; - 84 - 85 this.emitTime = .2; - 86 this.emitTimeVar = 0; - 87 - 88 this.particle = {}; - 89 - 90 ParticleSystem.superclass.constructor.call(this, properties); - 91 - 92 this.reset(properties); - 93 }, - 94 Statics:{ - 95 PROPS:PROPS, - 96 PROPS_DEFAULT:PROPS_DEFAULT, - 97 diedParticles:diedParticles - 98 }, - 99 /** -100 * 重置属性 -101 * @param {Object} cfg -102 */ -103 reset: function(cfg) { -104 Hilo.copy(this, cfg); -105 this.particle.system = this; -106 if(this.totalTime <= 0){ -107 this.totalTime = Infinity; -108 } -109 }, -110 /** -111 * 更新 -112 * @param {Number} dt 间隔时间 单位ms -113 */ -114 onUpdate: function(dt) { -115 dt *= .001; -116 if (this._isRun) { -117 this._totalRunTime += dt; -118 this._currentRunTime += dt; -119 if (this._currentRunTime >= this._emitTime) { -120 this._currentRunTime = 0; -121 this._emitTime = getRandomValue(this.emitTime, this.emitTimeVar); -122 this._emit(); -123 } -124 -125 if (this._totalRunTime >= this.totalTime) { -126 this.stop(); -127 } -128 } -129 }, -130 /** -131 * 发射粒子 -132 */ -133 _emit: function() { -134 var num = getRandomValue(this.emitNum, this.emitNumVar)>>0; -135 for (var i = 0; i < num; i++) { -136 this.addChild(Particle.create(this.particle)); -137 } -138 }, -139 /** -140 * 开始 -141 */ -142 start: function() { -143 this.stop(true); -144 this._currentRunTime = 0; -145 this._totalRunTime = 0; -146 this._isRun = true; -147 this._emitTime = getRandomValue(this.emitTime, this.emitTimeVar); -148 }, -149 /** -150 * 停止 -151 * @param {Boolean} clear 是否清除所有粒子 -152 */ -153 stop: function(clear) { -154 this.isRun = false; -155 if (clear) { -156 for (var i = this.children.length - 1; i >= 0; i--) { -157 this.children[i].destroy(); -158 } -159 } -160 } -161 }); -162 -163 /** -164 * @class 粒子 -165 * @inner -166 * @param {Number} vx x速度 -167 * @param {Number} vy y速度 -168 * @param {Number} ax x加速度 -169 * @param {Number} ay y加速度 -170 * @param {Number} scaleV 缩放变化速度 -171 * @param {Number} alphaV 透明度变换速度 -172 * @param {Number} rotationV 旋转速度 -173 * @param {Number} life 存活时间 -174 */ -175 var Particle = Class.create({ -176 Extends:View, -177 constructor:function Particle(properties){ -178 this.id = this.id || properties.id || Hilo.getUid("Particle"); -179 Particle.superclass.constructor.call(this, properties); -180 this.init(properties); -181 }, -182 /** -183 * 更新 -184 */ -185 onUpdate: function(dt) { -186 dt *= .001; -187 if(this._died){ -188 return; -189 } -190 var ax = this.ax + this.system.gx; -191 var ay = this.ay + this.system.gy; -192 -193 this.vx += ax * dt; -194 this.vy += ay * dt; -195 this.x += this.vx * dt; -196 this.y += this.vy * dt; -197 -198 this.rotation += this.rotationV; -199 -200 if (this._time > .1) { -201 this.alpha += this.alphaV; -202 } -203 -204 this.scale += this.scaleV; -205 this.scaleX = this.scaleY = this.scale; -206 -207 this._time += dt; -208 if (this._time >= this.life || this.alpha < 0) { -209 this.destroy(); -210 } -211 }, -212 /** -213 * 设置图像 -214 */ -215 setImage: function(img, frame) { -216 this.drawable = this.drawable||new Drawable(); -217 var frame = frame || [0, 0, img.width, img.height]; -218 -219 this.width = frame[2]; -220 this.height = frame[3]; -221 this.drawable.rect = frame; -222 this.drawable.image = img; -223 }, -224 /** -225 * 销毁 -226 */ -227 destroy: function() { -228 this.died = true; -229 this.removeFromParent(); -230 diedParticles.push(this); -231 }, -232 /** -233 * 初始化 -234 */ -235 init: function(cfg) { -236 this.system = cfg.system; -237 this._died = false; -238 this._time = 0; -239 this.alpha = 1; -240 for (var i = 0, l = PROPS.length; i < l; i++) { -241 var p = PROPS[i]; -242 var v = cfg[p] === undefined ? PROPS_DEFAULT[p] : cfg[p]; -243 this[p] = getRandomValue(v, cfg[p + 'Var']); -244 } -245 -246 this.x += this.system.emitterX; -247 this.y += this.system.emitterY; -248 -249 if (cfg.image) { -250 var frame = cfg.frame; -251 if(frame && frame[0].length){ -252 frame = frame[(Math.random() * frame.length) >> 0]; -253 } -254 this.setImage(cfg.image, frame); -255 if(cfg.pivotX !== undefined){ -256 this.pivotX = cfg.pivotX * frame[2]; -257 } -258 if(cfg.pivotY !== undefined){ -259 this.pivotY = cfg.pivotY * frame[3]; -260 } -261 } -262 }, -263 Statics:{ -264 /** -265 * 生成粒子 -266 * @param {Object} cfg -267 */ -268 create:function(cfg) { -269 if (diedParticles.length > 0) { -270 var particle = diedParticles.pop(); -271 particle.init(cfg); -272 return particle; -273 } else { -274 return new Particle(cfg); -275 } -276 } -277 } -278 -279 }); -280 -281 function getRandomValue(value, variances){ -282 return variances ? value + (Math.random() - .5) * 2 * variances : value; -283 } -284 -285 return ParticleSystem; -286 })();\ No newline at end of file diff --git a/docs/api/symbols/src/src_geom_Matrix.js.html b/docs/api/symbols/src/src_geom_Matrix.js.html deleted file mode 100644 index 6ed84d5e..00000000 --- a/docs/api/symbols/src/src_geom_Matrix.js.html +++ /dev/null @@ -1,165 +0,0 @@ -
1 /** - 2 * Hilo - 3 * Copyright 2015 alibaba.com - 4 * Licensed under the MIT License - 5 */ - 6 - 7 /** - 8 * @class Matrix类表示一个转换矩阵，它确定如何将点从一个坐标空间映射到另一个坐标空间。 - 9 * @param {Number} a 缩放或旋转图像时影响像素沿 x 轴定位的值。 - 10 * @param {Number} b 旋转或倾斜图像时影响像素沿 y 轴定位的值。 - 11 * @param {Number} c 旋转或倾斜图像时影响像素沿 x 轴定位的值。 - 12 * @param {Number} d 缩放或旋转图像时影响像素沿 y 轴定位的值。 - 13 * @param {Number} tx 沿 x 轴平移每个点的距离。 - 14 * @param {Number} ty 沿 y 轴平移每个点的距离。 - 15 * @module hilo/geom/Matrix - 16 * @requires hilo/core/Class - 17 */ - 18 var Matrix = Class.create(/** @lends Matrix.prototype */{ - 19 constructor: function(a, b, c, d, tx, ty){ - 20 this.a = a; - 21 this.b = b; - 22 this.c = c; - 23 this.d = d; - 24 this.tx = tx; - 25 this.ty = ty; - 26 }, - 27 - 28 /** - 29 * 将某个矩阵与当前矩阵连接，从而将这两个矩阵的几何效果有效地结合在一起。 - 30 * @param {Matrix} mtx 要连接到源矩阵的矩阵。 - 31 * @returns {Matrix} 一个Matrix对象。 - 32 */ - 33 concat: function(mtx){ - 34 var args = arguments, - 35 a = this.a, b = this.b, c = this.c, d = this.d, - 36 tx = this.tx, ty = this.ty; - 37 - 38 if(args.length >= 6){ - 39 var ma = args[0], mb = args[1], mc = args[2], - 40 md = args[3], mx = args[4], my = args[5]; - 41 }else{ - 42 ma = mtx.a; - 43 mb = mtx.b; - 44 mc = mtx.c; - 45 md = mtx.d; - 46 mx = mtx.tx; - 47 my = mtx.ty; - 48 } - 49 - 50 this.a = a * ma + b * mc; - 51 this.b = a * mb + b * md; - 52 this.c = c * ma + d * mc; - 53 this.d = c * mb + d * md; - 54 this.tx = tx * ma + ty * mc + mx; - 55 this.ty = tx * mb + ty * md + my; - 56 return this; - 57 }, - 58 - 59 /** - 60 * 对 Matrix 对象应用旋转转换。 - 61 * @param {Number} angle 旋转的角度。 - 62 * @returns {Matrix} 一个Matrix对象。 - 63 */ - 64 rotate: function(angle){ - 65 var sin = Math.sin(angle), cos = Math.cos(angle), - 66 a = this.a, b = this.b, c = this.c, d = this.d, - 67 tx = this.tx, ty = this.ty; - 68 - 69 this.a = a * cos - b * sin; - 70 this.b = a * sin + b * cos; - 71 this.c = c * cos - d * sin; - 72 this.d = c * sin + d * cos; - 73 this.tx = tx * cos - ty * sin; - 74 this.ty = tx * sin + ty * cos; - 75 return this; - 76 }, - 77 - 78 /** - 79 * 对矩阵应用缩放转换。 - 80 * @param {Number} sx 用于沿 x 轴缩放对象的乘数。 - 81 * @param {Number} sy 用于沿 y 轴缩放对象的乘数。 - 82 * @returns {Matrix} 一个Matrix对象。 - 83 */ - 84 scale: function(sx, sy){ - 85 this.a *= sx; - 86 this.d *= sy; - 87 this.c *= sx; - 88 this.b *= sy; - 89 this.tx *= sx; - 90 this.ty *= sy; - 91 return this; - 92 }, - 93 - 94 /** - 95 * 沿 x 和 y 轴平移矩阵，由 dx 和 dy 参数指定。 - 96 * @param {Number} dx 沿 x 轴向右移动的量（以像素为单位）。 - 97 * @param {Number} dy 沿 y 轴向右移动的量（以像素为单位）。 - 98 * @returns {Matrix} 一个Matrix对象。 - 99 */ -100 translate: function(dx, dy){ -101 this.tx += dx; -102 this.ty += dy; -103 return this; -104 }, -105 -106 /** -107 * 为每个矩阵属性设置一个值，该值将导致 null 转换。通过应用恒等矩阵转换的对象将与原始对象完全相同。 -108 * @returns {Matrix} 一个Matrix对象。 -109 */ -110 identity: function(){ -111 this.a = this.d = 1; -112 this.b = this.c = this.tx = this.ty = 0; -113 return this; -114 }, -115 -116 /** -117 * 执行原始矩阵的逆转换。您可以将一个逆矩阵应用于对象来撤消在应用原始矩阵时执行的转换。 -118 * @returns {Matrix} 一个Matrix对象。 -119 */ -120 invert: function(){ -121 var a = this.a; -122 var b = this.b; -123 var c = this.c; -124 var d = this.d; -125 var tx = this.tx; -126 var i = a * d - b * c; -127 -128 this.a = d / i; -129 this.b = -b / i; -130 this.c = -c / i; -131 this.d = a / i; -132 this.tx = (c * this.ty - d * tx) / i; -133 this.ty = -(a * this.ty - b * tx) / i; -134 return this; -135 }, -136 -137 /** -138 * 返回将 Matrix 对象表示的几何转换应用于指定点所产生的结果。 -139 * @param {Object} point 想要获得其矩阵转换结果的点。 -140 * @param {Boolean} round 是否对点的坐标进行向上取整。 -141 * @param {Boolean} returnNew 是否返回一个新的点。 -142 * @returns {Object} 由应用矩阵转换所产生的点。 -143 */ -144 transformPoint: function(point, round, returnNew){ -145 var x = point.x * this.a + point.y * this.c + this.tx, -146 y = point.x * this.b + point.y * this.d + this.ty; -147 -148 if(round){ -149 x = x + 0.5 >> 0; -150 y = y + 0.5 >> 0; -151 } -152 if(returnNew) return {x:x, y:y}; -153 point.x = x; -154 point.y = y; -155 return point; -156 } -157 -158 });\ No newline at end of file diff --git a/docs/api/symbols/src/src_loader_ImageLoader.js.html b/docs/api/symbols/src/src_loader_ImageLoader.js.html deleted file mode 100644 index 07b67948..00000000 --- a/docs/api/symbols/src/src_loader_ImageLoader.js.html +++ /dev/null @@ -1,50 +0,0 @@ -
1 /** - 2 * Hilo - 3 * Copyright 2015 alibaba.com - 4 * Licensed under the MIT License - 5 */ - 6 - 7 /** - 8 * @private - 9 * @class 图片资源加载器。 - 10 * @module hilo/loader/ImageLoader - 11 * @requires hilo/core/Class - 12 */ - 13 var ImageLoader = Class.create({ - 14 load: function(data){ - 15 var me = this; - 16 - 17 var image = new Image(); - 18 if(data.crossOrigin){ - 19 image.crossOrigin = data.crossOrigin; - 20 } - 21 - 22 image.onload = //me.onLoad.bind(image); - 23 function(){ - 24 me.onLoad(image) - 25 }; - 26 image.onerror = image.onabort = me.onError.bind(image); - 27 image.src = data.src + (data.noCache ? (data.src.indexOf('?') == -1 ? '?' : '&') + 't=' + (+new Date) : ''); - 28 }, - 29 - 30 onLoad: function(e){ - 31 e = e||window.event; - 32 var image = e//e.target; - 33 image.onload = image.onerror = image.onabort = null; - 34 return image; - 35 }, - 36 - 37 onError: function(e){ - 38 var image = e.target; - 39 image.onload = image.onerror = image.onabort = null; - 40 return e; - 41 } - 42 - 43 });\ No newline at end of file diff --git a/docs/api/symbols/src/src_loader_LoadQueue.js.html b/docs/api/symbols/src/src_loader_LoadQueue.js.html deleted file mode 100644 index 3ab63ebe..00000000 --- a/docs/api/symbols/src/src_loader_LoadQueue.js.html +++ /dev/null @@ -1,231 +0,0 @@ -
1 /** - 2 * Hilo - 3 * Copyright 2015 alibaba.com - 4 * Licensed under the MIT License - 5 */ - 6 - 7 //TODO: 超时timeout，失败重连次数maxTries，更多的下载器Loader，队列暂停恢复等。 - 8 - 9 /** - 10 * @class LoadQueue是一个队列下载工具。 - 11 * @param {Object} source 要下载的资源。可以是单个资源对象或多个资源的数组。 - 12 * @module hilo/loader/LoadQueue - 13 * @requires hilo/core/Class - 14 * @requires hilo/event/EventMixin - 15 * @requires hilo/loader/ImageLoader - 16 * @requires hilo/loader/ScriptLoader - 17 * @property {Int} maxConnections 同时下载的最大连接数。默认为2。 - 18 */ - 19 var LoadQueue = Class.create(/** @lends LoadQueue.prototype */{ - 20 Mixes: EventMixin, - 21 constructor: function(source){ - 22 this._source = []; - 23 this.add(source); - 24 }, - 25 - 26 maxConnections: 2, //TODO: 应该是每个host的最大连接数。 - 27 - 28 _source: null, - 29 _loaded: 0, - 30 _connections: 0, - 31 _currentIndex: -1, - 32 - 33 /** - 34 * 增加要下载的资源。可以是单个资源对象或多个资源的数组。 - 35 * @param {Object|Array} source 资源对象或资源对象数组。每个资源对象包含以下属性： - 36 * <ul> - 37 * <li><b>id</b> - 资源的唯一标识符。可用于从下载队列获取目标资源。</li> - 38 * <li><b>src</b> - 资源的地址url。</li> - 39 * <li><b>type</b> - 指定资源的类型。默认会根据资源文件的后缀来自动判断类型，不同的资源类型会使用不同的加载器来加载资源。</li> - 40 * <li><b>loader</b> - 指定资源的加载器。默认会根据资源类型来自动选择加载器，若指定loader，则会使用指定的loader来加载资源。</li> - 41 * <li><b>noCache</b> - 指示加载资源时是否增加时间标签以防止缓存。</li> - 42 * <li><b>size</b> - 资源对象的预计大小。可用于预估下载进度。</li> - 43 * </ul> - 44 * @returns {LoadQueue} 下载队列实例本身。 - 45 */ - 46 add: function(source){ - 47 var me = this; - 48 if(source){ - 49 source = source instanceof Array ? source : [source]; - 50 me._source = me._source.concat(source); - 51 } - 52 return me; - 53 }, - 54 - 55 /** - 56 * 根据id或src地址获取资源对象。 - 57 * @param {String} id 指定资源的id或src。 - 58 * @returns {Object} 资源对象。 - 59 */ - 60 get: function(id){ - 61 if(id){ - 62 var source = this._source; - 63 for(var i = 0; i < source.length; i++){ - 64 var item = source[i]; - 65 if(item.id === id || item.src === id){ - 66 return item; - 67 } - 68 } - 69 } - 70 return null; - 71 }, - 72 - 73 /** - 74 * 根据id或src地址获取资源内容。 - 75 * @param {String} id 指定资源的id或src。 - 76 * @returns {Object} 资源内容。 - 77 */ - 78 getContent: function(id){ - 79 var item = this.get(id); - 80 return item && item.content; - 81 }, - 82 - 83 /** - 84 * 开始下载队列。 - 85 * @returns {LoadQueue} 下载队列实例本身。 - 86 */ - 87 start: function(){ - 88 var me = this; - 89 me._loadNext(); - 90 return me; - 91 }, - 92 - 93 /** - 94 * @private - 95 */ - 96 _loadNext: function(){ - 97 var me = this, source = me._source, len = source.length; - 98 - 99 //all items loaded -100 if(me._loaded >= len){ -101 me.fire('complete'); -102 return; -103 } -104 -105 if(me._currentIndex < len - 1 && me._connections < me.maxConnections){ -106 var index = ++me._currentIndex; -107 var item = source[index]; -108 var loader = me._getLoader(item); -109 -110 if(loader){ -111 var onLoad = loader.onLoad, onError = loader.onError; -112 -113 loader.onLoad = function(e){ -114 loader.onLoad = onLoad; -115 loader.onError = onError; -116 var content = onLoad && onLoad.call(loader, e) || e.target; -117 me._onItemLoad(index, content); -118 }; -119 loader.onError = function(e){ -120 loader.onLoad = onLoad; -121 loader.onError = onError; -122 onError && onError.call(loader, e); -123 me._onItemError(index, e); -124 }; -125 me._connections++; -126 } -127 -128 me._loadNext(); -129 loader && loader.load(item); -130 } -131 }, -132 -133 /** -134 * @private -135 */ -136 _getLoader: function(item){ -137 var me = this, loader = item.loader; -138 if(loader) return loader; -139 -140 var type = item.type || getExtension(item.src); -141 -142 switch(type){ -143 case 'png': -144 case 'jpg': -145 case 'jpeg': -146 case 'gif': -147 loader = new ImageLoader(); -148 break; -149 case 'js': -150 case 'jsonp': -151 loader = new ScriptLoader(); -152 break; -153 } -154 -155 return loader; -156 }, -157 -158 /** -159 * @private -160 */ -161 _onItemLoad: function(index, content){ -162 var me = this, item = me._source[index]; -163 item.loaded = true; -164 item.content = content; -165 me._connections--; -166 me._loaded++; -167 me.fire('load', item); -168 me._loadNext(); -169 }, -170 -171 /** -172 * @private -173 */ -174 _onItemError: function(index, e){ -175 var me = this, item = me._source[index]; -176 item.error = e; -177 me._connections--; -178 me._loaded++; -179 me.fire('error', item); -180 me._loadNext(); -181 }, -182 -183 /** -184 * 获取全部或已下载的资源的字节大小。 -185 * @param {Boolean} loaded 指示是已下载的资源还是全部资源。默认为全部。 -186 * @returns {Number} 指定资源的字节大小。 -187 */ -188 getSize: function(loaded){ -189 var size = 0, source = this._source; -190 for(var i = 0; i < source.length; i++){ -191 var item = source[i]; -192 size += (loaded ? item.loaded && item.size : item.size) || 0; -193 } -194 return size; -195 }, -196 -197 /** -198 * 获取已下载的资源数量。 -199 * @returns {Uint} 已下载的资源数量。 -200 */ -201 getLoaded: function(){ -202 return this._loaded; -203 }, -204 -205 /** -206 * 获取所有资源的数量。 -207 * @returns {Uint} 所有资源的数量。 -208 */ -209 getTotal: function(){ -210 return this._source.length; -211 } -212 -213 }); -214 -215 /** -216 * @private -217 */ -218 function getExtension(src){ -219 var extRegExp = /\/?[^/]+\.(\w+)(\?\S+)?$/i, match, extension; -220 if(match = src.match(extRegExp)){ -221 extension = match[1].toLowerCase(); -222 } -223 return extension || null; -224 }\ No newline at end of file diff --git a/docs/api/symbols/src/src_loader_ScriptLoader.js.html b/docs/api/symbols/src/src_loader_ScriptLoader.js.html deleted file mode 100644 index 622b0508..00000000 --- a/docs/api/symbols/src/src_loader_ScriptLoader.js.html +++ /dev/null @@ -1,65 +0,0 @@ -
1 /** - 2 * Hilo - 3 * Copyright 2015 alibaba.com - 4 * Licensed under the MIT License - 5 */ - 6 - 7 /** - 8 * @private - 9 * @class javascript或JSONP加载器。 - 10 * @module hilo/loader/ScriptLoader - 11 * @requires hilo/core/Class - 12 */ - 13 var ScriptLoader = Class.create({ - 14 load: function(data){ - 15 var me = this, src = data.src, isJSONP = data.type == 'jsonp'; - 16 - 17 if(isJSONP){ - 18 var callbackName = data.callbackName || 'callback'; - 19 var callback = data.callback || 'jsonp' + (++ScriptLoader._count); - 20 var win = window; - 21 - 22 if(!win[callback]){ - 23 win[callback] = function(result){ - 24 delete win[callback]; - 25 } - 26 } - 27 } - 28 - 29 if(isJSONP) src += (src.indexOf('?') == -1 ? '?' : '&') + callbackName + '=' + callback; - 30 if(data.noCache) src += (src.indexOf('?') == -1 ? '?' : '&') + 't=' + (+new Date()); - 31 - 32 var script = document.createElement('script'); - 33 script.type = 'text/javascript'; - 34 script.async = true; - 35 script.onload = me.onLoad.bind(me); - 36 script.onerror = me.onError.bind(me); - 37 script.src = src; - 38 if(data.id) script.id = data.id; - 39 document.getElementsByTagName('head')[0].appendChild(script); - 40 }, - 41 - 42 onLoad: function(e){ - 43 var script = e.target; - 44 script.onload = script.onerror = null; - 45 return script; - 46 }, - 47 - 48 onError: function(e){ - 49 var script = e.target; - 50 script.onload = script.onerror = null; - 51 return e; - 52 }, - 53 - 54 Statics: { - 55 _count: 0 - 56 } - 57 - 58 });\ No newline at end of file diff --git a/docs/api/symbols/src/src_media_HTMLAudio.js.html b/docs/api/symbols/src/src_media_HTMLAudio.js.html deleted file mode 100644 index 9537752f..00000000 --- a/docs/api/symbols/src/src_media_HTMLAudio.js.html +++ /dev/null @@ -1,191 +0,0 @@ -
1 /** - 2 * Hilo - 3 * Copyright 2015 alibaba.com - 4 * Licensed under the MIT License - 5 */ - 6 - 7 /** - 8 * @class HTMLAudio声音播放模块。此模块使用HTMLAudioElement播放音频。 - 9 * 使用限制：iOS平台需用户事件触发才能播放，很多Android浏览器仅能同时播放一个音频。 - 10 * @param {Object} properties 创建对象的属性参数。可包含此类所有可写属性。 - 11 * @module hilo/media/HTMLAudio - 12 * @requires hilo/core/Hilo - 13 * @requires hilo/core/Class - 14 * @requires hilo/event/EventMixin - 15 * @property {String} src 播放的音频的资源地址。 - 16 * @property {Boolean} loop 是否循环播放。默认为false。 - 17 * @property {Boolean} autoPlay 是否自动播放。默认为false。 - 18 * @property {Boolean} loaded 音频资源是否已加载完成。只读属性。 - 19 * @property {Boolean} playing 是否正在播放音频。只读属性。 - 20 * @property {Number} duration 音频的时长。只读属性。 - 21 * @property {Number} volume 音量的大小。取值范围：0-1。 - 22 * @property {Boolean} muted 是否静音。默认为false。 - 23 */ - 24 var HTMLAudio = Class.create(/** @lends HTMLAudio.prototype */{ - 25 Mixes: EventMixin, - 26 constructor: function(properties){ - 27 Hilo.copy(this, properties, true); - 28 - 29 this._onAudioEvent = this._onAudioEvent.bind(this); - 30 }, - 31 - 32 src: null, - 33 loop: false, - 34 autoPlay: false, - 35 loaded: false, - 36 playing: false, - 37 duration: 0, - 38 volume: 1, - 39 muted: false, - 40 - 41 _element: null, //HTMLAudioElement对象 - 42 - 43 /** - 44 * 加载音频文件。 - 45 */ - 46 load: function(){ - 47 if(!this._element){ - 48 try{ - 49 var elem = this._element = new Audio(); - 50 elem.addEventListener('canplaythrough', this._onAudioEvent, false); - 51 elem.addEventListener('ended', this._onAudioEvent, false); - 52 elem.addEventListener('error', this._onAudioEvent, false); - 53 elem.src = this.src; - 54 elem.volume = this.volume; - 55 elem.load(); - 56 } - 57 catch(err){ - 58 //ie9 某些版本有Audio对象，但是执行play,pause会报错！ - 59 var elem = this._element = {}; - 60 elem.play = elem.pause = function(){ - 61 - 62 }; - 63 } - 64 } - 65 return this; - 66 }, - 67 - 68 /** - 69 * @private - 70 */ - 71 _onAudioEvent: function(e){ - 72 // console.log('onAudioEvent:', e.type); - 73 var type = e.type; - 74 - 75 switch(type){ - 76 case 'canplaythrough': - 77 e.target.removeEventListener(type, this._onAudioEvent); - 78 this.loaded = true; - 79 this.duration = this._element.duration; - 80 this.fire('load'); - 81 if(this.autoPlay) this._doPlay(); - 82 break; - 83 case 'ended': - 84 this.playing = false; - 85 this.fire('end'); - 86 if(this.loop) this._doPlay(); - 87 break; - 88 case 'error': - 89 this.fire('error'); - 90 break; - 91 } - 92 }, - 93 - 94 /** - 95 * @private - 96 */ - 97 _doPlay: function(){ - 98 if(!this.playing){ - 99 this._element.volume = this.muted ? 0 : this.volume; -100 this._element.play(); -101 this.playing = true; -102 } -103 }, -104 -105 /** -106 * 播放音频。如果正在播放，则会重新开始。 -107 * 注意：为了避免第一次播放不成功，建议在load音频后再播放。 -108 */ -109 play: function(){ -110 if(this.playing) this.stop(); -111 -112 if(!this._element){ -113 this.autoPlay = true; -114 this.load(); -115 }else if(this.loaded){ -116 this._doPlay(); -117 } -118 -119 return this; -120 }, -121 -122 /** -123 * 暂停音频。 -124 */ -125 pause: function(){ -126 if(this.playing){ -127 this._element.pause(); -128 this.playing = false; -129 } -130 return this; -131 }, -132 -133 /** -134 * 恢复音频播放。 -135 */ -136 resume: function(){ -137 if(!this.playing){ -138 this._doPlay(); -139 } -140 return this; -141 }, -142 -143 /** -144 * 停止音频播放。 -145 */ -146 stop: function(){ -147 if(this.playing){ -148 this._element.pause(); -149 this._element.currentTime = 0; -150 this.playing = false; -151 } -152 return this; -153 }, -154 -155 /** -156 * 设置音量。注意: iOS设备无法设置音量。 -157 */ -158 setVolume: function(volume){ -159 if(this.volume != volume){ -160 this.volume = volume; -161 this._element.volume = volume; -162 } -163 return this; -164 }, -165 -166 /** -167 * 设置静音模式。注意: iOS设备无法设置静音模式。 -168 */ -169 setMute: function(muted){ -170 if(this.muted != muted){ -171 this.muted = muted; -172 this._element.volume = muted ? 0 : this.volume; -173 } -174 return this; -175 }, -176 -177 Statics: /** @lends HTMLAudio */ { -178 /** -179 * 浏览器是否支持HTMLAudio。 -180 */ -181 isSupported: window.Audio !== null -182 } -183 -184 });\ No newline at end of file diff --git a/docs/api/symbols/src/src_media_WebAudio.js.html b/docs/api/symbols/src/src_media_WebAudio.js.html deleted file mode 100644 index 691cc79f..00000000 --- a/docs/api/symbols/src/src_media_WebAudio.js.html +++ /dev/null @@ -1,276 +0,0 @@ -
1 /** - 2 * Hilo - 3 * Copyright 2015 alibaba.com - 4 * Licensed under the MIT License - 5 */ - 6 - 7 /** - 8 * @class WebAudio声音播放模块。它具有更好的声音播放和控制能力，适合在iOS6+平台使用。 - 9 * 兼容情况：iOS6+、Chrome33+、Firefox28+支持，但Android浏览器均不支持。 - 10 * @param {Object} properties 创建对象的属性参数。可包含此类所有可写属性。 - 11 * @module hilo/media/WebAudio - 12 * @requires hilo/core/Hilo - 13 * @requires hilo/core/Class - 14 * @requires hilo/event/EventMixin - 15 * @property {String} src 播放的音频的资源地址。 - 16 * @property {Boolean} loop 是否循环播放。默认为false。 - 17 * @property {Boolean} autoPlay 是否自动播放。默认为false。 - 18 * @property {Boolean} loaded 音频资源是否已加载完成。只读属性。 - 19 * @property {Boolean} playing 是否正在播放音频。只读属性。 - 20 * @property {Number} duration 音频的时长。只读属性。 - 21 * @property {Number} volume 音量的大小。取值范围：0-1。 - 22 * @property {Boolean} muted 是否静音。默认为false。 - 23 */ - 24 var WebAudio = (function(){ - 25 - 26 var AudioContext = window.AudioContext || window.webkitAudioContext; - 27 var context = AudioContext ? new AudioContext() : null; - 28 - 29 return Class.create(/** @lends WebAudio.prototype */{ - 30 Mixes: EventMixin, - 31 constructor: function(properties){ - 32 Hilo.copy(this, properties, true); - 33 - 34 this._init(); - 35 }, - 36 - 37 src: null, - 38 loop: false, - 39 autoPlay: false, - 40 loaded: false, - 41 playing: false, - 42 duration: 0, - 43 volume: 1, - 44 muted: false, - 45 - 46 _context: null, //WebAudio上下文 - 47 _gainNode: null, //音量控制器 - 48 _buffer: null, //音频缓冲文件 - 49 _audioNode: null, //音频播放器 - 50 _startTime: 0, //开始播放时间戳 - 51 _offset: 0, //播放偏移量 - 52 - 53 /** - 54 * @private 初始化 - 55 */ - 56 _init:function(){ - 57 this._context = context; - 58 this._gainNode = context.createGain ? context.createGain() : context.createGainNode(); - 59 this._gainNode.connect(context.destination); - 60 - 61 this._onAudioEvent = this._onAudioEvent.bind(this); - 62 this._onDecodeComplete = this._onDecodeComplete.bind(this); - 63 this._onDecodeError = this._onDecodeError.bind(this); - 64 }, - 65 /** - 66 * 加载音频文件。注意：我们使用XMLHttpRequest进行加载，因此需要注意跨域问题。 - 67 */ - 68 load: function(){ - 69 if(!this._buffer){ - 70 var request = new XMLHttpRequest(); - 71 request.src = this.src; - 72 request.open('GET', this.src, true); - 73 request.responseType = 'arraybuffer'; - 74 request.onload = this._onAudioEvent; - 75 request.onprogress = this._onAudioEvent; - 76 request.onerror = this._onAudioEvent; - 77 request.send(); - 78 this._buffer = true; - 79 } - 80 return this; - 81 }, - 82 - 83 /** - 84 * @private - 85 */ - 86 _onAudioEvent: function(e){ - 87 // console.log('onAudioEvent:', e.type); - 88 var type = e.type; - 89 - 90 switch(type){ - 91 case 'load': - 92 var request = e.target; - 93 request.onload = request.onprogress = request.onerror = null; - 94 this._context.decodeAudioData(request.response, this._onDecodeComplete, this._onDecodeError); - 95 request = null; - 96 break; - 97 case 'ended': - 98 this.playing = false; - 99 this.fire('end'); -100 if(this.loop) this._doPlay(); -101 break; -102 case 'progress': -103 this.fire(e); -104 break; -105 case 'error': -106 this.fire(e); -107 break; -108 } -109 }, -110 -111 /** -112 * @private -113 */ -114 _onDecodeComplete: function(audioBuffer){ -115 this._buffer = audioBuffer; -116 this.loaded = true; -117 this.duration = audioBuffer.duration; -118 // console.log('onDecodeComplete:', audioBuffer.duration); -119 this.fire('load'); -120 if(this.autoPlay) this._doPlay(); -121 }, -122 -123 /** -124 * @private -125 */ -126 _onDecodeError: function(){ -127 this.fire('error'); -128 }, -129 -130 /** -131 * @private -132 */ -133 _doPlay: function(){ -134 this._clearAudioNode(); -135 -136 var audioNode = this._context.createBufferSource(); -137 -138 //some old browser are noteOn/noteOff -> start/stop -139 if(!audioNode.start){ -140 audioNode.start = audioNode.noteOn; -141 audioNode.stop = audioNode.noteOff; -142 } -143 -144 audioNode.buffer = this._buffer; -145 audioNode.onended = this._onAudioEvent; -146 this._gainNode.gain.value = this.muted ? 0 : this.volume; -147 audioNode.connect(this._gainNode); -148 audioNode.start(0, this._offset); -149 -150 this._audioNode = audioNode; -151 this._startTime = this._context.currentTime; -152 this.playing = true; -153 }, -154 -155 /** -156 * @private -157 */ -158 _clearAudioNode: function(){ -159 var audioNode = this._audioNode; -160 if(audioNode){ -161 audioNode.onended = null; -162 // audioNode.disconnect(this._gainNode); -163 audioNode.disconnect(0); -164 this._audioNode = null; -165 } -166 }, -167 -168 /** -169 * 播放音频。如果正在播放，则会重新开始。 -170 */ -171 play: function(){ -172 if(this.playing) this.stop(); -173 -174 if(this.loaded){ -175 this._doPlay(); -176 }else if(!this._buffer){ -177 this.autoPlay = true; -178 this.load(); -179 } -180 -181 return this; -182 }, -183 -184 /** -185 * 暂停音频。 -186 */ -187 pause: function(){ -188 if(this.playing){ -189 this._audioNode.stop(0); -190 this._offset += this._context.currentTime - this._startTime; -191 this.playing = false; -192 } -193 return this; -194 }, -195 -196 /** -197 * 恢复音频播放。 -198 */ -199 resume: function(){ -200 if(!this.playing){ -201 this._doPlay(); -202 } -203 return this; -204 }, -205 -206 /** -207 * 停止音频播放。 -208 */ -209 stop: function(){ -210 if(this.playing){ -211 this._audioNode.stop(0); -212 this._audioNode.disconnect(); -213 this._offset = 0; -214 this.playing = false; -215 } -216 return this; -217 }, -218 -219 /** -220 * 设置音量。 -221 */ -222 setVolume: function(volume){ -223 if(this.volume != volume){ -224 this.volume = volume; -225 this._gainNode.gain.value = volume; -226 } -227 return this; -228 }, -229 -230 /** -231 * 设置是否静音。 -232 */ -233 setMute: function(muted){ -234 if(this.muted != muted){ -235 this.muted = muted; -236 this._gainNode.gain.value = muted ? 0 : this.volume; -237 } -238 return this; -239 }, -240 -241 Statics: /** @lends WebAudio */ { -242 /** -243 * 浏览器是否支持WebAudio。 -244 */ -245 isSupported: AudioContext != null, -246 -247 /** -248 * 浏览器是否已激活WebAudio。 -249 */ -250 enabled: false, -251 -252 /** -253 * 激活WebAudio。注意：需用户事件触发此方法才有效。激活后，无需用户事件也可播放音频。 -254 */ -255 enable: function(){ -256 if(!this.enabled && context){ -257 var source = context.createBufferSource(); -258 source.buffer = context.createBuffer(1, 1, 22050); -259 source.connect(context.destination); -260 source.start ? source.start(0, 0, 0) : source.noteOn(0, 0, 0); -261 this.enabled = true; -262 return true; -263 } -264 return this.enabled; -265 } -266 } -267 }); -268 -269 })();\ No newline at end of file diff --git a/docs/api/symbols/src/src_media_WebSound.js.html b/docs/api/symbols/src/src_media_WebSound.js.html deleted file mode 100644 index 03d380bd..00000000 --- a/docs/api/symbols/src/src_media_WebSound.js.html +++ /dev/null @@ -1,93 +0,0 @@ -
1 /** - 2 * Hilo - 3 * Copyright 2015 alibaba.com - 4 * Licensed under the MIT License - 5 */ - 6 - 7 /** - 8 * <iframe src='../../../examples/WebSound.html?noHeader' width = '320' height = '310' scrolling='no'></iframe> - 9 * <br/> - 10 * 使用示例: - 11 * <pre> - 12 * var audio = WebSound.getAudio({ - 13 * src: 'test.mp3', - 14 * loop: false, - 15 * volume: 1 - 16 * }).on('load', function(e){ - 17 * console.log('load'); - 18 * }).on('end', function(e){ - 19 * console.log('end'); - 20 * }).play(); - 21 * </pre> - 22 * @class 声音播放管理器。 - 23 * @static - 24 * @module hilo/media/WebSound - 25 * @requires hilo/core/Hilo - 26 * @requires hilo/media/HTMLAudio - 27 * @requires hilo/media/WebAudio - 28 */ - 29 var WebSound = { - 30 _audios: {}, - 31 - 32 /** - 33 * 激活音频功能。注意：需用户事件触发此方法才有效。目前仅对WebAudio有效。 - 34 */ - 35 enableAudio: function(){ - 36 if(WebAudio.isSupported){ - 37 WebAudio.enable(); - 38 } - 39 }, - 40 - 41 /** - 42 * 获取音频对象。优先使用WebAudio。 - 43 * @param {String|Object} source 若source为String，则为音频src地址；若为Object，则需包含src属性。 - 44 * @returns {WebAudio|HTMLAudio} 音频播放对象实例。 - 45 */ - 46 getAudio: function(source){ - 47 source = this._normalizeSource(source); - 48 var audio = this._audios[source.src]; - 49 if(!audio){ - 50 if(WebAudio.isSupported){ - 51 audio = new WebAudio(source); - 52 }else if(HTMLAudio.isSupported){ - 53 audio = new HTMLAudio(source); - 54 } - 55 this._audios[source.src] = audio; - 56 } - 57 - 58 return audio; - 59 }, - 60 - 61 /** - 62 * 删除音频对象。 - 63 * @param {String|Object} source 若source为String，则为音频src地址；若为Object，则需包含src属性。 - 64 */ - 65 removeAudio: function(source){ - 66 var src = typeof source === 'string' ? source : source.src; - 67 var audio = this._audios[src]; - 68 if(audio){ - 69 audio.stop(); - 70 audio.off(); - 71 this._audios[src] = null; - 72 delete this._audios[src]; - 73 } - 74 }, - 75 - 76 /** - 77 * @private - 78 */ - 79 _normalizeSource: function(source){ - 80 var result = {}; - 81 if(typeof source === 'string') result = {src:source}; - 82 else Hilo.copy(result, source); - 83 return result; - 84 } - 85 - 86 };\ No newline at end of file diff --git a/docs/api/symbols/src/src_renderer_CanvasRenderer.js.html b/docs/api/symbols/src/src_renderer_CanvasRenderer.js.html deleted file mode 100644 index b853c335..00000000 --- a/docs/api/symbols/src/src_renderer_CanvasRenderer.js.html +++ /dev/null @@ -1,225 +0,0 @@ -
1 /** - 2 * Hilo - 3 * Copyright 2015 alibaba.com - 4 * Licensed under the MIT License - 5 */ - 6 - 7 /** - 8 * @class canvas画布渲染器。所有可视对象将渲染在canvas画布上。舞台Stage会根据参数canvas选择不同的渲染器，开发者无需直接使用此类。 - 9 * @augments Renderer - 10 * @param {Object} properties 创建对象的属性参数。可包含此类所有可写属性。 - 11 * @module hilo/renderer/CanvasRenderer - 12 * @requires hilo/core/Class - 13 * @requires hilo/core/Hilo - 14 * @requires hilo/renderer/Renderer - 15 * @property {CanvasRenderingContext2D} context canvas画布的上下文。只读属性。 - 16 */ - 17 var CanvasRenderer = Class.create(/** @lends CanvasRenderer.prototype */{ - 18 Extends: Renderer, - 19 constructor: function(properties){ - 20 CanvasRenderer.superclass.constructor.call(this, properties); - 21 - 22 this.context = this.canvas.getContext("2d"); - 23 }, - 24 renderType:'canvas', - 25 context: null, - 26 - 27 /** - 28 * @private - 29 * @see Renderer#startDraw - 30 */ - 31 startDraw: function(target){ - 32 if(target.visible && target.alpha > 0){ - 33 if(target === this.stage){ - 34 this.context.clearRect(0, 0, target.width, target.height); - 35 } - 36 this.context.save(); - 37 return true; - 38 } - 39 return false; - 40 }, - 41 - 42 /** - 43 * @private - 44 * @see Renderer#draw - 45 */ - 46 draw: function(target){ - 47 var ctx = this.context, w = target.width, h = target.height; - 48 - 49 //draw background - 50 var bg = target.background; - 51 if(bg){ - 52 ctx.fillStyle = bg; - 53 ctx.fillRect(0, 0, w, h); - 54 } - 55 - 56 //draw image - 57 var drawable = target.drawable, image = drawable && drawable.image; - 58 if(image){ - 59 var rect = drawable.rect, sw = rect[2], sh = rect[3], offsetX = rect[4], offsetY = rect[5]; - 60 //ie9+浏览器宽高为0时会报错 - 61 if(!sw || !sh){ - 62 return; - 63 } - 64 if(!w && !h){ - 65 //fix width/height TODO: how to get rid of this? - 66 w = target.width = sw; - 67 h = target.height = sh; - 68 } - 69 //the pivot is the center of frame if has offset, otherwise is (0, 0) - 70 if(offsetX || offsetY) ctx.translate(offsetX - sw * 0.5, offsetY - sh * 0.5); - 71 ctx.drawImage(image, rect[0], rect[1], sw, sh, 0, 0, w, h); - 72 } - 73 }, - 74 - 75 /** - 76 * @private - 77 * @see Renderer#endDraw - 78 */ - 79 endDraw: function(target){ - 80 this.context.restore(); - 81 }, - 82 - 83 /** - 84 * @private - 85 * @see Renderer#transform - 86 */ - 87 transform: function(target){ - 88 var drawable = target.drawable; - 89 if(drawable && drawable.domElement){ - 90 Hilo.setElementStyleByView(target); - 91 return; - 92 } - 93 - 94 var ctx = this.context, - 95 scaleX = target.scaleX, - 96 scaleY = target.scaleY; - 97 - 98 if(target === this.stage){ - 99 var style = this.canvas.style, -100 oldScaleX = target._scaleX, -101 oldScaleY = target._scaleY; -102 -103 if((!oldScaleX && scaleX != 1) || (oldScaleX && oldScaleX != scaleX)){ -104 target._scaleX = scaleX; -105 style.width = scaleX * target.width + "px"; -106 } -107 if((!oldScaleY && scaleY != 1) || (oldScaleY && oldScaleY != scaleY)){ -108 target._scaleY = scaleY; -109 style.height = scaleY * target.height + "px"; -110 } -111 }else{ -112 var x = target.x, -113 y = target.y, -114 pivotX = target.pivotX, -115 pivotY = target.pivotY, -116 rotation = target.rotation % 360, -117 mask = target.mask; -118 -119 if(mask){ -120 mask._render(this); -121 ctx.clip(); -122 } -123 -124 //alignment -125 var align = target.align; -126 if(align){ -127 if(typeof align === 'function'){ -128 target.align(); -129 }else{ -130 var parent = target.parent; -131 if(parent){ -132 var w = target.width, h = target.height, -133 pw = parent.width, ph = parent.height; -134 switch(align){ -135 case 'TL': -136 x = 0; -137 y = 0; -138 break; -139 case 'T': -140 x = pw - w >> 1; -141 y = 0; -142 break; -143 case 'TR': -144 x = pw - w; -145 y = 0; -146 break; -147 case 'L': -148 x = 0; -149 y = ph - h >> 1; -150 break; -151 case 'C': -152 x = pw - w >> 1; -153 y = ph - h >> 1; -154 break; -155 case 'R': -156 x = pw - w; -157 y = ph - h >> 1; -158 break; -159 case 'BL': -160 x = 0; -161 y = ph - h; -162 break; -163 case 'B': -164 x = pw - w >> 1; -165 y = ph - h; -166 break; -167 case 'BR': -168 x = pw - w; -169 y = ph - h; -170 break; -171 } -172 } -173 } -174 } -175 -176 if(x != 0 || y != 0) ctx.translate(x, y); -177 if(rotation != 0) ctx.rotate(rotation * Math.PI / 180); -178 if(scaleX != 1 || scaleY != 1) ctx.scale(scaleX, scaleY); -179 if(pivotX != 0 || pivotY != 0) ctx.translate(-pivotX, -pivotY); -180 } -181 -182 if(target.alpha > 0) ctx.globalAlpha *= target.alpha; -183 }, -184 -185 /** -186 * @private -187 * @see Renderer#remove -188 */ -189 remove: function(target){ -190 var drawable = target.drawable; -191 var elem = drawable && drawable.domElement; -192 -193 if(elem){ -194 var parentElem = elem.parentNode; -195 if(parentElem){ -196 parentElem.removeChild(elem); -197 } -198 } -199 }, -200 -201 /** -202 * @private -203 * @see Renderer#clear -204 */ -205 clear: function(x, y, width, height){ -206 this.context.clearRect(x, y, width, height); -207 }, -208 -209 /** -210 * @private -211 * @see Renderer#resize -212 */ -213 resize: function(width, height){ -214 this.canvas.width = width; -215 this.canvas.height = height; -216 } -217 -218 });\ No newline at end of file diff --git a/docs/api/symbols/src/src_renderer_DOMRenderer.js.html b/docs/api/symbols/src/src_renderer_DOMRenderer.js.html deleted file mode 100644 index b75cd361..00000000 --- a/docs/api/symbols/src/src_renderer_DOMRenderer.js.html +++ /dev/null @@ -1,180 +0,0 @@ -
1 /** - 2 * Hilo - 3 * Copyright 2015 alibaba.com - 4 * Licensed under the MIT License - 5 */ - 6 - 7 /** - 8 * @class DOM+CSS3渲染器。将可视对象以DOM元素方式渲染出来。舞台Stage会根据参数canvas选择不同的渲染器，开发者无需直接使用此类。 - 9 * @augments Renderer - 10 * @param {Object} properties 创建对象的属性参数。可包含此类所有可写属性。 - 11 * @module hilo/renderer/DOMRenderer - 12 * @requires hilo/core/Class - 13 * @requires hilo/core/Hilo - 14 * @requires hilo/renderer/Renderer - 15 * @requires hilo/view/Drawable - 16 */ - 17 var DOMRenderer = (function(){ - 18 - 19 return Class.create({ - 20 Extends: Renderer, - 21 constructor: function(properties){ - 22 DOMRenderer.superclass.constructor.call(this, properties); - 23 }, - 24 renderType:'dom', - 25 /** - 26 * @private - 27 * @see Renderer#startDraw - 28 */ - 29 startDraw: function(target){ - 30 //prepare drawable - 31 var drawable = (target.drawable = target.drawable || new Drawable()); - 32 drawable.domElement = drawable.domElement || createDOMDrawable(target, drawable); - 33 return true; - 34 }, - 35 - 36 /** - 37 * @private - 38 * @see Renderer#draw - 39 */ - 40 draw: function(target){ - 41 var parent = target.parent, - 42 targetElem = target.drawable.domElement, - 43 currentParent = targetElem.parentNode; - 44 - 45 if(parent){ - 46 var parentElem = parent.drawable.domElement; - 47 if(parentElem != currentParent){ - 48 parentElem.appendChild(targetElem); - 49 } - 50 //fix image load bug - 51 if(!target.width && !target.height){ - 52 var rect = target.drawable.rect; - 53 if(rect && (rect[2] || rect[3])){ - 54 target.width = rect[2]; - 55 target.height = rect[3]; - 56 } - 57 } - 58 } - 59 else if(target === this.stage && !currentParent){ - 60 targetElem.style.overflow = 'hidden'; - 61 this.canvas.appendChild(targetElem); - 62 } - 63 }, - 64 - 65 /** - 66 * @private - 67 * @see Renderer#transform - 68 */ - 69 transform: function(target){ - 70 Hilo.setElementStyleByView(target); - 71 if(target === this.stage){ - 72 var style = this.canvas.style, - 73 oldScaleX = target._scaleX, - 74 oldScaleY = target._scaleY, - 75 scaleX = target.scaleX, - 76 scaleY = target.scaleY; - 77 - 78 if((!oldScaleX && scaleX != 1) || (oldScaleX && oldScaleX != scaleX)){ - 79 target._scaleX = scaleX; - 80 style.width = scaleX * target.width + "px"; - 81 } - 82 if((!oldScaleY && scaleY != 1) || (oldScaleY && oldScaleY != scaleY)){ - 83 target._scaleY = scaleY; - 84 style.height = scaleY * target.height + "px"; - 85 } - 86 } - 87 }, - 88 - 89 /** - 90 * @private - 91 * @see Renderer#remove - 92 */ - 93 remove: function(target){ - 94 var drawable = target.drawable; - 95 var elem = drawable && drawable.domElement; - 96 - 97 if(elem){ - 98 var parentElem = elem.parentNode; - 99 if(parentElem){ -100 parentElem.removeChild(elem); -101 } -102 } -103 }, -104 -105 /** -106 * @private -107 * @see Renderer#hide -108 */ -109 hide: function(target){ -110 var elem = target.drawable && target.drawable.domElement; -111 if(elem) elem.style.display = 'none'; -112 }, -113 -114 /** -115 * @private -116 * @see Renderer#resize -117 */ -118 resize: function(width, height){ -119 var style = this.canvas.style; -120 style.width = width + 'px'; -121 style.height = height + 'px'; -122 if(style.position != "absolute") { -123 style.position = "relative"; -124 } -125 } -126 }); -127 -128 /** -129 * 创建一个可渲染的DOM，可指定tagName，如canvas或div。 -130 * @param {Object} view 一个可视对象或类似的对象。 -131 * @param {Object} imageObj 指定渲染的image及相关设置，如绘制区域rect。 -132 * @return {HTMLElement} 新创建的DOM对象。 -133 * @private -134 */ -135 function createDOMDrawable(view, imageObj){ -136 var tag = view.tagName || "div", -137 img = imageObj.image, -138 w = view.width || (img && img.width), -139 h = view.height || (img && img.height), -140 elem = Hilo.createElement(tag), style = elem.style; -141 -142 if(view.id) elem.id = view.id; -143 style.position = "absolute"; -144 style.left = (view.left || 0) + "px"; -145 style.top = (view.top || 0) + "px"; -146 style.width = w + "px"; -147 style.height = h + "px"; -148 -149 if(tag == "canvas"){ -150 elem.width = w; -151 elem.height = h; -152 if(img){ -153 var ctx = elem.getContext("2d"); -154 var rect = imageObj.rect || [0, 0, w, h]; -155 ctx.drawImage(img, rect[0], rect[1], rect[2], rect[3], -156 (view.x || 0), (view.y || 0), -157 (view.width || rect[2]), -158 (view.height || rect[3])); -159 } -160 }else{ -161 style.opacity = view.alpha != undefined ? view.alpha : 1; -162 if(view === this.stage || view.clipChildren) style.overflow = "hidden"; -163 if(img && img.src){ -164 style.backgroundImage = "url(" + img.src + ")"; -165 var bgX = view.rectX || 0, bgY = view.rectY || 0; -166 style.backgroundPosition = (-bgX) + "px " + (-bgY) + "px"; -167 } -168 } -169 return elem; -170 } -171 -172 })(); -173\ No newline at end of file diff --git a/docs/api/symbols/src/src_renderer_Renderer.js.html b/docs/api/symbols/src/src_renderer_Renderer.js.html deleted file mode 100644 index 16adebbd..00000000 --- a/docs/api/symbols/src/src_renderer_Renderer.js.html +++ /dev/null @@ -1,84 +0,0 @@ -
1 /** - 2 * Hilo - 3 * Copyright 2015 alibaba.com - 4 * Licensed under the MIT License - 5 */ - 6 - 7 /** - 8 * @class 渲染器抽象基类。 - 9 * @param {Object} properties 创建对象的属性参数。可包含此类所有可写属性。 - 10 * @module hilo/renderer/Renderer - 11 * @requires hilo/core/Hilo - 12 * @requires hilo/core/Class - 13 * @property {Object} canvas 渲染器对应的画布。它可能是一个普通的DOM元素，比如div，也可以是一个canvas画布元素。只读属性。 - 14 * @property {Object} stage 渲染器对应的舞台。只读属性。 - 15 * @property {String} renderType 渲染方式。只读属性。 - 16 */ - 17 var Renderer = Class.create(/** @lends Renderer.prototype */{ - 18 constructor: function(properties){ - 19 properties = properties || {}; - 20 Hilo.copy(this, properties, true); - 21 }, - 22 - 23 renderType:null, - 24 canvas: null, - 25 stage: null, - 26 - 27 /** - 28 * 为开始绘制可视对象做准备。需要子类来实现。 - 29 * @param {View} target 要绘制的可视对象。 - 30 */ - 31 startDraw: function(target){ }, - 32 - 33 /** - 34 * 绘制可视对象。需要子类来实现。 - 35 * @param {View} target 要绘制的可视对象。 - 36 */ - 37 draw: function(target){ }, - 38 - 39 /** - 40 * 结束绘制可视对象后的后续处理方法。需要子类来实现。 - 41 * @param {View} target 要绘制的可视对象。 - 42 */ - 43 endDraw: function(target){ }, - 44 - 45 /** - 46 * 对可视对象进行变换。需要子类来实现。 - 47 */ - 48 transform: function(){ }, - 49 - 50 /** - 51 * 隐藏可视对象。需要子类来实现。 - 52 */ - 53 hide: function(){ }, - 54 - 55 /** - 56 * 从画布中删除可视对象。注意：不是从stage中删除对象。需要子类来实现。 - 57 * @param {View} target 要删除的可视对象。 - 58 */ - 59 remove: function(target){ }, - 60 - 61 /** - 62 * 清除画布指定区域。需要子类来实现。 - 63 * @param {Number} x 指定区域的x轴坐标。 - 64 * @param {Number} y 指定区域的y轴坐标。 - 65 * @param {Number} width 指定区域的宽度。 - 66 * @param {Number} height 指定区域的高度。 - 67 */ - 68 clear: function(x, y, width, height){ }, - 69 - 70 /** - 71 * 改变渲染器的画布大小。 - 72 * @param {Number} width 指定渲染画布新的宽度。 - 73 * @param {Number} height 指定渲染画布新的高度。 - 74 */ - 75 resize: function(width, height){ } - 76 - 77 });\ No newline at end of file diff --git a/docs/api/symbols/src/src_renderer_WebGLRenderer.js.html b/docs/api/symbols/src/src_renderer_WebGLRenderer.js.html deleted file mode 100644 index 07ea137b..00000000 --- a/docs/api/symbols/src/src_renderer_WebGLRenderer.js.html +++ /dev/null @@ -1,536 +0,0 @@ -
1 /** - 2 * Hilo - 3 * Copyright 2015 alibaba.com - 4 * Licensed under the MIT License - 5 */ - 6 - 7 /** - 8 * Heavily inspired by PIXI's SpriteRenderer: - 9 * https://github.com/pixijs/pixi.js/blob/v3.0.9/src/core/sprites/webgl/SpriteRenderer.js - 10 */ - 11 - 12 var DEG2RAD = Math.PI / 180; - 13 /** - 14 * @class webgl画布渲染器。所有可视对象将渲染在canvas画布上。 - 15 * @augments Renderer - 16 * @param {Object} properties 创建对象的属性参数。可包含此类所有可写属性。 - 17 * @module hilo/renderer/WebGLRenderer - 18 * @requires hilo/core/Class - 19 * @requires hilo/renderer/Renderer - 20 * @requires hilo/geom/Matrix - 21 * @property {WebGLRenderingContext} gl webgl上下文。只读属性。 - 22 */ - 23 var WebGLRenderer = Class.create(/** @lends WebGLRenderer.prototype */{ - 24 Extends: Renderer, - 25 Statics:/** @lends WebGLRenderer */{ - 26 /** - 27 * 最大批渲染数量。 - 28 * @type {Number} - 29 */ - 30 MAX_BATCH_NUM:2000, - 31 /** - 32 * 顶点属性数。只读属性。 - 33 * @type {Number} - 34 */ - 35 ATTRIBUTE_NUM:5, - 36 /** - 37 * 是否支持WebGL。只读属性。 - 38 * @type {Boolean} - 39 */ - 40 isSupport:null - 41 }, - 42 renderType:'webgl', - 43 gl:null, - 44 constructor: function(properties){ - 45 window.__render = this; - 46 WebGLRenderer.superclass.constructor.call(this, properties); - 47 var gl = this.gl = this.canvas.getContext("webgl")||this.canvas.getContext('experimental-webgl'); - 48 - 49 this.maxBatchNum = WebGLRenderer.MAX_BATCH_NUM; - 50 this.positionStride = WebGLRenderer.ATTRIBUTE_NUM * 4; - 51 var vertexNum = this.maxBatchNum * WebGLRenderer.ATTRIBUTE_NUM * 4; - 52 var indexNum = this.maxBatchNum * 6; - 53 this.positions = new Float32Array(vertexNum); - 54 this.indexs = new Uint16Array(indexNum); - 55 for (var i=0, j=0; i < indexNum; i += 6, j += 4) - 56 { - 57 this.indexs[i + 0] = j + 0; - 58 this.indexs[i + 1] = j + 1; - 59 this.indexs[i + 2] = j + 2; - 60 this.indexs[i + 3] = j + 1; - 61 this.indexs[i + 4] = j + 2; - 62 this.indexs[i + 5] = j + 3; - 63 } - 64 this.batchIndex = 0; - 65 this.sprites = []; - 66 - 67 gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); - 68 gl.clearColor(0, 0, 0, 0); - 69 gl.disable(gl.DEPTH_TEST); - 70 gl.disable(gl.CULL_FACE); - 71 gl.enable(gl.BLEND); - 72 - 73 this._initShaders(); - 74 this.defaultShader.active(); - 75 - 76 this.positionBuffer = gl.createBuffer(); - 77 this.indexBuffer = gl.createBuffer(); - 78 - 79 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - 80 gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indexs, gl.STATIC_DRAW); - 81 - 82 gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer); - 83 gl.bufferData(gl.ARRAY_BUFFER, this.positions, gl.DYNAMIC_DRAW); - 84 - 85 gl.vertexAttribPointer(this.a_position, 2, gl.FLOAT, false, this.positionStride, 0);//x, y - 86 gl.vertexAttribPointer(this.a_TexCoord, 2, gl.FLOAT, false, this.positionStride, 2 * 4);//x, y - 87 gl.vertexAttribPointer(this.a_alpha, 1, gl.FLOAT, false, this.positionStride, 4 * 4);//alpha - 88 }, - 89 - 90 context: null, - 91 - 92 /** - 93 * @private - 94 * @see Renderer#startDraw - 95 */ - 96 startDraw: function(target){ - 97 if(target.visible && target.alpha > 0){ - 98 if(target === this.stage){ - 99 this.clear(); -100 } -101 return true; -102 } -103 return false; -104 }, -105 -106 /** -107 * @private -108 * @see Renderer#draw -109 */ -110 draw: function(target){ -111 var ctx = this.context, w = target.width, h = target.height; -112 -113 //TODO:draw background -114 var bg = target.background; -115 -116 //draw image -117 var drawable = target.drawable, image = drawable && drawable.image; -118 if(image){ -119 var gl = this.gl; -120 if(!image.texture){ -121 this.activeShader.uploadTexture(image); -122 } -123 -124 var rect = drawable.rect, sw = rect[2], sh = rect[3], offsetX = rect[4], offsetY = rect[5]; -125 if(!w && !h){ -126 //fix width/height TODO: how to get rid of this? -127 w = target.width = sw; -128 h = target.height = sh; -129 } -130 -131 if(this.batchIndex >= this.maxBatchNum){ -132 this._renderBatches(); -133 } -134 -135 var vertexs = this._createVertexs(image, rect[0], rect[1], sw, sh, 0, 0, w, h); -136 var index = this.batchIndex * this.positionStride; -137 var positions = this.positions; -138 var alpha = target.__webglRenderAlpha; -139 positions[index + 0] = vertexs[0];//x -140 positions[index + 1] = vertexs[1];//y -141 positions[index + 2] = vertexs[2];//uvx -142 positions[index + 3] = vertexs[3];//uvy -143 positions[index + 4] = alpha;//alpha -144 -145 positions[index + 5] = vertexs[4]; -146 positions[index + 6] = vertexs[5]; -147 positions[index + 7] = vertexs[6]; -148 positions[index + 8] = vertexs[7]; -149 positions[index + 9] = alpha; -150 -151 positions[index + 10] = vertexs[8] -152 positions[index + 11] = vertexs[9] -153 positions[index + 12] = vertexs[10] -154 positions[index + 13] = vertexs[11] -155 positions[index + 14] = alpha; -156 -157 positions[index + 15] = vertexs[12] -158 positions[index + 16] = vertexs[13] -159 positions[index + 17] = vertexs[14] -160 positions[index + 18] = vertexs[15] -161 positions[index + 19] = alpha; -162 -163 var matrix = target.__webglWorldMatrix; -164 for(var i = 0;i < 4;i ++){ -165 var x = positions[index + i*5]; -166 var y = positions[index + i*5 + 1]; -167 -168 positions[index + i*5] = matrix.a*x+matrix.c*y + matrix.tx; -169 positions[index + i*5 + 1] = matrix.b*x+matrix.d*y + matrix.ty; -170 } -171 -172 target.texture = image.texture; -173 this.sprites[this.batchIndex++] = target; -174 } -175 }, -176 -177 /** -178 * @private -179 * @see Renderer#endDraw -180 */ -181 endDraw: function(target){ -182 if(target === this.stage){ -183 this._renderBatches(); -184 } -185 }, -186 /** -187 * @private -188 * @see Renderer#transform -189 */ -190 transform: function(target){ -191 var drawable = target.drawable; -192 if(drawable && drawable.domElement){ -193 Hilo.setElementStyleByView(target); -194 return; -195 } -196 -197 var ctx = this.context, -198 scaleX = target.scaleX, -199 scaleY = target.scaleY; -200 -201 if(target === this.stage){ -202 var style = this.canvas.style, -203 oldScaleX = target._scaleX, -204 oldScaleY = target._scaleY; -205 -206 if((!oldScaleX && scaleX != 1) || (oldScaleX && oldScaleX != scaleX)){ -207 target._scaleX = scaleX; -208 style.width = scaleX * target.width + "px"; -209 } -210 if((!oldScaleY && scaleY != 1) || (oldScaleY && oldScaleY != scaleY)){ -211 target._scaleY = scaleY; -212 style.height = scaleY * target.height + "px"; -213 } -214 target.__webglWorldMatrix = target.__webglWorldMatrix||new Matrix(1, 0, 0, 1, 0, 0); -215 }else{ -216 target.__webglWorldMatrix = target.__webglWorldMatrix||new Matrix(1, 0, 0, 1, 0, 0); -217 this._setConcatenatedMatrix(target, target.parent); -218 } -219 -220 if(target.alpha > 0) { -221 if(target.parent && target.parent.__webglRenderAlpha){ -222 target.__webglRenderAlpha = target.alpha * target.parent.__webglRenderAlpha; -223 } -224 else{ -225 target.__webglRenderAlpha = target.alpha; -226 } -227 } -228 }, -229 -230 /** -231 * @private -232 * @see Renderer#remove -233 */ -234 remove: function(target){ -235 var drawable = target.drawable; -236 var elem = drawable && drawable.domElement; -237 -238 if(elem){ -239 var parentElem = elem.parentNode; -240 if(parentElem){ -241 parentElem.removeChild(elem); -242 } -243 } -244 }, -245 -246 /** -247 * @private -248 * @see Renderer#clear -249 */ -250 clear: function(x, y, width, height){ -251 this.gl.clear(this.gl.COLOR_BUFFER_BIT); -252 }, -253 -254 /** -255 * @private -256 * @see Renderer#resize -257 */ -258 resize: function(width, height){ -259 if(this.width !== width || this.height !== height){ -260 this.width = this.canvas.width = width; -261 this.height = this.canvas.height = height; -262 this.gl.viewport(0, 0, width, height); -263 -264 this.canvasHalfWidth = width * .5; -265 this.canvasHalfHeight = height * .5; -266 -267 this._uploadProjectionTransform(true); -268 } -269 }, -270 _renderBatches:function(){ -271 var gl = this.gl; -272 gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.positions.subarray(0, this.batchIndex * this.positionStride)); -273 var startIndex = 0; -274 var batchNum = 0; -275 var preTexture = null; -276 for(var i = 0;i < this.batchIndex;i ++){ -277 var sprite = this.sprites[i]; -278 if(preTexture && preTexture !== sprite.texture){ -279 this._renderBatch(startIndex, i); -280 startIndex = i; -281 batchNum = 1; -282 } -283 preTexture = sprite.texture; -284 } -285 this._renderBatch(startIndex, this.batchIndex); -286 this.batchIndex = 0; -287 }, -288 _renderBatch:function(start, end){ -289 var gl = this.gl; -290 var num = end - start; -291 if(num > 0){ -292 gl.bindTexture(gl.TEXTURE_2D, this.sprites[start].texture); -293 gl.drawElements(gl.TRIANGLES, num * 6, gl.UNSIGNED_SHORT, start * 6 * 2); -294 } -295 }, -296 _uploadProjectionTransform:function(force){ -297 if(!this._projectionTransformElements||force){ -298 this._projectionTransformElements = new Float32Array([ -299 1/this.canvasHalfWidth, 0, 0, -300 0, -1/this.canvasHalfHeight, 0, -301 -1, 1, 1, -302 ]); -303 } -304 -305 this.gl.uniformMatrix3fv(this.u_projectionTransform, false, this._projectionTransformElements); -306 }, -307 _initShaders:function(){ -308 var VSHADER_SOURCE ='\ -309 attribute vec2 a_position;\n\ -310 attribute vec2 a_TexCoord;\n\ -311 attribute float a_alpha;\n\ -312 uniform mat3 u_projectionTransform;\n\ -313 varying vec2 v_TexCoord;\n\ -314 varying float v_alpha;\n\ -315 void main(){\n\ -316 gl_Position = vec4((u_projectionTransform * vec3(a_position, 1.0)).xy, 1.0, 1.0);\n\ -317 v_TexCoord = a_TexCoord;\n\ -318 v_alpha = a_alpha;\n\ -319 }\n\ -320 '; -321 -322 var FSHADER_SOURCE = '\n\ -323 precision mediump float;\n\ -324 uniform sampler2D u_Sampler;\n\ -325 varying vec2 v_TexCoord;\n\ -326 varying float v_alpha;\n\ -327 void main(){\n\ -328 gl_FragColor = texture2D(u_Sampler, v_TexCoord) * v_alpha;\n\ -329 }\n\ -330 '; -331 -332 this.defaultShader = new Shader(this, { -333 v:VSHADER_SOURCE, -334 f:FSHADER_SOURCE -335 },{ -336 attributes:["a_position", "a_TexCoord", "a_alpha"], -337 uniforms:["u_projectionTransform", "u_Alpha", "u_Sampler"] -338 }); -339 }, -340 _createVertexs:function(img, tx, ty, tw, th, x, y, w, h){ -341 var tempVertexs = this.__tempVertexs||[]; -342 var width = img.width; -343 var height = img.height; -344 -345 tw = tw/width; -346 th = th/height; -347 tx = tx/width; -348 ty = ty/height; -349 -350 w = w; -351 h = h; -352 x = x; -353 y = y; -354 -355 if(tw + tx > 1){ -356 tw = 1 - tx; -357 } -358 -359 if(th + ty > 1){ -360 th = 1 - ty; -361 } -362 -363 var index = 0; -364 tempVertexs[index++] = x; tempVertexs[index++] = y; tempVertexs[index++] = tx; tempVertexs[index++] = ty; -365 tempVertexs[index++] = x+w;tempVertexs[index++] = y; tempVertexs[index++] = tx+tw; tempVertexs[index++] = ty; -366 tempVertexs[index++] = x; tempVertexs[index++] = y+h; tempVertexs[index++] = tx;tempVertexs[index++] = ty+th; -367 tempVertexs[index++] = x+w;tempVertexs[index++] = y+h;tempVertexs[index++] = tx+tw;tempVertexs[index++] = ty+th; -368 -369 return tempVertexs; -370 }, -371 _setConcatenatedMatrix:function(view, ancestor){ -372 var mtx = view.__webglWorldMatrix; -373 var cos = 1, sin = 0, -374 rotation = view.rotation % 360, -375 pivotX = view.pivotX, pivotY = view.pivotY, -376 scaleX = view.scaleX, scaleY = view.scaleY; -377 -378 if(rotation){ -379 var r = rotation * DEG2RAD; -380 cos = Math.cos(r); -381 sin = Math.sin(r); -382 } -383 -384 mtx.a = cos*scaleX; -385 mtx.b = sin*scaleX; -386 mtx.c = -sin*scaleY; -387 mtx.d = cos*scaleY; -388 mtx.tx = view.x - mtx.a * pivotX - mtx.c * pivotY; -389 mtx.ty = view.y - mtx.b * pivotX - mtx.d * pivotY; -390 -391 mtx.concat(ancestor.__webglWorldMatrix); -392 } -393 }); -394 -395 /** -396 * shader -397 * @param {WebGLRenderer} renderer [description] -398 * @param {Object} source -399 * @param {String} source.v 顶点shader -400 * @param {String} source.f 片段shader -401 * @param {Object} attr -402 * @param {Array} attr.attributes attribute数组 -403 * @param {Array} attr.uniforms uniform数组 -404 */ -405 var _cacheTexture = {}; -406 var Shader = function(renderer, source, attr){ -407 this.renderer = renderer; -408 this.gl = renderer.gl; -409 this.program = this._createProgram(this.gl, source.v, source.f); -410 -411 attr = attr||{}; -412 this.attributes = attr.attributes||[]; -413 this.uniforms = attr.uniforms||[]; -414 } -415 -416 Shader.prototype = { -417 active:function(){ -418 var that = this; -419 var renderer = that.renderer; -420 var gl = that.gl; -421 var program = that.program; -422 -423 if(program && gl){ -424 renderer.activeShader = that; -425 gl.useProgram(program); -426 that.attributes.forEach(function(attribute){ -427 renderer[attribute] = gl.getAttribLocation(program, attribute); -428 gl.enableVertexAttribArray(renderer[attribute]); -429 }); -430 -431 that.uniforms.forEach(function(uniform){ -432 renderer[uniform] = gl.getUniformLocation(program, uniform); -433 }); -434 -435 if(that.width !== renderer.width || that.height !== renderer.height){ -436 that.width = renderer.width; -437 that.height = renderer.height; -438 renderer._uploadProjectionTransform(); -439 } -440 } -441 }, -442 uploadTexture:function(image){ -443 var gl = this.gl; -444 var renderer = this.renderer; -445 if(_cacheTexture[image.src]){ -446 image.texture = _cacheTexture[image.src]; -447 } -448 else{ -449 var texture = gl.createTexture(); -450 var u_Sampler = renderer.u_Sampler; -451 -452 -453 gl.activeTexture(gl.TEXTURE0); -454 gl.bindTexture(gl.TEXTURE_2D, texture); -455 -456 // gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1); -457 gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 1); -458 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); -459 -460 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); -461 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); -462 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); -463 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); -464 gl.uniform1i(u_Sampler, 0); -465 gl.bindTexture(gl.TEXTURE_2D, null); -466 -467 image.texture = texture; -468 _cacheTexture[image.src] = texture; -469 } -470 }, -471 _createProgram:function(gl, vshader, fshader){ -472 var vertexShader = this._createShader(gl, gl.VERTEX_SHADER, vshader); -473 var fragmentShader = this._createShader(gl, gl.FRAGMENT_SHADER, fshader); -474 if (!vertexShader || !fragmentShader) { -475 return null; -476 } -477 -478 var program = gl.createProgram(); -479 if (program) { -480 gl.attachShader(program, vertexShader); -481 gl.attachShader(program, fragmentShader); -482 -483 gl.linkProgram(program); -484 -485 gl.deleteShader(fragmentShader); -486 gl.deleteShader(vertexShader); -487 var linked = gl.getProgramParameter(program, gl.LINK_STATUS); -488 if (!linked) { -489 var error = gl.getProgramInfoLog(program); -490 console.log('Failed to link program: ' + error); -491 gl.deleteProgram(program); -492 return null; -493 } -494 } -495 return program; -496 }, -497 _createShader:function(gl, type, source){ -498 var shader = gl.createShader(type); -499 if(shader){ -500 gl.shaderSource(shader, source); -501 gl.compileShader(shader); -502 -503 var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS); -504 if (!compiled) { -505 var error = gl.getShaderInfoLog(shader); -506 console.log('Failed to compile shader: ' + error); -507 gl.deleteShader(shader); -508 return null; -509 } -510 } -511 return shader; -512 } -513 }; -514 -515 WebGLRenderer.isSupport = function(){ -516 if(this._isSupport !== undefined){ -517 return this._isSupport; -518 } -519 else{ -520 var canvas = document.createElement('canvas'); -521 if(canvas.getContext && (canvas.getContext('webgl')||canvas.getContext('experimental-webgl'))){ -522 this._isSupport = true; -523 } -524 else{ -525 this._isSupport = false; -526 } -527 return this._isSupport; -528 } -529 };\ No newline at end of file diff --git a/docs/api/symbols/src/src_tween_Ease.js.html b/docs/api/symbols/src/src_tween_Ease.js.html deleted file mode 100644 index 430890e5..00000000 --- a/docs/api/symbols/src/src_tween_Ease.js.html +++ /dev/null @@ -1,260 +0,0 @@ -
1 /** - 2 * Hilo - 3 * Copyright 2015 alibaba.com - 4 * Licensed under the MIT License - 5 */ - 6 - 7 /** - 8 * @class Ease类包含为Tween类提供各种缓动功能的函数。 - 9 * @module hilo/tween/Ease - 10 * @static - 11 */ - 12 var Ease = (function(){ - 13 - 14 function createEase(obj, easeInFn, easeOutFn, easeInOutFn, easeNoneFn){ - 15 obj = obj || {}; - 16 easeInFn && (obj.EaseIn = easeInFn); - 17 easeOutFn && (obj.EaseOut = easeOutFn); - 18 easeInOutFn && (obj.EaseInOut = easeInOutFn); - 19 easeNoneFn && (obj.EaseNone = easeNoneFn); - 20 return obj; - 21 } - 22 - 23 /** - 24 * 线性匀速缓动函数。包含EaseNone函数。 - 25 */ - 26 var Linear = createEase(null, null, null, null, function(k){ - 27 return k; - 28 }); - 29 - 30 /** - 31 * 二次缓动函数。包含EaseIn、EaseOut、EaseInOut三个函数。 - 32 */ - 33 var Quad = createEase(null, - 34 function(k){ - 35 return k * k; - 36 }, - 37 - 38 function(k){ - 39 return - k * (k - 2); - 40 }, - 41 - 42 function(k){ - 43 return ((k *= 2) < 1) ? 0.5 * k * k : -0.5 * (--k * (k - 2) - 1); - 44 } - 45 ); - 46 - 47 /** - 48 * 三次缓动函数。包含EaseIn、EaseOut、EaseInOut三个函数。 - 49 */ - 50 var Cubic = createEase(null, - 51 function(k){ - 52 return k * k * k; - 53 }, - 54 - 55 function(k){ - 56 return --k * k * k + 1; - 57 }, - 58 - 59 function(k){ - 60 return ((k *= 2) < 1) ? 0.5 * k * k * k : 0.5 * ((k -= 2) * k * k + 2); - 61 } - 62 ); - 63 - 64 /** - 65 * 四次缓动函数。包含EaseIn、EaseOut、EaseInOut三个函数。 - 66 */ - 67 var Quart = createEase(null, - 68 function(k){ - 69 return k * k * k * k; - 70 }, - 71 - 72 function(k){ - 73 return -(--k * k * k * k - 1); - 74 }, - 75 - 76 function(k){ - 77 return ((k *= 2) < 1) ? 0.5 * k * k * k * k : - 0.5 * ((k -= 2) * k * k * k - 2); - 78 } - 79 ); - 80 - 81 /** - 82 * 五次缓动函数。包含EaseIn、EaseOut、EaseInOut三个函数。 - 83 */ - 84 var Quint = createEase(null, - 85 function(k){ - 86 return k * k * k * k * k; - 87 }, - 88 - 89 function(k){ - 90 return (k = k - 1) * k * k * k * k + 1; - 91 }, - 92 - 93 function(k){ - 94 return ((k *= 2) < 1) ? 0.5 * k * k * k * k * k : 0.5 * ((k -= 2) * k * k * k * k + 2); - 95 } - 96 ); - 97 - 98 var math = Math, - 99 PI = math.PI, HALF_PI = PI * 0.5, -100 sin = math.sin, cos = math.cos, -101 pow = math.pow, sqrt = math.sqrt; -102 -103 /** -104 * 正弦缓动函数。包含EaseIn、EaseOut、EaseInOut三个函数。 -105 */ -106 var Sine = createEase(null, -107 function(k){ -108 return -cos(k * HALF_PI) + 1; -109 }, -110 -111 function(k){ -112 return sin(k * HALF_PI); -113 }, -114 -115 function(k){ -116 return -0.5 * (cos(PI * k) - 1); -117 } -118 ); -119 -120 /** -121 * 指数缓动函数。包含EaseIn、EaseOut、EaseInOut三个函数。 -122 */ -123 var Expo = createEase(null, -124 function(k){ -125 return k == 0 ? 0 : pow(2, 10 * (k - 1)); -126 }, -127 -128 function(k){ -129 return k == 1 ? 1 : -pow(2, -10 * k) + 1; -130 }, -131 -132 function(k){ -133 if(k == 0 || k == 1) return k; -134 if((k *= 2) < 1) return 0.5 * pow(2, 10 * (k - 1)); -135 return 0.5 * (-pow(2, - 10 * (k - 1)) + 2); -136 } -137 ); -138 -139 /** -140 * 圆形缓动函数。包含EaseIn、EaseOut、EaseInOut三个函数。 -141 */ -142 var Circ = createEase(null, -143 function(k){ -144 return -(sqrt(1 - k * k) - 1); -145 }, -146 -147 function(k){ -148 return sqrt(1 - --k * k); -149 }, -150 -151 function(k){ -152 if((k /= 0.5) < 1) return - 0.5 * (sqrt(1 - k * k) - 1); -153 return 0.5 * (sqrt(1 - (k -= 2) * k) + 1); -154 } -155 ); -156 -157 /** -158 * 弹性缓动函数。包含EaseIn、EaseOut、EaseInOut三个函数。 -159 */ -160 var Elastic = createEase( -161 { -162 a: 1, -163 p: 0.4, -164 s: 0.1, -165 -166 config: function(amplitude, period){ -167 Elastic.a = amplitude; -168 Elastic.p = period; -169 Elastic.s = period / (2 * PI) * Math.asin(1 / amplitude) || 0; -170 } -171 }, -172 -173 function(k){ -174 return -(Elastic.a * pow(2, 10 * (k -= 1)) * sin((k - Elastic.s) * (2 * PI) / Elastic.p)); -175 }, -176 -177 function(k){ -178 return (Elastic.a * pow(2, -10 * k) * sin((k - Elastic.s) * (2 * PI) / Elastic.p) + 1); -179 }, -180 -181 function(k){ -182 return ((k *= 2) < 1) ? -0.5 * (Elastic.a * pow(2, 10 * (k -= 1)) * sin((k - Elastic.s) * (2 * PI) / Elastic.p)) : -183 Elastic.a * pow(2, -10 * (k -= 1)) * sin((k - Elastic.s) * (2 * PI) / Elastic.p) * 0.5 + 1; -184 } -185 ); -186 -187 /** -188 * 向后缓动函数。包含EaseIn、EaseOut、EaseInOut三个函数。 -189 */ -190 var Back = createEase( -191 { -192 o: 1.70158, -193 s: 2.59491, -194 -195 config: function(overshoot){ -196 Back.o = overshoot; -197 Back.s = overshoot * 1.525; -198 } -199 }, -200 -201 function(k){ -202 return k * k * ((Back.o + 1) * k - Back.o); -203 }, -204 -205 function(k){ -206 return (k = k - 1) * k * ((Back.o + 1) * k + Back.o) + 1; -207 }, -208 -209 function(k){ -210 return ((k *= 2) < 1) ? 0.5 * (k * k * ((Back.s + 1) * k - Back.s)) : 0.5 * ((k -= 2) * k * ((Back.s + 1) * k + Back.s) + 2); -211 } -212 ); -213 -214 /** -215 * 弹跳缓动函数。包含EaseIn、EaseOut、EaseInOut三个函数。 -216 */ -217 var Bounce = createEase(null, -218 function(k){ -219 return 1 - Bounce.EaseOut(1 - k); -220 }, -221 -222 function(k){ -223 if((k /= 1) < 0.36364){ -224 return 7.5625 * k * k; -225 }else if(k < 0.72727){ -226 return 7.5625 * (k -= 0.54545) * k + 0.75; -227 }else if(k < 0.90909){ -228 return 7.5625 * (k -= 0.81818) * k + 0.9375; -229 }else{ -230 return 7.5625 * (k -= 0.95455) * k + 0.984375; -231 } -232 }, -233 -234 function(k){ -235 return k < 0.5 ? Bounce.EaseIn(k * 2) * 0.5 : Bounce.EaseOut(k * 2 - 1) * 0.5 + 0.5; -236 } -237 ); -238 -239 return { -240 Linear: Linear, -241 Quad: Quad, -242 Cubic: Cubic, -243 Quart: Quart, -244 Quint: Quint, -245 Sine: Sine, -246 Expo: Expo, -247 Circ: Circ, -248 Elastic: Elastic, -249 Back: Back, -250 Bounce: Bounce -251 } -252 -253 })();\ No newline at end of file diff --git a/docs/api/symbols/src/src_tween_Tween.js.html b/docs/api/symbols/src/src_tween_Tween.js.html deleted file mode 100644 index 41966c27..00000000 --- a/docs/api/symbols/src/src_tween_Tween.js.html +++ /dev/null @@ -1,415 +0,0 @@ -
1 /** - 2 * Hilo - 3 * Copyright 2015 alibaba.com - 4 * Licensed under the MIT License - 5 */ - 6 - 7 /** - 8 * <iframe src='../../../examples/Tween.html?noHeader' width = '550' height = '130' scrolling='no'></iframe> - 9 * <br/> - 10 * 使用示例: - 11 * <pre> - 12 * ticker.addTick(Hilo.Tween);//需要把Tween加到ticker里才能使用 - 13 * - 14 * var view = new View({x:5, y:10}); - 15 * Hilo.Tween.to(view, { - 16 * x:100, - 17 * y:20, - 18 * alpha:0 - 19 * }, { - 20 * duration:1000, - 21 * delay:500, - 22 * ease:Hilo.Ease.Quad.EaseIn, - 23 * onComplete:function(){ - 24 * console.log('complete'); - 25 * } - 26 * }); - 27 * </pre> - 28 * @class Tween类提供缓动功能。 - 29 * @param {Object} target 缓动对象。 - 30 * @param {Object} fromProps 对象缓动的起始属性集合。 - 31 * @param {Object} toProps 对象缓动的目标属性集合。 - 32 * @param {Object} params 缓动参数。可包含Tween类所有可写属性。 - 33 * @module hilo/tween/Tween - 34 * @requires hilo/core/Class - 35 * @property {Object} target 缓动目标。只读属性。 - 36 * @property {Int} duration 缓动总时长。单位毫秒。 - 37 * @property {Int} delay 缓动延迟时间。单位毫秒。 - 38 * @property {Boolean} paused 缓动是否暂停。默认为false。 - 39 * @property {Boolean} loop 缓动是否循环。默认为false。 - 40 * @property {Boolean} reverse 缓动是否反转播放。默认为false。 - 41 * @property {Int} repeat 缓动重复的次数。默认为0。 - 42 * @property {Int} repeatDelay 缓动重复的延迟时长。单位为毫秒。 - 43 * @property {Function} ease 缓动变化函数。默认为null。 - 44 * @property {Int} time 缓动已进行的时长。单位毫秒。只读属性。 - 45 * @property {Function} onStart 缓动开始回调函数。它接受1个参数：tween。默认值为null。 - 46 * @property {Function} onUpdate 缓动更新回调函数。它接受2个参数：ratio和tween。默认值为null。 - 47 * @property {Function} onComplete 缓动结束回调函数。它接受1个参数：tween。默认值为null。 - 48 */ - 49 var Tween = (function(){ - 50 - 51 function now(){ - 52 return +new Date(); - 53 } - 54 - 55 return Class.create(/** @lends Tween.prototype */{ - 56 constructor: function(target, fromProps, toProps, params){ - 57 var me = this; - 58 - 59 me.target = target; - 60 me._startTime = 0; - 61 me._seekTime = 0; - 62 me._pausedTime = 0; - 63 me._pausedStartTime = 0; - 64 me._reverseFlag = 1; - 65 me._repeatCount = 0; - 66 - 67 //no fromProps if pass 3 arguments - 68 if(arguments.length == 3){ - 69 params = toProps; - 70 toProps = fromProps; - 71 fromProps = null; - 72 } - 73 - 74 for(var p in params) me[p] = params[p]; - 75 me.setProps(fromProps, toProps); - 76 - 77 //for old version compatiblity - 78 if(!params.duration && params.time){ - 79 me.duration = params.time || 0; - 80 me.time = 0; - 81 } - 82 }, - 83 - 84 target: null, - 85 duration: 0, - 86 delay: 0, - 87 paused: false, - 88 loop: false, - 89 reverse: false, - 90 repeat: 0, - 91 repeatDelay: 0, - 92 ease: null, - 93 time: 0, //ready only - 94 - 95 onStart: null, - 96 onUpdate: null, - 97 onComplete: null, - 98 - 99 /** -100 * 设置缓动对象的初始和目标属性。 -101 * @param {Object} fromProps 缓动对象的初始属性。 -102 * @param {Object} toProps 缓动对象的目标属性。 -103 * @returns {Tween} Tween变换本身。可用于链式调用。 -104 */ -105 setProps: function(fromProps, toProps){ -106 var me = this, target = me.target, -107 propNames = fromProps || toProps, -108 from = me._fromProps = {}, to = me._toProps = {}; -109 -110 fromProps = fromProps || target; -111 toProps = toProps || target; -112 -113 for(var p in propNames){ -114 to[p] = toProps[p] || 0; -115 target[p] = from[p] = fromProps[p] || 0; -116 } -117 return me; -118 }, -119 -120 /** -121 * 启动缓动动画的播放。 -122 * @returns {Tween} Tween变换本身。可用于链式调用。 -123 */ -124 start: function(){ -125 var me = this; -126 me._startTime = now() + me.delay; -127 me._seekTime = 0; -128 me._pausedTime = 0; -129 me.paused = false; -130 Tween.add(me); -131 return me; -132 }, -133 -134 /** -135 * 停止缓动动画的播放。 -136 * @returns {Tween} Tween变换本身。可用于链式调用。 -137 */ -138 stop: function(){ -139 Tween.remove(this); -140 return this; -141 }, -142 -143 /** -144 * 暂停缓动动画的播放。 -145 * @returns {Tween} Tween变换本身。可用于链式调用。 -146 */ -147 pause: function(){ -148 var me = this; -149 me.paused = true; -150 me._pausedStartTime = now(); -151 return me; -152 }, -153 -154 /** -155 * 恢复缓动动画的播放。 -156 * @returns {Tween} Tween变换本身。可用于链式调用。 -157 */ -158 resume: function(){ -159 var me = this; -160 me.paused = false; -161 if(me._pausedStartTime) me._pausedTime += now() - me._pausedStartTime; -162 me._pausedStartTime = 0; -163 return me; -164 }, -165 -166 /** -167 * 跳转Tween到指定的时间。 -168 * @param {Number} time 指定要跳转的时间。取值范围为：0 - duraion。 -169 * @param {Boolean} pause 是否暂停。 -170 * @returns {Tween} Tween变换本身。可用于链式调用。 -171 */ -172 seek: function(time, pause){ -173 var me = this, current = now(); -174 me._startTime = current; -175 me._seekTime = time; -176 me._pausedTime = 0; -177 if(pause !== undefined) me.paused = pause; -178 me._update(current, true); -179 Tween.add(me); -180 return me; -181 }, -182 -183 /** -184 * 连接下一个Tween变换。其开始时间根据delay值不同而不同。当delay值为字符串且以'+'或'-'开始时，Tween的开始时间从当前变换结束点计算，否则以当前变换起始点计算。 -185 * @param {Tween} tween 要连接的Tween变换。 -186 * @returns {Tween} Tween变换本身。可用于链式调用。 -187 */ -188 link: function(tween){ -189 var me = this, delay = tween.delay, startTime = me._startTime; -190 -191 if(typeof delay === 'string'){ -192 var plus = delay.indexOf('+') == 0, minus = delay.indexOf('-') == 0; -193 delay = plus || minus ? Number(delay.substr(1)) * (plus ? 1 : -1) : Number(delay); -194 } -195 tween.delay = delay; -196 tween._startTime = plus || minus ? startTime + me.duration + delay : startTime + delay; -197 -198 me._next = tween; -199 Tween.remove(tween); -200 return me; -201 }, -202 -203 /** -204 * Tween类的内部渲染方法。 -205 * @private -206 */ -207 _render: function(ratio){ -208 var me = this, target = me.target, fromProps = me._fromProps, p; -209 for(p in fromProps) target[p] = fromProps[p] + (me._toProps[p] - fromProps[p]) * ratio; -210 }, -211 -212 /** -213 * Tween类的内部更新方法。 -214 * @private -215 */ -216 _update: function(time, forceUpdate){ -217 var me = this; -218 if(me.paused && !forceUpdate) return; -219 -220 //elapsed time -221 var elapsed = time - me._startTime - me._pausedTime + me._seekTime; -222 if(elapsed < 0) return; -223 -224 //elapsed ratio -225 var ratio = elapsed / me.duration, complete = false, callback; -226 ratio = ratio <= 0 ? 0 : ratio >= 1 ? 1 : me.ease ? me.ease(ratio) : ratio; -227 -228 if(me.reverse){ -229 //backward -230 if(me._reverseFlag < 0) ratio = 1 - ratio; -231 //forward -232 if(ratio < 1e-7){ -233 //repeat complete or not loop -234 if((me.repeat > 0 && me._repeatCount++ >= me.repeat) || (me.repeat == 0 && !me.loop)){ -235 complete = true; -236 }else{ -237 me._startTime = now(); -238 me._pausedTime = 0; -239 me._reverseFlag *= -1; -240 } -241 } -242 } -243 -244 //start callback -245 if(me.time == 0 && (callback = me.onStart)) callback.call(me, me); -246 me.time = elapsed; -247 -248 //render & update callback -249 me._render(ratio); -250 (callback = me.onUpdate) && callback.call(me, ratio, me); -251 -252 //check if complete -253 if(ratio >= 1){ -254 if(me.reverse){ -255 me._startTime = now(); -256 me._pausedTime = 0; -257 me._reverseFlag *= -1; -258 }else if(me.loop || me.repeat > 0 && me._repeatCount++ < me.repeat){ -259 me._startTime = now() + me.repeatDelay; -260 me._pausedTime = 0; -261 }else{ -262 complete = true; -263 } -264 } -265 -266 //next tween -267 var next = me._next; -268 if(next && next.time <= 0){ -269 var nextStartTime = next._startTime; -270 if(nextStartTime > 0 && nextStartTime <= time){ -271 //parallel tween -272 next._render(ratio); -273 next.time = elapsed; -274 Tween.add(next); -275 }else if(complete && (nextStartTime < 0 || nextStartTime > time)){ -276 //next tween -277 next.start(); -278 } -279 } -280 -281 //complete -282 if(complete){ -283 (callback = me.onComplete) && callback.call(me, me); -284 return true; -285 } -286 }, -287 -288 Statics: /** @lends Tween */ { -289 /** -290 * @private -291 */ -292 _tweens: [], -293 -294 /** -295 * 更新所有Tween实例。 -296 * @returns {Object} Tween。 -297 */ -298 tick: function(){ -299 var tweens = Tween._tweens, tween, i, len = tweens.length; -300 -301 for(i = 0; i < len; i++){ -302 tween = tweens[i]; -303 if(tween && tween._update(now())){ -304 tweens.splice(i, 1); -305 i--; -306 } -307 } -308 return Tween; -309 }, -310 -311 /** -312 * 添加Tween实例。 -313 * @param {Tween} tween 要添加的Tween对象。 -314 * @returns {Object} Tween。 -315 */ -316 add: function(tween){ -317 var tweens = Tween._tweens; -318 if(tweens.indexOf(tween) == -1) tweens.push(tween); -319 return Tween; -320 }, -321 -322 /** -323 * 删除Tween实例。 -324 * @param {Tween|Object|Array} tweenOrTarget 要删除的Tween对象或target对象或要删除的一组对象。 -325 * @returns {Object} Tween。 -326 */ -327 remove: function(tweenOrTarget){ -328 if(tweenOrTarget instanceof Array){ -329 for(var i = 0, l = tweenOrTarget.length;i < l;i ++){ -330 Tween.remove(tweenOrTarget[i]); -331 } -332 return Tween; -333 } -334 -335 var tweens = Tween._tweens, i; -336 if(tweenOrTarget instanceof Tween){ -337 i = tweens.indexOf(tweenOrTarget); -338 if(i > -1) tweens.splice(i, 1); -339 }else{ -340 for(i = 0; i < tweens.length; i++){ -341 if(tweens[i].target === tweenOrTarget){ -342 tweens.splice(i, 1); -343 i--; -344 } -345 } -346 } -347 -348 return Tween; -349 }, -350 -351 /** -352 * 删除所有Tween实例。 -353 * @returns {Object} Tween。 -354 */ -355 removeAll: function(){ -356 Tween._tweens.length = 0; -357 return Tween; -358 }, -359 -360 /** -361 * 创建一个缓动动画，让目标对象从开始属性变换到目标属性。 -362 * @param {Object|Array} target 缓动目标对象或缓动目标数组。 -363 * @param fromProps 缓动目标对象的开始属性。 -364 * @param toProps 缓动目标对象的目标属性。 -365 * @param params 缓动动画的参数。 -366 * @returns {Tween|Array} 一个Tween实例对象或Tween实例数组。 -367 */ -368 fromTo: function(target, fromProps, toProps, params){ -369 var isArray = target instanceof Array; -370 target = isArray ? target : [target]; -371 -372 var tween, i, stagger = params.stagger, tweens = []; -373 for(i = 0; i < target.length; i++){ -374 tween = new Tween(target[i], fromProps, toProps, params); -375 if(stagger) tween.delay = (params.delay || 0) + (i * stagger || 0); -376 tween.start(); -377 tweens.push(tween); -378 } -379 -380 return isArray?tweens:tween; -381 }, -382 -383 /** -384 * 创建一个缓动动画，让目标对象从当前属性变换到目标属性。 -385 * @param {Object|Array} target 缓动目标对象或缓动目标数组。 -386 * @param toProps 缓动目标对象的目标属性。 -387 * @param params 缓动动画的参数。 -388 * @returns {Tween|Array} 一个Tween实例对象或Tween实例数组。 -389 */ -390 to: function(target, toProps, params){ -391 return Tween.fromTo(target, null, toProps, params); -392 }, -393 -394 /** -395 * 创建一个缓动动画，让目标对象从指定的起始属性变换到当前属性。 -396 * @param {Object|Array} target 缓动目标对象或缓动目标数组。 -397 * @param fromProps 缓动目标对象的目标属性。 -398 * @param params 缓动动画的参数。 -399 * @returns {Tween|Array} 一个Tween实例对象或Tween实例数组。 -400 */ -401 from: function(target, fromProps, params){ -402 return Tween.fromTo(target, fromProps, null, params); -403 } -404 } -405 -406 }); -407 -408 })();\ No newline at end of file diff --git a/docs/api/symbols/src/src_util_TextureAtlas.js.html b/docs/api/symbols/src/src_util_TextureAtlas.js.html deleted file mode 100644 index 04eeeafe..00000000 --- a/docs/api/symbols/src/src_util_TextureAtlas.js.html +++ /dev/null @@ -1,228 +0,0 @@ -
1 /** - 2 * Hilo - 3 * Copyright 2015 alibaba.com - 4 * Licensed under the MIT License - 5 */ - 6 - 7 /** - 8 * @class TextureAtlas纹理集是将许多小的纹理图片整合到一起的一张大图。这个类可根据一个纹理集数据读取纹理小图、精灵动画等。 - 9 * @param {Object} atlasData 纹理集数据。它可包含如下数据： - 10 * <ul> - 11 * <li><b>image</b> - 纹理集图片。必需。</li> - 12 * <li><b>width</b> - 纹理集图片宽度。若frames数据为Object时，此属性必需。</li> - 13 * <li><b>height</b> - 纹理集图片高度。若frames数据为Object时，此属性必需。</li> - 14 * <li><b>frames</b> - 纹理集帧数据，可以是Array或Object。必需。 - 15 * <ul> - 16 * <li>若为Array，则每项均为一个纹理图片帧数据，如：[[0, 0, 50, 50], [0, 50, 50, 50]。</li> - 17 * <li>若为Object，则需包含frameWidth(帧宽)、frameHeight(帧高)、numFrames(帧数) 属性。</li> - 18 * </ul> - 19 * </li> - 20 * <li><b>sprites</b> - 纹理集精灵动画定义，其每个值均定义一个精灵。为Object对象。可选。 - 21 * <ul> - 22 * <li>若为Number，即此精灵只包含一帧，此帧为帧数据中索引为当前值的帧。如：sprites:{'foo':1}。</li> - 23 * <li>若为Array，则每项均为一个帧的索引值。如：sprites:{'foo':[0, 1, 2, 3]}。</li> - 24 * <li>若为Object，则需包含from(起始帧索引值)、to(末帧索引值) 属性。</li> - 25 * </ul> - 26 * </li> - 27 * </ul> - 28 * @module hilo/util/TextureAtlas - 29 * @requires hilo/core/Class - 30 */ - 31 var TextureAtlas = (function(){ - 32 - 33 return Class.create(/** @lends TextureAtlas.prototype */{ - 34 constructor: function(atlasData){ - 35 this._frames = parseTextureFrames(atlasData); - 36 this._sprites = parseTextureSprites(atlasData, this._frames); - 37 }, - 38 - 39 _frames: null, - 40 _sprites: null, - 41 - 42 /** - 43 * 获取指定索引位置index的帧数据。 - 44 * @param {Int} index 要获取帧的索引位置。 - 45 * @returns {Object} 帧数据。 - 46 */ - 47 getFrame: function(index){ - 48 var frames = this._frames; - 49 return frames && frames[index]; - 50 }, - 51 - 52 /** - 53 * 获取指定id的精灵数据。 - 54 * @param {String} id 要获取精灵的id。 - 55 * @returns {Object} 精灵数据。 - 56 */ - 57 getSprite: function(id){ - 58 var sprites = this._sprites; - 59 return sprites && sprites[id]; - 60 }, - 61 - 62 Statics: /** @lends TextureAtlas */ { - 63 /** - 64 * 创建精灵帧数据的快捷方法。 - 65 * @param {String|Array} name 动画名称|一组动画数据 - 66 * @param {String} frames 帧数据 eg:"0-5"代表第0到第5帧 - 67 * @param {Number} w 每帧的宽 - 68 * @param {Number} h 每帧的高 - 69 * @param {Bollean} loop 是否循环 - 70 * @param {Number} duration 每帧间隔 默认单位帧, 如果sprite的timeBased为true则单位是毫秒，默认一帧 - 71 * @example - 72 * //方式一 单个动画 - 73 * createSpriteFrames("walk", "0-5,8,9", meImg, 55, 88, true, 1); - 74 * //方式二 多组动画 - 75 * createSpriteFrames([ - 76 * ["walk", "0-5,8,9", meImg, 55, 88, true, 1], - 77 * ["jump", "0-5", meImg, 55, 88, false, 1] - 78 * ]); - 79 */ - 80 createSpriteFrames:function(name, frames, img, w, h, loop, duration){ - 81 if(Object.prototype.toString.call(name) === "[object Array]"){ - 82 var frames = []; - 83 for(var i = 0, l = name.length;i < l;i ++){ - 84 frames = frames.concat(this.createSpriteFrames.apply(this, name[i])); - 85 } - 86 return frames; - 87 } - 88 else{ - 89 if(typeof(frames) === "string"){ - 90 var all = frames.split(","); - 91 frames = []; - 92 for(var j = 0, jl = all.length;j < jl;j ++){ - 93 var temp = all[j].split("-"); - 94 if(temp.length == 1){ - 95 frames.push(parseInt(temp[0])); - 96 } - 97 else{ - 98 for(var i = parseInt(temp[0]), l = parseInt(temp[1]);i <= l;i ++){ - 99 frames.push(i); -100 } -101 } -102 } -103 } -104 -105 var col = Math.floor(img.width/w); -106 for(var i = 0;i < frames.length;i ++){ -107 var n = frames[i]; -108 frames[i] = { -109 rect:[w*(n%col), h*Math.floor(n/col), w, h], -110 image:img, -111 duration:duration -112 } -113 } -114 frames[0].name = name; -115 if(loop){ -116 frames[frames.length-1].next = name; -117 } -118 else{ -119 frames[frames.length-1].stop = true; -120 } -121 return frames; -122 } -123 } -124 } -125 }); -126 -127 /** -128 * 解析纹理集帧数据。 -129 * @private -130 */ -131 function parseTextureFrames(atlasData){ -132 var frameData = atlasData.frames; -133 if(!frameData) return null; -134 -135 var frames = [], obj; -136 -137 if(frameData instanceof Array){ //frames by array -138 for(var i = 0, len = frameData.length; i < len; i++){ -139 obj = frameData[i]; -140 frames[i] = { -141 image: atlasData.image, -142 rect: obj -143 }; -144 } -145 }else{ //frames by object -146 var frameWidth = frameData.frameWidth; -147 var frameHeight = frameData.frameHeight; -148 var cols = atlasData.width / frameWidth | 0; -149 var rows = atlasData.height / frameHeight | 0; -150 var numFrames = frameData.numFrames || cols * rows; -151 for(var i = 0; i < numFrames; i++){ -152 frames[i] = { -153 image: atlasData.image, -154 rect: [i%cols*frameWidth, (i/cols|0)*frameHeight, frameWidth, frameHeight] -155 } -156 } -157 } -158 -159 return frames; -160 } -161 -162 /** -163 * 解析精灵数据。 -164 * @private -165 */ -166 function parseTextureSprites(atlasData, frames){ -167 var spriteData = atlasData.sprites; -168 if(!spriteData) return null; -169 -170 var sprites = {}, sprite, spriteFrames, spriteFrame; -171 -172 for(var s in spriteData){ -173 sprite = spriteData[s]; -174 if(isNumber(sprite)){ //single frame -175 spriteFrames = translateSpriteFrame(frames[sprite]); -176 }else if(sprite instanceof Array){ //frames by array -177 spriteFrames = []; -178 for(var i = 0, len = sprite.length; i < len; i++){ -179 var spriteObj = sprite[i], frameObj; -180 if(isNumber(spriteObj)){ -181 spriteFrame = translateSpriteFrame(frames[spriteObj]); -182 }else{ -183 frameObj = spriteObj.rect; -184 if(isNumber(frameObj)) frameObj = frames[spriteObj.rect]; -185 spriteFrame = translateSpriteFrame(frameObj, spriteObj); -186 } -187 spriteFrames[i] = spriteFrame; -188 } -189 }else{ //frames by object -190 spriteFrames = []; -191 for(var i = sprite.from; i <= sprite.to; i++){ -192 spriteFrames[i - sprite.from] = translateSpriteFrame(frames[i], sprite[i]); -193 } -194 } -195 sprites[s] = spriteFrames; -196 } -197 -198 return sprites; -199 } -200 -201 function translateSpriteFrame(frameObj, spriteObj){ -202 var spriteFrame = { -203 image: frameObj.image, -204 rect: frameObj.rect -205 }; -206 -207 if(spriteObj){ -208 spriteFrame.name = spriteObj.name || null; -209 spriteFrame.duration = spriteObj.duration || 0; -210 spriteFrame.stop = !!spriteObj.stop; -211 spriteFrame.next = spriteObj.next || null; -212 } -213 -214 return spriteFrame; -215 } -216 -217 function isNumber(value){ -218 return typeof value === 'number'; -219 } -220 -221 })();\ No newline at end of file diff --git a/docs/api/symbols/src/src_util_Ticker.js.html b/docs/api/symbols/src/src_util_Ticker.js.html deleted file mode 100644 index b4bd36cf..00000000 --- a/docs/api/symbols/src/src_util_Ticker.js.html +++ /dev/null @@ -1,145 +0,0 @@ -
1 /** - 2 * Hilo - 3 * Copyright 2015 alibaba.com - 4 * Licensed under the MIT License - 5 */ - 6 - 7 /** - 8 * @class Ticker是一个定时器类。它可以按指定帧率重复运行，从而按计划执行代码。 - 9 * @param {Number} fps 指定定时器的运行帧率。 - 10 * @module hilo/util/Ticker - 11 * @requires hilo/core/Class - 12 * @requires hilo/core/Hilo - 13 */ - 14 var Ticker = Class.create(/** @lends Ticker.prototype */{ - 15 constructor: function(fps){ - 16 this._targetFPS = fps || 30; - 17 this._interval = 1000 / this._targetFPS; - 18 this._tickers = []; - 19 }, - 20 - 21 _paused: false, - 22 _targetFPS: 0, - 23 _interval: 0, - 24 _intervalId: null, - 25 _tickers: null, - 26 _lastTime: 0, - 27 _tickCount: 0, - 28 _tickTime: 0, - 29 _measuredFPS: 0, - 30 - 31 /** - 32 * 启动定时器。 - 33 * @param {Boolean} userRAF 是否使用requestAnimationFrame，默认为false。 - 34 */ - 35 start: function(useRAF){ - 36 if(this._intervalId) return; - 37 this._lastTime = +new Date(); - 38 - 39 var self = this, interval = this._interval, - 40 raf = window.requestAnimationFrame || - 41 window[Hilo.browser.jsVendor + 'RequestAnimationFrame']; - 42 - 43 if(useRAF && raf){ - 44 var tick = function(){ - 45 self._tick(); - 46 } - 47 var runLoop = function(){ - 48 self._intervalId = setTimeout(runLoop, interval); - 49 raf(tick); - 50 }; - 51 }else{ - 52 runLoop = function(){ - 53 self._intervalId = setTimeout(runLoop, interval); - 54 self._tick(); - 55 }; - 56 } - 57 - 58 runLoop(); - 59 }, - 60 - 61 /** - 62 * 停止定时器。 - 63 */ - 64 stop: function(){ - 65 clearTimeout(this._intervalId); - 66 this._intervalId = null; - 67 this._lastTime = 0; - 68 }, - 69 - 70 /** - 71 * 暂停定时器。 - 72 */ - 73 pause: function(){ - 74 this._paused = true; - 75 }, - 76 - 77 /** - 78 * 恢复定时器。 - 79 */ - 80 resume: function(){ - 81 this._paused = false; - 82 }, - 83 - 84 /** - 85 * @private - 86 */ - 87 _tick: function(){ - 88 if(this._paused) return; - 89 var startTime = +new Date(), - 90 deltaTime = startTime - this._lastTime, - 91 tickers = this._tickers; - 92 - 93 //calculates the real fps - 94 if(++this._tickCount >= this._targetFPS){ - 95 this._measuredFPS = 1000 / (this._tickTime / this._tickCount) + 0.5 >> 0; - 96 this._tickCount = 0; - 97 this._tickTime = 0; - 98 }else{ - 99 this._tickTime += startTime - this._lastTime; -100 } -101 this._lastTime = startTime; -102 -103 for(var i = 0, len = tickers.length; i < len; i++){ -104 tickers[i].tick(deltaTime); -105 } -106 }, -107 -108 /** -109 * 获得测定的运行时帧率。 -110 */ -111 getMeasuredFPS: function(){ -112 return this._measuredFPS; -113 }, -114 -115 /** -116 * 添加定时器对象。定时器对象必须实现 tick 方法。 -117 * @param {Object} tickObject 要添加的定时器对象。此对象必须包含 tick 方法。 -118 */ -119 addTick: function(tickObject){ -120 if(!tickObject || typeof(tickObject.tick) != 'function'){ -121 throw new Error('Ticker: The tick object must implement the tick method.'); -122 } -123 this._tickers.push(tickObject); -124 }, -125 -126 /** -127 * 删除定时器对象。 -128 * @param {Object} tickObject 要删除的定时器对象。 -129 */ -130 removeTick: function(tickObject){ -131 var tickers = this._tickers, -132 index = tickers.indexOf(tickObject); -133 if(index >= 0){ -134 tickers.splice(index, 1); -135 } -136 } -137 -138 });\ No newline at end of file diff --git a/docs/api/symbols/src/src_util_drag.js.html b/docs/api/symbols/src/src_util_drag.js.html deleted file mode 100644 index 642bc8d8..00000000 --- a/docs/api/symbols/src/src_util_drag.js.html +++ /dev/null @@ -1,109 +0,0 @@ -
1 /** - 2 * Hilo - 3 * Copyright 2015 alibaba.com - 4 * Licensed under the MIT License - 5 */ - 6 - 7 /** - 8 * <iframe src='../../../examples/drag.html?noHeader' width = '550' height = '250' scrolling='no'></iframe> - 9 * <br/> - 10 * 使用示例: - 11 * <pre> - 12 * var bmp = new Bitmap({image:img}); - 13 * Hilo.copy(bmp, Hilo.drag); - 14 * bmp.startDrag([0, 0, 550, 400]); - 15 * </pre> - 16 * @class drag是一个包含拖拽功能的mixin。可以通过 Class.mix(view, drag)或Hilo.copy(view, drag)来为view增加拖拽功能。 - 17 * @mixin - 18 * @static - 19 * @module hilo/util/drag - 20 * @requires hilo/core/Class - 21 * @requires hilo/core/Hilo - 22 */ - 23 var drag = { - 24 /** - 25 * 开始拖拽 - 26 * @param {Array} bounds 拖拽范围，基于父容器坐标系，[x, y, width, height]， 默认无限制 - 27 */ - 28 startDrag:function(bounds){ - 29 var that = this; - 30 var stage; - 31 var bounds = bounds||[-Infinity, -Infinity, Infinity, Infinity]; - 32 var mouse = { - 33 x:0, - 34 y:0, - 35 preX:0, - 36 preY:0 - 37 }; - 38 var minX = bounds[0]; - 39 var minY = bounds[1]; - 40 var maxX = bounds[2] == Infinity?Infinity:minX + bounds[2]; - 41 var maxY = bounds[3] == Infinity?Infinity:minY + bounds[3]; - 42 - 43 function onStart(e){ - 44 e.stopPropagation(); - 45 updateMouse(e); - 46 that.off(Hilo.event.POINTER_START, onStart); - 47 - 48 that.fire("dragStart", mouse); - 49 - 50 that.__dragX = that.x - mouse.x; - 51 that.__dragY = that.y - mouse.y; - 52 - 53 if(!stage){ - 54 stage = this.getStage(); - 55 } - 56 stage.on(Hilo.event.POINTER_MOVE, onMove); - 57 document.addEventListener(Hilo.event.POINTER_END, onStop); - 58 } - 59 - 60 function onStop(e){ - 61 document.removeEventListener(Hilo.event.POINTER_END, onStop); - 62 stage && stage.off(Hilo.event.POINTER_MOVE, onMove); - 63 - 64 that.fire("dragEnd", mouse); - 65 that.on(Hilo.event.POINTER_START, onStart); - 66 } - 67 - 68 function onMove(e){ - 69 updateMouse(e); - 70 - 71 that.fire("dragMove", mouse); - 72 - 73 var x = mouse.x + that.__dragX; - 74 var y = mouse.y + that.__dragY; - 75 - 76 that.x = Math.max(minX, Math.min(maxX, x)); - 77 that.y = Math.max(minY, Math.min(maxY, y)); - 78 } - 79 - 80 function updateMouse(e){ - 81 mouse.preX = mouse.x; - 82 mouse.preY = mouse.y; - 83 mouse.x = e.stageX; - 84 mouse.y = e.stageY; - 85 } - 86 - 87 function stopDrag(){ - 88 document.removeEventListener(Hilo.event.POINTER_END, onStop); - 89 stage && stage.off(Hilo.event.POINTER_MOVE, onMove); - 90 that.off(Hilo.event.POINTER_START, onStart); - 91 } - 92 that.on(Hilo.event.POINTER_START, onStart); - 93 - 94 that.stopDrag = stopDrag; - 95 }, - 96 /** - 97 * 停止拖拽 - 98 */ - 99 stopDrag:function(){ -100 -101 } -102 };\ No newline at end of file diff --git a/docs/api/symbols/src/src_util_polyfill.js.html b/docs/api/symbols/src/src_util_polyfill.js.html deleted file mode 100644 index 6de3c941..00000000 --- a/docs/api/symbols/src/src_util_polyfill.js.html +++ /dev/null @@ -1,46 +0,0 @@ -
1 /** - 2 * Hilo - 3 * Copyright 2015 alibaba.com - 4 * Licensed under the MIT License - 5 */ - 6 - 7 var arrayProto = Array.prototype, - 8 slice = arrayProto.slice; - 9 - 10 //polyfiil for Array.prototype.indexOf - 11 arrayProto.indexOf = arrayProto.indexOf || function(elem, fromIndex){ - 12 fromIndex = fromIndex || 0; - 13 var len = this.length, i; - 14 if(len == 0 || fromIndex >= len) return -1; - 15 if(fromIndex < 0) fromIndex = len + fromIndex; - 16 for(i = fromIndex; i < len; i++){ - 17 if(this[i] === elem) return i; - 18 } - 19 return -1; - 20 }; - 21 - 22 var fnProto = Function.prototype; - 23 - 24 //polyfill for Function.prototype.bind - 25 fnProto.bind = fnProto.bind || function(thisArg){ - 26 var target = this, - 27 boundArgs = slice.call(arguments, 1), - 28 F = function(){}; - 29 - 30 function bound(){ - 31 var args = boundArgs.concat(slice.call(arguments)); - 32 return target.apply(this instanceof bound ? this : thisArg, args); - 33 } - 34 - 35 F.prototype = target.prototype; - 36 bound.prototype = new F(); - 37 - 38 return bound; - 39 };\ No newline at end of file diff --git a/docs/api/symbols/src/src_view_Bitmap.js.html b/docs/api/symbols/src/src_view_Bitmap.js.html deleted file mode 100644 index 395feb42..00000000 --- a/docs/api/symbols/src/src_view_Bitmap.js.html +++ /dev/null @@ -1,68 +0,0 @@ -
1 /** - 2 * Hilo - 3 * Copyright 2015 alibaba.com - 4 * Licensed under the MIT License - 5 */ - 6 - 7 /** - 8 * <iframe src='../../../examples/Bitmap.html?noHeader' width = '300' height = '200' scrolling='no'></iframe> - 9 * <br/> - 10 * 使用示例: - 11 * <pre> - 12 * var bmp = new Hilo.Bitmap({image:imgElem, rect:[0, 0, 100, 100]}); - 13 * stage.addChild(bmp); - 14 * </pre> - 15 * @class Bitmap类表示位图图像类。 - 16 * @augments View - 17 * @param {Object} properties 创建对象的属性参数。可包含此类所有可写属性。此外还包括： - 18 * <ul> - 19 * <li><b>image</b> - 位图所在的图像image。必需。</li> - 20 * <li><b>rect</b> - 位图在图像image中矩形区域。</li> - 21 * </ul> - 22 * @module hilo/view/Bitmap - 23 * @requires hilo/core/Hilo - 24 * @requires hilo/core/Class - 25 * @requires hilo/view/View - 26 * @requires hilo/view/Drawable - 27 */ - 28 var Bitmap = Class.create(/** @lends Bitmap.prototype */{ - 29 Extends: View, - 30 constructor: function(properties){ - 31 properties = properties || {}; - 32 this.id = this.id || properties.id || Hilo.getUid("Bitmap"); - 33 Bitmap.superclass.constructor.call(this, properties); - 34 - 35 this.drawable = new Drawable(properties); - 36 - 37 //init width and height - 38 if(!this.width || !this.height){ - 39 var rect = this.drawable.rect; - 40 if(rect){ - 41 this.width = rect[2]; - 42 this.height = rect[3]; - 43 } - 44 } - 45 }, - 46 - 47 /** - 48 * 设置位图的图片。 - 49 * @param {Image|String} image 图片对象或地址。 - 50 * @param {Array} rect 指定位图在图片image的矩形区域。 - 51 * @returns {Bitmap} 位图本身。 - 52 */ - 53 setImage: function(image, rect){ - 54 this.drawable.init({image:image, rect:rect}); - 55 if(rect){ - 56 this.width = rect[2]; - 57 this.height = rect[3]; - 58 } - 59 return this; - 60 } - 61 });\ No newline at end of file diff --git a/docs/api/symbols/src/src_view_BitmapText.js.html b/docs/api/symbols/src/src_view_BitmapText.js.html deleted file mode 100644 index 5ac61715..00000000 --- a/docs/api/symbols/src/src_view_BitmapText.js.html +++ /dev/null @@ -1,176 +0,0 @@ -
1 /** - 2 * Hilo - 3 * Copyright 2015 alibaba.com - 4 * Licensed under the MIT License - 5 */ - 6 - 7 /** - 8 * <iframe src='../../../examples/BitmapText.html?noHeader' width = '550' height = '80' scrolling='no'></iframe> - 9 * <br/> - 10 * @class BitmapText类提供使用位图文本的功能。当前仅支持单行文本。 - 11 * @augments Container - 12 * @param {Object} properties 创建对象的属性参数。可包含此类所有可写属性。 - 13 * @module hilo/view/BitmapText - 14 * @requires hilo/core/Class - 15 * @requires hilo/core/Hilo - 16 * @requires hilo/view/Container - 17 * @requires hilo/view/Bitmap - 18 * @property {Object} glyphs 位图字体的字形集合。格式为：{letter:{image:img, rect:[0,0,100,100]}}。 - 19 * @property {Number} letterSpacing 字距，即字符间的间隔。默认值为0。 - 20 * @property {String} text 位图文本的文本内容。只读属性。设置文本请使用setFont方法。 - 21 * @property {String} textAlign 文本对齐方式，值为left、center、right, 默认left。只读属性。设置文本请使用setTextAlign方法。 - 22 */ - 23 var BitmapText = Class.create(/** @lends BitmapText.prototype */{ - 24 Extends: Container, - 25 constructor: function(properties){ - 26 properties = properties || {}; - 27 this.id = this.id || properties.id || Hilo.getUid('BitmapText'); - 28 BitmapText.superclass.constructor.call(this, properties); - 29 - 30 var text = properties.text + ''; - 31 if(text){ - 32 this.text = ''; - 33 this.setText(text); - 34 } - 35 - 36 this.pointerChildren = false; //disable user events for single letters - 37 }, - 38 - 39 glyphs: null, - 40 letterSpacing: 0, - 41 text: '', - 42 textAlign:'left', - 43 - 44 /** - 45 * 设置位图文本的文本内容。 - 46 * @param {String} text 要设置的文本内容。 - 47 * @returns {BitmapText} BitmapText对象本身。链式调用支持。 - 48 */ - 49 setText: function(text){ - 50 var me = this, str = text.toString(), len = str.length; - 51 if(me.text == str) return; - 52 me.text = str; - 53 - 54 var i, charStr, charGlyph, charObj, width = 0, height = 0, left = 0; - 55 for(i = 0; i < len; i++){ - 56 charStr = str.charAt(i); - 57 charGlyph = me.glyphs[charStr]; - 58 if(charGlyph){ - 59 left = width + (width > 0 ? me.letterSpacing : 0); - 60 if(me.children[i]){ - 61 charObj = me.children[i]; - 62 charObj.setImage(charGlyph.image, charGlyph.rect); - 63 } - 64 else{ - 65 charObj = me._createBitmap(charGlyph); - 66 me.addChild(charObj); - 67 } - 68 charObj.x = left; - 69 width = left + charGlyph.rect[2]; - 70 height = Math.max(height, charGlyph.rect[3]); - 71 } - 72 } - 73 - 74 for(i = me.children.length - 1;i >= len;i --){ - 75 me._releaseBitmap(me.children[i]); - 76 me.children[i].removeFromParent(); - 77 } - 78 - 79 me.width = width; - 80 me.height = height; - 81 this.setTextAlign(); - 82 return me; - 83 }, - 84 _createBitmap:function(cfg){ - 85 var bmp; - 86 if(BitmapText._pool.length){ - 87 bmp = BitmapText._pool.pop(); - 88 bmp.setImage(cfg.image, cfg.rect); - 89 } - 90 else{ - 91 bmp = new Bitmap({ - 92 image:cfg.image, - 93 rect:cfg.rect - 94 }); - 95 } - 96 return bmp; - 97 }, - 98 _releaseBitmap:function(bmp){ - 99 BitmapText._pool.push(bmp); -100 }, -101 -102 /** -103 * 设置位图文本的对齐方式。 -104 * @param textAlign 文本对齐方式，值为left、center、right -105 * @returns {BitmapText} BitmapText对象本身。链式调用支持。 -106 */ -107 setTextAlign:function(textAlign){ -108 this.textAlign = textAlign||this.textAlign; -109 switch(this.textAlign){ -110 case "center": -111 this.pivotX = this.width * .5; -112 break; -113 case "right": -114 this.pivotX = this.width; -115 break; -116 case "left": -117 default: -118 this.pivotX = 0; -119 break; -120 } -121 return this; -122 }, -123 -124 /** -125 * 返回能否使用当前指定的字体显示提供的字符串。 -126 * @param {String} str 要检测的字符串。 -127 * @returns {Boolean} 是否能使用指定字体。 -128 */ -129 hasGlyphs: function(str){ -130 var glyphs = this.glyphs; -131 if(!glyphs) return false; -132 -133 var str = str.toString(), len = str.length, i; -134 for(i = 0; i < len; i++){ -135 if(!glyphs[str.charAt(i)]) return false; -136 } -137 return true; -138 }, -139 -140 Statics:/** @lends BitmapText */{ -141 _pool:[], -142 /** -143 * 简易方式生成字形集合。 -144 * @static -145 * @param {String} text 字符文本。 -146 * @param {Image} image 字符图片。 -147 * @param {Number} col 列数 默认和文本字数一样 -148 * @param {Number} row 行数 默认1行 -149 * @returns {BitmapText} BitmapText对象本身。链式调用支持。 -150 */ -151 createGlyphs:function(text, image, col, row){ -152 var str = text.toString(); -153 col = col||str.length; -154 row = row||1; -155 var w = image.width/col; -156 var h = image.height/row; -157 var glyphs = {}; -158 for(var i = 0, l = text.length;i < l;i ++){ -159 charStr = str.charAt(i); -160 glyphs[charStr] = { -161 image:image, -162 rect:[w * (i % col), h * Math.floor(i / col), w, h] -163 } -164 } -165 return glyphs; -166 } -167 } -168 -169 });\ No newline at end of file diff --git a/docs/api/symbols/src/src_view_Button.js.html b/docs/api/symbols/src/src_view_Button.js.html deleted file mode 100644 index 159d2f39..00000000 --- a/docs/api/symbols/src/src_view_Button.js.html +++ /dev/null @@ -1,170 +0,0 @@ -
1 /** - 2 * Hilo - 3 * Copyright 2015 alibaba.com - 4 * Licensed under the MIT License - 5 */ - 6 - 7 /** - 8 * <iframe src='../../../examples/Button.html?noHeader' width = '320' height = '170' scrolling='no'></iframe> - 9 * <br/> - 10 * 示例: - 11 * <pre> - 12 * var btn = new Hilo.Button({ - 13 * image: buttonImage, - 14 * upState: {rect:[0, 0, 64, 64]}, - 15 * overState: {rect:[64, 0, 64, 64]}, - 16 * downState: {rect:[128, 0, 64, 64]}, - 17 * disabledState: {rect:[192, 0, 64, 64]} - 18 * }); - 19 * </pre> - 20 * @class Button类表示简单按钮类。它有弹起、经过、按下和不可用等四种状态。 - 21 * @augments View - 22 * @param {Object} properties 创建对象的属性参数。可包含此类所有可写属性。此外还包括： - 23 * <ul> - 24 * <li><b>image</b> - 按钮图片所在的image对象。</li> - 25 * </ul> - 26 * @module hilo/view/Button - 27 * @requires hilo/core/Hilo - 28 * @requires hilo/core/Class - 29 * @requires hilo/view/View - 30 * @requires hilo/view/Drawable - 31 * @property {Object} upState 按钮弹起状态的属性或其drawable的属性的集合。 - 32 * @property {Object} overState 按钮经过状态的属性或其drawable的属性的集合。 - 33 * @property {Object} downState 按钮按下状态的属性或其drawable的属性的集合。 - 34 * @property {Object} disabledState 按钮不可用状态的属性或其drawable的属性的集合。 - 35 * @property {String} state 按钮的状态名称。它是 Button.UP|OVER|DOWN|DISABLED 之一。 只读属性。 - 36 * @property {Boolean} enabled 指示按钮是否可用。默认为true。只读属性。 - 37 * @property {Boolean} useHandCursor 当设置为true时，表示指针滑过按钮上方时是否显示手形光标。默认为true。 - 38 */ - 39 var Button = Class.create(/** @lends Button.prototype */{ - 40 Extends: View, - 41 constructor: function(properties){ - 42 properties = properties || {}; - 43 this.id = this.id || properties.id || Hilo.getUid("Button"); - 44 Button.superclass.constructor.call(this, properties); - 45 - 46 this.drawable = new Drawable(properties); - 47 this.setState(Button.UP); - 48 }, - 49 - 50 upState: null, - 51 overState: null, - 52 downState: null, - 53 disabledState: null, - 54 - 55 state: null, - 56 enabled: true, - 57 useHandCursor: true, - 58 - 59 /** - 60 * 设置按钮是否可用。 - 61 * @param {Boolean} enabled 指示按钮是否可用。 - 62 * @returns {Button} 按钮本身。 - 63 */ - 64 setEnabled: function(enabled){ - 65 if(this.enabled != enabled){ - 66 if(!enabled){ - 67 this.setState(Button.DISABLED); - 68 }else{ - 69 this.setState(Button.UP); - 70 } - 71 } - 72 return this; - 73 }, - 74 - 75 /** - 76 * 设置按钮的状态。此方法由Button内部调用，一般无需使用此方法。 - 77 * @param {String} state 按钮的新的状态。 - 78 * @returns {Button} 按钮本身。 - 79 */ - 80 setState: function(state){ - 81 if(this.state !== state){ - 82 this.state = state; - 83 this.pointerEnabled = this.enabled = state !== Button.DISABLED; - 84 - 85 var stateObj; - 86 switch(state){ - 87 case Button.UP: - 88 stateObj = this.upState; - 89 break; - 90 case Button.OVER: - 91 stateObj = this.overState; - 92 break; - 93 case Button.DOWN: - 94 stateObj = this.downState; - 95 break; - 96 case Button.DISABLED: - 97 stateObj = this.disabledState; - 98 break; - 99 } -100 -101 if(stateObj){ -102 this.drawable.init(stateObj); -103 Hilo.copy(this, stateObj, true); -104 } -105 } -106 -107 return this; -108 }, -109 -110 /** -111 * overwrite -112 * @private -113 */ -114 fire: function(type, detail){ -115 if(!this.enabled) return; -116 -117 var evtType = typeof type === 'string' ? type : type.type; -118 switch(evtType){ -119 case 'mousedown': -120 case 'touchstart': -121 case 'touchmove': -122 this.setState(Button.DOWN); -123 break; -124 case "mouseover": -125 this.setState(Button.OVER); -126 break; -127 case 'mouseup': -128 if(this.overState) this.setState(Button.OVER); -129 else if(this.upState) this.setState(Button.UP); -130 break; -131 case 'touchend': -132 case 'touchout': -133 case 'mouseout': -134 this.setState(Button.UP); -135 break; -136 } -137 -138 return Button.superclass.fire.call(this, type, detail); -139 }, -140 -141 Statics: /** @lends Button */ { -142 /** -143 * 按钮弹起状态的常量值，即：'up'。 -144 * @type String -145 */ -146 UP: 'up', -147 /** -148 * 按钮经过状态的常量值，即：'over'。 -149 * @type String -150 */ -151 OVER: 'over', -152 /** -153 * 按钮按下状态的常量值，即：'down'。 -154 * @type String -155 */ -156 DOWN: 'down', -157 /** -158 * 按钮不可用状态的常量值，即：'disabled'。 -159 * @type String -160 */ -161 DISABLED: 'disabled' -162 } -163 });\ No newline at end of file diff --git a/docs/api/symbols/src/src_view_CacheMixin.js.html b/docs/api/symbols/src/src_view_CacheMixin.js.html deleted file mode 100644 index 6e0e17df..00000000 --- a/docs/api/symbols/src/src_view_CacheMixin.js.html +++ /dev/null @@ -1,56 +0,0 @@ -
1 /** - 2 * Hilo - 3 * Copyright 2015 alibaba.com - 4 * Licensed under the MIT License - 5 */ - 6 - 7 var _cacheCanvas = Hilo.createElement('canvas'); - 8 var _cacheContext = _cacheCanvas.getContext('2d'); - 9 /** - 10 * @class CacheMixin是一个包含cache功能的mixin。可以通过 Class.mix(target, CacheMixin) 来为target增加cache功能。 - 11 * @mixin - 12 * @static - 13 * @module hilo/view/CacheMixin - 14 * @requires hilo/core/Hilo - 15 * @requires hilo/core/Class - 16 * @requires hilo/view/Drawable - 17 */ - 18 var CacheMixin = { - 19 _cacheDirty:true, - 20 /** - 21 * 缓存到图片里。可用来提高渲染效率。 - 22 * @param {Boolean} forceUpdate 是否强制更新缓存 - 23 */ - 24 cache: function(forceUpdate){ - 25 if(forceUpdate || this._cacheDirty || !this._cacheImage){ - 26 this.updateCache(); - 27 } - 28 }, - 29 /** - 30 * 更新缓存 - 31 */ - 32 updateCache:function(){ - 33 //TODO:width, height自动判断 - 34 _cacheCanvas.width = this.width; - 35 _cacheCanvas.height = this.height; - 36 this._draw(_cacheContext); - 37 this._cacheImage = new Image(); - 38 this._cacheImage.src = _cacheCanvas.toDataURL(); - 39 this.drawable = this.drawable||new Drawable(); - 40 this.drawable.init(this._cacheImage); - 41 this._cacheDirty = false; - 42 }, - 43 /** - 44 * 设置缓存是否dirty - 45 */ - 46 setCacheDirty:function(dirty){ - 47 this._cacheDirty = dirty; - 48 } - 49 };\ No newline at end of file diff --git a/docs/api/symbols/src/src_view_Container.js.html b/docs/api/symbols/src/src_view_Container.js.html deleted file mode 100644 index f82c4577..00000000 --- a/docs/api/symbols/src/src_view_Container.js.html +++ /dev/null @@ -1,352 +0,0 @@ -
1 /** - 2 * Hilo - 3 * Copyright 2015 alibaba.com - 4 * Licensed under the MIT License - 5 */ - 6 - 7 /** - 8 * @class Container是所有容器类的基类。每个Container都可以添加其他可视对象为子级。 - 9 * @augments View - 10 * @param {Object} properties 创建对象的属性参数。可包含此类所有可写属性。 - 11 * @module hilo/view/Container - 12 * @requires hilo/core/Hilo - 13 * @requires hilo/core/Class - 14 * @requires hilo/view/View - 15 * @property {Array} children 容器的子元素列表。只读。 - 16 * @property {Boolean} pointerChildren 指示容器的子元素是否能响应用户交互事件。默认为true。 - 17 * @property {Boolean} clipChildren 指示是否裁剪超出容器范围的子元素。默认为false。 - 18 */ - 19 var Container = Class.create(/** @lends Container.prototype */{ - 20 Extends: View, - 21 constructor: function(properties){ - 22 properties = properties || {}; - 23 this.id = this.id || properties.id || Hilo.getUid("Container"); - 24 Container.superclass.constructor.call(this, properties); - 25 - 26 if(this.children) this._updateChildren(); - 27 else this.children = []; - 28 }, - 29 - 30 children: null, - 31 pointerChildren: true, - 32 clipChildren: false, - 33 - 34 /** - 35 * 返回容器的子元素的数量。 - 36 * @returns {Uint} 容器的子元素的数量。 - 37 */ - 38 getNumChildren: function(){ - 39 return this.children.length; - 40 }, - 41 - 42 /** - 43 * 在指定索引位置添加子元素。 - 44 * @param {View} child 要添加的子元素。 - 45 * @param {Number} index 指定的索引位置，从0开始。 - 46 */ - 47 addChildAt: function(child, index){ - 48 var children = this.children, - 49 len = children.length, - 50 parent = child.parent; - 51 - 52 index = index < 0 ? 0 : index > len ? len : index; - 53 var childIndex = this.getChildIndex(child); - 54 if(childIndex == index){ - 55 return this; - 56 }else if(childIndex >= 0){ - 57 children.splice(childIndex, 1); - 58 index = index == len ? len - 1 : index; - 59 }else if(parent){ - 60 parent.removeChild(child); - 61 } - 62 - 63 children.splice(index, 0, child); - 64 - 65 //直接插入，影响插入位置之后的深度 - 66 if(childIndex < 0){ - 67 this._updateChildren(index); - 68 } - 69 //只是移动时影响中间段的深度 - 70 else{ - 71 var startIndex = childIndex < index ? childIndex : index; - 72 var endIndex = childIndex < index ? index : childIndex;; - 73 this._updateChildren(startIndex, endIndex + 1); - 74 } - 75 - 76 return this; - 77 }, - 78 - 79 /** - 80 * 在最上面添加子元素。 - 81 * @param {View} child 要添加的子元素。 - 82 */ - 83 addChild: function(child){ - 84 var total = this.children.length, - 85 args = arguments; - 86 - 87 for(var i = 0, len = args.length; i < len; i++){ - 88 this.addChildAt(args[i], total + i); - 89 } - 90 return this; - 91 }, - 92 - 93 /** - 94 * 在指定索引位置删除子元素。 - 95 * @param {Int} index 指定删除元素的索引位置，从0开始。 - 96 * @returns {View} 被删除的对象。 - 97 */ - 98 removeChildAt: function(index){ - 99 var children = this.children; -100 if(index < 0 || index >= children.length) return null; -101 -102 var child = children[index]; -103 if(child){ -104 //NOTE: use `__renderer` for fixing child removal (DOMRenderer and FlashRenderer only). -105 //Do `not` use it in any other case. -106 if(!child.__renderer){ -107 var obj = child; -108 while(obj = obj.parent){ -109 //obj is stage -110 if(obj.renderer){ -111 child.__renderer = obj.renderer; -112 break; -113 } -114 else if(obj.__renderer){ -115 child.__renderer = obj.__renderer; -116 break; -117 } -118 } -119 } -120 -121 if(child.__renderer){ -122 child.__renderer.remove(child); -123 } -124 -125 child.parent = null; -126 child.depth = -1; -127 } -128 -129 children.splice(index, 1); -130 this._updateChildren(index); -131 -132 return child; -133 }, -134 -135 /** -136 * 删除指定的子元素。 -137 * @param {View} child 指定要删除的子元素。 -138 * @returns {View} 被删除的对象。 -139 */ -140 removeChild: function(child){ -141 return this.removeChildAt(this.getChildIndex(child)); -142 }, -143 -144 /** -145 * 删除指定id的子元素。 -146 * @param {String} id 指定要删除的子元素的id。 -147 * @returns {View} 被删除的对象。 -148 */ -149 removeChildById: function(id){ -150 var children = this.children, child; -151 for(var i = 0, len = children.length; i < len; i++){ -152 child = children[i]; -153 if(child.id === id){ -154 this.removeChildAt(i); -155 return child; -156 } -157 } -158 return null; -159 }, -160 -161 /** -162 * 删除所有的子元素。 -163 * @returns {Container} 容器本身。 -164 */ -165 removeAllChildren: function(){ -166 while(this.children.length) this.removeChildAt(0); -167 return this; -168 }, -169 -170 /** -171 * 返回指定索引位置的子元素。 -172 * @param {Number} index 指定要返回的子元素的索引值，从0开始。 -173 */ -174 getChildAt: function(index){ -175 var children = this.children; -176 if(index < 0 || index >= children.length) return null; -177 return children[index]; -178 }, -179 -180 /** -181 * 返回指定id的子元素。 -182 * @param {String} id 指定要返回的子元素的id。 -183 */ -184 getChildById: function(id){ -185 var children = this.children, child; -186 for(var i = 0, len = children.length; i < len; i++){ -187 child = children[i]; -188 if(child.id === id) return child; -189 } -190 return null; -191 }, -192 -193 /** -194 * 返回指定子元素的索引值。 -195 * @param {View} child 指定要返回索引值的子元素。 -196 */ -197 getChildIndex: function(child){ -198 return this.children.indexOf(child); -199 }, -200 -201 /** -202 * 设置子元素的索引位置。 -203 * @param {View} child 指定要设置的子元素。 -204 * @param {Number} index 指定要设置的索引值。 -205 */ -206 setChildIndex: function(child, index){ -207 var children = this.children, -208 oldIndex = children.indexOf(child); -209 -210 if(oldIndex >= 0 && oldIndex != index){ -211 var len = children.length; -212 index = index < 0 ? 0 : index >= len ? len - 1 : index; -213 children.splice(oldIndex, 1); -214 children.splice(index, 0, child); -215 this._updateChildren(); -216 } -217 return this; -218 }, -219 -220 /** -221 * 交换两个子元素的索引位置。 -222 * @param {View} child1 指定要交换的子元素A。 -223 * @param {View} child2 指定要交换的子元素B。 -224 */ -225 swapChildren: function(child1, child2){ -226 var children = this.children, -227 index1 = this.getChildIndex(child1), -228 index2 = this.getChildIndex(child2); -229 -230 child1.depth = index2; -231 children[index2] = child1; -232 child2.depth = index1; -233 children[index1] = child2; -234 }, -235 -236 /** -237 * 交换两个指定索引位置的子元素。 -238 * @param {Number} index1 指定要交换的索引位置A。 -239 * @param {Number} index2 指定要交换的索引位置B。 -240 */ -241 swapChildrenAt: function(index1, index2){ -242 var children = this.children, -243 child1 = this.getChildAt(index1), -244 child2 = this.getChildAt(index2); -245 -246 child1.depth = index2; -247 children[index2] = child1; -248 child2.depth = index1; -249 children[index1] = child2; -250 }, -251 -252 /** -253 * 根据指定键值或函数对子元素进行排序。 -254 * @param {Object} keyOrFunction 如果此参数为String时，则根据子元素的某个属性值进行排序；如果此参数为Function时，则根据此函数进行排序。 -255 */ -256 sortChildren: function(keyOrFunction){ -257 var fn = keyOrFunction, -258 children = this.children; -259 if(typeof fn == "string"){ -260 var key = fn; -261 fn = function(a, b){ -262 return b[key] - a[key]; -263 }; -264 } -265 children.sort(fn); -266 this._updateChildren(); -267 }, -268 -269 /** -270 * 更新子元素。 -271 * @private -272 */ -273 _updateChildren: function(start, end){ -274 var children = this.children, child, -275 start = start || 0, -276 end = end || children.length; -277 for(var i = start; i < end; i++){ -278 child = children[i]; -279 child.depth = i + 1; -280 child.parent = this; -281 } -282 }, -283 -284 /** -285 * 返回是否包含参数指定的子元素。 -286 * @param {View} child 指定要测试的子元素。 -287 */ -288 contains: function(child){ -289 while(child = child.parent){ -290 if(child === this){ -291 return true; -292 } -293 } -294 return false; -295 }, -296 -297 /** -298 * 返回由x和y指定的点下的对象。 -299 * @param {Number} x 指定点的x轴坐标。 -300 * @param {Number} y 指定点的y轴坐标。 -301 * @param {Boolean} usePolyCollision 指定是否使用多边形碰撞检测。默认为false。 -302 * @param {Boolean} global 使用此标志表明将查找所有符合的对象，而不仅仅是第一个，即全局匹配。默认为false。 -303 * @param {Boolean} eventMode 使用此标志表明将在事件模式下查找对象。默认为false。 -304 */ -305 getViewAtPoint: function(x, y, usePolyCollision, global, eventMode){ -306 var result = global ? [] : null, -307 children = this.children, child, obj; -308 -309 for(var i = children.length - 1; i >= 0; i--){ -310 child = children[i]; -311 //skip child which is not shown or pointer enabled -312 if(!child || !child.visible || child.alpha <= 0 || (eventMode && !child.pointerEnabled)) continue; -313 //find child recursively -314 if(child.children && child.children.length && !(eventMode && !child.pointerChildren)){ -315 obj = child.getViewAtPoint(x, y, usePolyCollision, global, eventMode); -316 } -317 -318 if(obj){ -319 if(!global) return obj; -320 else if(obj.length) result = result.concat(obj); -321 }else if(child.hitTestPoint(x, y, usePolyCollision)){ -322 if(!global) return child; -323 else result.push(child); -324 } -325 } -326 -327 return global && result.length ? result : null; -328 }, -329 -330 /** -331 * 覆盖渲染方法。 -332 * @private -333 */ -334 render: function(renderer, delta){ -335 Container.superclass.render.call(this, renderer, delta); -336 -337 var children = this.children.slice(0), i, len, child; -338 for(i = 0, len = children.length; i < len; i++){ -339 child = children[i]; -340 //NOTE: the child could remove or change it's parent -341 if(child.parent === this) child._render(renderer, delta); -342 } -343 } -344 -345 });\ No newline at end of file diff --git a/docs/api/symbols/src/src_view_DOMElement.js.html b/docs/api/symbols/src/src_view_DOMElement.js.html deleted file mode 100644 index 8158635e..00000000 --- a/docs/api/symbols/src/src_view_DOMElement.js.html +++ /dev/null @@ -1,94 +0,0 @@ -
1 /** - 2 * Hilo - 3 * Copyright 2015 alibaba.com - 4 * Licensed under the MIT License - 5 */ - 6 - 7 /** - 8 * <iframe src='../../../examples/DOMElement.html?noHeader' width = '330' height = '250' scrolling='no'></iframe> - 9 * <br/> - 10 * 使用示例: - 11 * <pre> - 12 * var domView = new Hilo.DOMElement({ - 13 * element: Hilo.createElement('div', { - 14 * style: { - 15 * backgroundColor: '#004eff', - 16 * position: 'absolute' - 17 * } - 18 * }), - 19 * width: 100, - 20 * height: 100, - 21 * x: 50, - 22 * y: 70 - 23 * }).addTo(stage); - 24 * </pre> - 25 * @name DOMElement - 26 * @class DOMElement是dom元素的包装。 - 27 * @augments View - 28 * @param {Object} properties 创建对象的属性参数。可包含此类所有可写属性。特殊属性有： - 29 * <ul> - 30 * <li><b>element</b> - 要包装的dom元素。必需。</li> - 31 * </ul> - 32 * @module hilo/view/DOMElement - 33 * @requires hilo/core/Hilo - 34 * @requires hilo/core/Class - 35 * @requires hilo/view/View - 36 * @requires hilo/view/Drawable - 37 */ - 38 var DOMElement = Class.create(/** @lends DOMElement.prototype */{ - 39 Extends: View, - 40 constructor: function(properties){ - 41 properties = properties || {}; - 42 this.id = this.id || properties.id || Hilo.getUid("DOMElement"); - 43 DOMElement.superclass.constructor.call(this, properties); - 44 - 45 this.drawable = new Drawable(); - 46 var elem = this.drawable.domElement = properties.element || Hilo.createElement('div'); - 47 elem.id = this.id; - 48 }, - 49 - 50 /** - 51 * 覆盖渲染方法。 - 52 * @private - 53 */ - 54 _render: function(renderer, delta){ - 55 if(!this.onUpdate || this.onUpdate(delta) !== false){ - 56 renderer.transform(this); - 57 if(this.visible && this.alpha > 0){ - 58 this.render(renderer, delta); - 59 } - 60 } - 61 }, - 62 - 63 /** - 64 * 覆盖渲染方法。 - 65 * @private - 66 */ - 67 render: function(renderer, delta){ - 68 var canvas = renderer.canvas; - 69 if(canvas.getContext){ - 70 var elem = this.drawable.domElement, depth = this.depth, - 71 nextElement = canvas.nextSibling, nextDepth; - 72 if(elem.parentNode) return; - 73 - 74 //draw dom element just after stage canvas - 75 while(nextElement && nextElement.nodeType != 3){ - 76 nextDepth = parseInt(nextElement.style.zIndex) || 0; - 77 if(nextDepth <= 0 || nextDepth > depth){ - 78 break; - 79 } - 80 nextElement = nextElement.nextSibling; - 81 } - 82 canvas.parentNode.insertBefore(this.drawable.domElement, nextElement); - 83 }else{ - 84 renderer.draw(this); - 85 } - 86 } - 87 });\ No newline at end of file diff --git a/docs/api/symbols/src/src_view_Drawable.js.html b/docs/api/symbols/src/src_view_Drawable.js.html deleted file mode 100644 index 1f7033fc..00000000 --- a/docs/api/symbols/src/src_view_Drawable.js.html +++ /dev/null @@ -1,75 +0,0 @@ -
1 /** - 2 * Hilo - 3 * Copyright 2015 alibaba.com - 4 * Licensed under the MIT License - 5 */ - 6 - 7 /** - 8 * @class Drawable是可绘制图像的包装。 - 9 * @param {Object} properties 创建对象的属性参数。可包含此类所有可写属性。 - 10 * @module hilo/view/Drawable - 11 * @requires hilo/core/Hilo - 12 * @requires hilo/core/Class - 13 * @property {Object} image 要绘制的图像。即可被CanvasRenderingContext2D.drawImage使用的对象类型，可以是HTMLImageElement、HTMLCanvasElement、HTMLVideoElement等对象。 - 14 * @property {array} rect 要绘制的图像的矩形区域。 - 15 */ - 16 var Drawable = Class.create(/** @lends Drawable.prototype */{ - 17 constructor: function(properties){ - 18 this.init(properties); - 19 }, - 20 - 21 image: null, - 22 rect: null, - 23 - 24 /** - 25 * 初始化可绘制对象。 - 26 * @param {Object} properties 要初始化的属性。 - 27 */ - 28 init: function(properties){ - 29 var me = this, oldImage = me.image; - 30 if(Drawable.isDrawable(properties)){ - 31 me.image = properties; - 32 }else{ - 33 Hilo.copy(me, properties, true); - 34 } - 35 - 36 var image = me.image; - 37 if(typeof image === 'string'){ - 38 if(oldImage && image === oldImage.getAttribute('src')){ - 39 image = me.image = oldImage; - 40 }else{ - 41 me.image = null; - 42 //load image dynamically - 43 var img = new Image(); - 44 img.onload = function(){ - 45 img.onload = null; - 46 me.init(img); - 47 }; - 48 img.src = image; - 49 return; - 50 } - 51 } - 52 - 53 if(image && !me.rect) me.rect = [0, 0, image.width, image.height]; - 54 }, - 55 - 56 Statics: /** @lends Drawable */{ - 57 /** - 58 * 判断参数elem指定的元素是否可包装成Drawable对象。 - 59 * @param {Object} elem 要测试的对象。 - 60 * @return {Boolean} 如果是可包装成Drawable对象则返回true，否则为false。 - 61 */ - 62 isDrawable: function(elem){ - 63 if(!elem || !elem.tagName) return false; - 64 var tagName = elem.tagName.toLowerCase(); - 65 return tagName === "img" || tagName === "canvas" || tagName === "video"; - 66 } - 67 } - 68 });\ No newline at end of file diff --git a/docs/api/symbols/src/src_view_Graphics.js.html b/docs/api/symbols/src/src_view_Graphics.js.html deleted file mode 100644 index fd0b0d2d..00000000 --- a/docs/api/symbols/src/src_view_Graphics.js.html +++ /dev/null @@ -1,419 +0,0 @@ -
1 /** - 2 * Hilo - 3 * Copyright 2015 alibaba.com - 4 * Licensed under the MIT License - 5 */ - 6 - 7 /** - 8 * <iframe src='../../../examples/Graphics.html?noHeader' width = '320' height = '400' scrolling='no'></iframe> - 9 * <br/> - 10 * @class Graphics类包含一组创建矢量图形的方法。 - 11 * @augments View - 12 * @mixes CacheMixin - 13 * @param {Object} properties 创建对象的属性参数。可包含此类所有可写属性。 - 14 * @module hilo/view/Graphics - 15 * @requires hilo/core/Hilo - 16 * @requires hilo/core/Class - 17 * @requires hilo/view/View - 18 * @requires hilo/view/CacheMixin - 19 * @property {Number} lineWidth 笔画的线条宽度。默认为1。只读属性。 - 20 * @property {Number} lineAlpha 笔画的线条透明度。默认为1。只读属性。 - 21 * @property {String} lineCap 笔画的线条端部样式。可选值有：butt、round、square等，默认为null。只读属性。 - 22 * @property {String} lineJoin 笔画的线条连接样式。可选值有：miter、round、bevel等，默认为null。只读属性。 - 23 * @property {Number} miterLimit 斜连线长度和线条宽度的最大比率。此属性仅当lineJoin为miter时有效。默认值为10。只读属性。 - 24 * @property {String} strokeStyle 笔画边框的样式。默认值为'0'，即黑色。只读属性。 - 25 * @property {String} fillStyle 内容填充的样式。默认值为'0'，即黑色。只读属性。 - 26 * @property {Number} fillAlpha 内容填充的透明度。默认值为0。只读属性。 - 27 */ - 28 var Graphics = (function(){ - 29 - 30 var canvas = document.createElement('canvas'); - 31 var helpContext = canvas.getContext && canvas.getContext('2d'); - 32 - 33 return Class.create(/** @lends Graphics.prototype */{ - 34 Extends: View, - 35 Mixes:CacheMixin, - 36 constructor: function(properties){ - 37 properties = properties || {}; - 38 this.id = this.id || properties.id || Hilo.getUid('Graphics'); - 39 Graphics.superclass.constructor.call(this, properties); - 40 - 41 this._actions = []; - 42 }, - 43 - 44 lineWidth: 1, - 45 lineAlpha: 1, - 46 lineCap: null, //'butt', 'round', 'square' - 47 lineJoin: null, //'miter', 'round', 'bevel' - 48 miterLimit: 10, - 49 hasStroke: false, - 50 strokeStyle: '0', - 51 hasFill: false, - 52 fillStyle: '0', - 53 fillAlpha: 0, - 54 - 55 /** - 56 * 指定绘制图形的线条样式。 - 57 * @param {Number} thickness 线条的粗细值。默认为1。 - 58 * @param {String} lineColor 线条的CSS颜色值。默认为黑色，即'0'。 - 59 * @param {Number} lineAlpha 线条的透明度值。默认为不透明，即1。 - 60 * @param {String} lineCap 线条的端部样式。可选值有：butt、round、square等，默认值为null。 - 61 * @param {String} lineJoin 线条的连接样式。可选值有：miter、round、bevel等，默认值为null。 - 62 * @param {Number} miterLimit 斜连线长度和线条宽度的最大比率。此属性仅当lineJoin为miter时有效。默认值为10。 - 63 * @returns {Graphics} Graphics对象本身。 - 64 */ - 65 lineStyle: function(thickness, lineColor, lineAlpha, lineCap, lineJoin, miterLimit){ - 66 var me = this, addAction = me._addAction; - 67 - 68 addAction.call(me, ['lineWidth', (me.lineWidth = thickness || 1)]); - 69 addAction.call(me, ['strokeStyle', (me.strokeStyle = lineColor || '0')]); - 70 addAction.call(me, ['lineAlpha', (me.lineAlpha = lineAlpha || 1)]); - 71 if(lineCap != undefined) addAction.call(me, ['lineCap', (me.lineCap = lineCap)]); - 72 if(lineJoin != undefined) addAction.call(me, ['lineJoin', (me.lineJoin = lineJoin)]); - 73 if(miterLimit != undefined) addAction.call(me, ['miterLimit', (me.miterLimit = miterLimit)]); - 74 me.hasStroke = true; - 75 return me; - 76 }, - 77 - 78 /** - 79 * 指定绘制图形的填充样式和透明度。 - 80 * @param {String} fill 填充样式。可以是color、gradient或pattern。 - 81 * @param {Number} alpha 透明度。 - 82 * @returns {Graphics} Graphics对象本身。 - 83 */ - 84 beginFill: function(fill, alpha){ - 85 var me = this, addAction = me._addAction; - 86 - 87 addAction.call(me, ['fillStyle', (me.fillStyle = fill)]); - 88 addAction.call(me, ['fillAlpha', (me.fillAlpha = alpha || 1)]); - 89 me.hasFill = true; - 90 return me; - 91 }, - 92 - 93 /** - 94 * 应用并结束笔画的绘制和图形样式的填充。 - 95 * @returns {Graphics} Graphics对象本身。 - 96 */ - 97 endFill: function(){ - 98 var me = this, addAction = me._addAction; - 99 -100 if(me.hasStroke) addAction.call(me, ['stroke']); -101 if(me.hasFill) addAction.call(me, ['fill']); -102 me.setCacheDirty(true); -103 return me; -104 }, -105 -106 /** -107 * 指定绘制图形的线性渐变填充样式。 -108 * @param {Number} x0 渐变的起始点的x轴坐标。 -109 * @param {Number} y0 渐变的起始点的y轴坐标。 -110 * @param {Number} x1 渐变的结束点的x轴坐标。 -111 * @param {Number} y1 渐变的结束点的y轴坐标。 -112 * @param {Array} colors 渐变中使用的CSS颜色值数组。 -113 * @param {Array} ratois 渐变中开始与结束之间的位置数组。需与colors数组里的颜色值一一对应，介于0.0与1.0之间的值。 -114 * @returns {Graphics} Graphics对象本身。 -115 */ -116 beginLinearGradientFill: function(x0, y0, x1, y1, colors, ratios){ -117 var me = this, gradient = helpContext.createLinearGradient(x0, y0, x1, y1); -118 -119 for (var i = 0, len = colors.length; i < len; i++){ -120 gradient.addColorStop(ratios[i], colors[i]); -121 } -122 me.hasFill = true; -123 return me._addAction(['fillStyle', (me.fillStyle = gradient)]); -124 }, -125 -126 /** -127 * 指定绘制图形的放射性渐变填充样式。 -128 * @param {Number} x0 渐变的起始圆的x轴坐标。 -129 * @param {Number} y0 渐变的起始圆的y轴坐标。 -130 * @param {Number} r0 渐变的起始圆的半径。 -131 * @param {Number} x1 渐变的结束圆的x轴坐标。 -132 * @param {Number} y1 渐变的结束圆的y轴坐标。 -133 * @param {Number} r1 渐变的结束圆的半径。 -134 * @param {Array} colors 渐变中使用的CSS颜色值数组。 -135 * @param {Array} ratois 渐变中开始与结束之间的位置数组。需与colors数组里的颜色值一一对应，介于0.0与1.0之间的值。 -136 * @returns {Graphics} Graphics对象本身。 -137 */ -138 beginRadialGradientFill: function(x0, y0, r0, x1, y1, r1, colors, ratios){ -139 var me = this, gradient = helpContext.createRadialGradient(x0, y0, r0, x1, y1, r1); -140 for (var i = 0, len = colors.length; i < len; i++) -141 { -142 gradient.addColorStop(ratios[i], colors[i]); -143 } -144 me.hasFill = true; -145 return me._addAction(['fillStyle', (me.fillStyle = gradient)]); -146 }, -147 -148 /** -149 * 开始一个位图填充样式。 -150 * @param {HTMLImageElement} image 指定填充的Image对象。 -151 * @param {String} repetition 指定填充的重复设置参数。它可以是以下任意一个值：repeat, repeat-x, repeat-y, no-repeat。默认为''。 -152 * @returns {Graphics} Graphics对象本身。 -153 */ -154 beginBitmapFill: function(image, repetition){ -155 var me = this, pattern = helpContext.createPattern(image, repetition || ''); -156 me.hasFill = true; -157 return me._addAction(['fillStyle', (me.fillStyle = pattern)]); -158 }, -159 -160 /** -161 * 开始一个新的路径。 -162 * @returns {Graphics} Graphics对象本身。 -163 */ -164 beginPath: function(){ -165 return this._addAction(['beginPath']); -166 }, -167 -168 /** -169 * 关闭当前的路径。 -170 * @returns {Graphics} Graphics对象本身。 -171 */ -172 closePath: function(){ -173 return this._addAction(['closePath']); -174 }, -175 -176 /** -177 * 将当前绘制位置移动到点(x, y)。 -178 * @param {Number} x x轴坐标。 -179 * @param {Number} y y轴坐标。 -180 * @returns {Graphics} Graphics对象本身。 -181 */ -182 moveTo: function(x, y){ -183 return this._addAction(['moveTo', x, y]); -184 }, -185 -186 /** -187 * 绘制从当前位置开始到点(x, y)结束的直线。 -188 * @param {Number} x x轴坐标。 -189 * @param {Number} y y轴坐标。 -190 * @returns {Graphics} Graphics对象本身。 -191 */ -192 lineTo: function(x, y){ -193 return this._addAction(['lineTo', x, y]); -194 }, -195 -196 /** -197 * 绘制从当前位置开始到点(x, y)结束的二次曲线。 -198 * @param {Number} cpx 控制点cp的x轴坐标。 -199 * @param {Number} cpy 控制点cp的y轴坐标。 -200 * @param {Number} x x轴坐标。 -201 * @param {Number} y y轴坐标。 -202 * @returns {Graphics} Graphics对象本身。 -203 */ -204 quadraticCurveTo: function(cpx, cpy, x, y){ -205 return this._addAction(['quadraticCurveTo', cpx, cpy, x, y]); -206 }, -207 -208 /** -209 * 绘制从当前位置开始到点(x, y)结束的贝塞尔曲线。 -210 * @param {Number} cp1x 控制点cp1的x轴坐标。 -211 * @param {Number} cp1y 控制点cp1的y轴坐标。 -212 * @param {Number} cp2x 控制点cp2的x轴坐标。 -213 * @param {Number} cp2y 控制点cp2的y轴坐标。 -214 * @param {Number} x x轴坐标。 -215 * @param {Number} y y轴坐标。 -216 * @returns {Graphics} Graphics对象本身。 -217 */ -218 bezierCurveTo: function(cp1x, cp1y, cp2x, cp2y, x, y){ -219 return this._addAction(['bezierCurveTo', cp1x, cp1y, cp2x, cp2y, x, y]); -220 }, -221 -222 /** -223 * 绘制一个矩形。 -224 * @param {Number} x x轴坐标。 -225 * @param {Number} y y轴坐标。 -226 * @param {Number} width 矩形的宽度。 -227 * @param {Number} height 矩形的高度。 -228 * @returns {Graphics} Graphics对象本身。 -229 */ -230 drawRect: function(x, y, width, height){ -231 return this._addAction(['rect', x, y, width, height]); -232 }, -233 -234 /** -235 * 绘制一个复杂的圆角矩形。 -236 * @param {Number} x x轴坐标。 -237 * @param {Number} y y轴坐标。 -238 * @param {Number} width 圆角矩形的宽度。 -239 * @param {Number} height 圆角矩形的高度。 -240 * @param {Number} cornerTL 圆角矩形的左上圆角大小。 -241 * @param {Number} cornerTR 圆角矩形的右上圆角大小。 -242 * @param {Number} cornerBR 圆角矩形的右下圆角大小。 -243 * @param {Number} cornerBL 圆角矩形的左下圆角大小。 -244 * @returns {Graphics} Graphics对象本身。 -245 */ -246 drawRoundRectComplex: function(x, y, width, height, cornerTL, cornerTR, cornerBR, cornerBL){ -247 var me = this, addAction = me._addAction; -248 addAction.call(me, ['moveTo', x + cornerTL, y]); -249 addAction.call(me, ['lineTo', x + width - cornerTR, y]); -250 addAction.call(me, ['arc', x + width - cornerTR, y + cornerTR, cornerTR, -Math.PI/2, 0, false]); -251 addAction.call(me, ['lineTo', x + width, y + height - cornerBR]); -252 addAction.call(me, ['arc', x + width - cornerBR, y + height - cornerBR, cornerBR, 0, Math.PI/2, false]); -253 addAction.call(me, ['lineTo', x + cornerBL, y + height]); -254 addAction.call(me, ['arc', x + cornerBL, y + height - cornerBL, cornerBL, Math.PI/2, Math.PI, false]); -255 addAction.call(me, ['lineTo', x, y + cornerTL]); -256 addAction.call(me, ['arc', x + cornerTL, y + cornerTL, cornerTL, Math.PI, Math.PI*3/2, false]); -257 return me; -258 }, -259 -260 /** -261 * 绘制一个圆角矩形。 -262 * @param {Number} x x轴坐标。 -263 * @param {Number} y y轴坐标。 -264 * @param {Number} width 圆角矩形的宽度。 -265 * @param {Number} height 圆角矩形的高度。 -266 * @param {Number} cornerSize 圆角矩形的圆角大小。 -267 * @returns {Graphics} Graphics对象本身。 -268 */ -269 drawRoundRect: function(x, y, width, height, cornerSize){ -270 return this.drawRoundRectComplex(x, y, width, height, cornerSize, cornerSize, cornerSize, cornerSize); -271 }, -272 -273 /** -274 * 绘制一个圆。 -275 * @param {Number} x x轴坐标。 -276 * @param {Number} y y轴坐标。 -277 * @param {Number} radius 圆的半径。 -278 * @returns {Graphics} Graphics对象本身。 -279 */ -280 drawCircle: function(x, y, radius){ -281 return this._addAction(['arc', x + radius, y + radius, radius, 0, Math.PI * 2, 0]); -282 }, -283 -284 /** -285 * 绘制一个椭圆。 -286 * @param {Number} x x轴坐标。 -287 * @param {Number} y y轴坐标。 -288 * @param {Number} width 椭圆的宽度。 -289 * @param {Number} height 椭圆的高度。 -290 * @returns {Graphics} Graphics对象本身。 -291 */ -292 drawEllipse: function(x, y, width, height){ -293 var me = this; -294 if(width == height) return me.drawCircle(x, y, width); -295 -296 var addAction = me._addAction; -297 var w = width / 2, h = height / 2, C = 0.5522847498307933, cx = C * w, cy = C * h; -298 x = x + w; -299 y = y + h; -300 -301 addAction.call(me, ['moveTo', x + w, y]); -302 addAction.call(me, ['bezierCurveTo', x + w, y - cy, x + cx, y - h, x, y - h]); -303 addAction.call(me, ['bezierCurveTo', x - cx, y - h, x - w, y - cy, x - w, y]); -304 addAction.call(me, ['bezierCurveTo', x - w, y + cy, x - cx, y + h, x, y + h]); -305 addAction.call(me, ['bezierCurveTo', x + cx, y + h, x + w, y + cy, x + w, y]); -306 return me; -307 }, -308 -309 /** -310 * 根据参数指定的SVG数据绘制一条路径。 -311 * 代码示例: -312 * <p>var path = 'M250 150 L150 350 L350 350 Z';</p> -313 * <p>var shape = new Hilo.Graphics({width:500, height:500});</p> -314 * <p>shape.drawSVGPath(path).beginFill('#0ff').endFill();</p> -315 * @param {String} pathData 要绘制的SVG路径数据。 -316 * @returns {Graphics} Graphics对象本身。 -317 */ -318 drawSVGPath: function(pathData){ -319 var me = this, addAction = me._addAction, -320 path = pathData.split(/,| (?=[a-zA-Z])/); -321 -322 addAction.call(me, ['beginPath']); -323 for(var i = 0, len = path.length; i < len; i++){ -324 var str = path[i], cmd = str[0].toUpperCase(), p = str.substring(1).split(/,| /); -325 if(p[0].length == 0) p.shift(); -326 -327 switch(cmd){ -328 case 'M': -329 addAction.call(me, ['moveTo', p[0], p[1]]); -330 break; -331 case 'L': -332 addAction.call(me, ['lineTo', p[0], p[1]]); -333 break; -334 case 'C': -335 addAction.call(me, ['bezierCurveTo', p[0], p[1], p[2], p[3], p[4], p[5]]); -336 break; -337 case 'Z': -338 addAction.call(me, ['closePath']); -339 break; -340 } -341 } -342 return me; -343 }, -344 -345 /** -346 * 执行全部绘制动作。内部私有方法。 -347 * @private -348 */ -349 _draw: function(context){ -350 var me = this, actions = me._actions, len = actions.length, i; -351 -352 context.beginPath(); -353 for(i = 0; i < len; i++){ -354 var action = actions[i], -355 f = action[0], -356 args = action.length > 1 ? action.slice(1) : null; -357 -358 if(typeof(context[f]) == 'function') context[f].apply(context, args); -359 else context[f] = action[1]; -360 } -361 }, -362 -363 /** -364 * 重写渲染实现。 -365 * @private -366 */ -367 render: function(renderer, delta){ -368 var me = this, canvas = renderer.canvas; -369 if(renderer.renderType === 'canvas'){ -370 me._draw(renderer.context); -371 }else{ -372 me.cache(); -373 renderer.draw(me); -374 } -375 }, -376 -377 /** -378 * 清除所有绘制动作并复原所有初始状态。 -379 * @returns {Graphics} Graphics对象本身。 -380 */ -381 clear: function(){ -382 var me = this; -383 -384 me._actions.length = 0; -385 me.lineWidth = 1; -386 me.lineAlpha = 1; -387 me.lineCap = null; -388 me.lineJoin = null; -389 me.miterLimit = 10; -390 me.hasStroke = false; -391 me.strokeStyle = '0'; -392 me.hasFill = false; -393 me.fillStyle = '0'; -394 me.fillAlpha = 1; -395 -396 me.setCacheDirty(true); -397 return me; -398 }, -399 -400 /** -401 * 添加一个绘制动作。内部私有方法。 -402 * @private -403 */ -404 _addAction: function(action){ -405 var me = this; -406 me._actions.push(action); -407 return me; -408 } -409 -410 }); -411 -412 })();\ No newline at end of file diff --git a/docs/api/symbols/src/src_view_Sprite.js.html b/docs/api/symbols/src/src_view_Sprite.js.html deleted file mode 100644 index de69a050..00000000 --- a/docs/api/symbols/src/src_view_Sprite.js.html +++ /dev/null @@ -1,257 +0,0 @@ -
1 /** - 2 * Hilo - 3 * Copyright 2015 alibaba.com - 4 * Licensed under the MIT License - 5 */ - 6 - 7 /** - 8 * <iframe src='../../../examples/Sprite.html?noHeader' width = '550' height = '400' scrolling='no'></iframe> - 9 * <br/> - 10 * @class 动画精灵类。 - 11 * @augments View - 12 * @module hilo/view/Sprite - 13 * @requires hilo/core/Hilo - 14 * @requires hilo/core/Class - 15 * @requires hilo/view/View - 16 * @requires hilo/view/Drawable - 17 * @param properties 创建对象的属性参数。可包含此类所有可写属性。此外还包括： - 18 * <ul> - 19 * <li><b>frames</b> - 精灵动画的帧数据对象。</li> - 20 * </ul> - 21 * @property {number} currentFrame 当前播放帧的索引。从0开始。只读属性。 - 22 * @property {boolean} paused 判断精灵是否暂停。默认为false。 - 23 * @property {boolean} loop 判断精灵是否可以循环播放。默认为true。 - 24 * @property {boolean} timeBased 指定精灵动画是否是以时间为基准。默认为false，即以帧为基准。 - 25 * @property {number} interval 精灵动画的帧间隔。如果timeBased为true，则单位为毫秒，否则为帧数。 - 26 */ - 27 var Sprite = Class.create(/** @lends Sprite.prototype */{ - 28 Extends: View, - 29 constructor: function(properties){ - 30 properties = properties || {}; - 31 this.id = this.id || properties.id || Hilo.getUid("Sprite"); - 32 Sprite.superclass.constructor.call(this, properties); - 33 - 34 this._frames = []; - 35 this._frameNames = {}; - 36 this.drawable = new Drawable(); - 37 if(properties.frames) this.addFrame(properties.frames); - 38 }, - 39 - 40 _frames: null, //所有帧的集合 - 41 _frameNames: null, //带名字name的帧的集合 - 42 _frameElapsed: 0, //当前帧持续的时间或帧数 - 43 _firstRender: true, //标记是否是第一次渲染 - 44 - 45 paused: false, - 46 loop: true, - 47 timeBased: false, - 48 interval: 1, - 49 currentFrame: 0, //当前帧的索引 - 50 - 51 /** - 52 * 返回精灵动画的总帧数。 - 53 * @returns {Uint} 精灵动画的总帧数。 - 54 */ - 55 getNumFrames: function(){ - 56 return this._frames ? this._frames.length : 0; - 57 }, - 58 - 59 /** - 60 * 往精灵动画序列中增加帧。 - 61 * @param {Object} frame 要增加的精灵动画帧数据。 - 62 * @param {Int} startIndex 开始增加帧的索引位置。若不设置，默认为在末尾添加。 - 63 * @returns {Sprite} Sprite对象本身。 - 64 */ - 65 addFrame: function(frame, startIndex){ - 66 var start = startIndex != null ? startIndex : this._frames.length; - 67 if(frame instanceof Array){ - 68 for(var i = 0, len = frame.length; i < len; i++){ - 69 this.setFrame(frame[i], start + i); - 70 } - 71 }else{ - 72 this.setFrame(frame, start); - 73 } - 74 return this; - 75 }, - 76 - 77 /** - 78 * 设置精灵动画序列指定索引位置的帧。 - 79 * @param {Object} frame 要设置的精灵动画帧数据。 - 80 * @param {Int} index 要设置的索引位置。 - 81 * @returns {Sprite} Sprite对象本身。 - 82 */ - 83 setFrame: function(frame, index){ - 84 var frames = this._frames, - 85 total = frames.length; - 86 index = index < 0 ? 0 : index > total ? total : index; - 87 frames[index] = frame; - 88 if(frame.name) this._frameNames[frame.name] = frame; - 89 if(index == 0 && !this.width || !this.height){ - 90 this.width = frame.rect[2]; - 91 this.height = frame.rect[3]; - 92 } - 93 return this; - 94 }, - 95 - 96 /** - 97 * 获取精灵动画序列中指定的帧。 - 98 * @param {Object} indexOrName 要获取的帧的索引位置或别名。 - 99 * @returns {Object} 精灵帧对象。 -100 */ -101 getFrame: function(indexOrName){ -102 if(typeof indexOrName === 'number'){ -103 var frames = this._frames; -104 if(indexOrName < 0 || indexOrName >= frames.length) return null; -105 return frames[indexOrName]; -106 } -107 return this._frameNames[indexOrName]; -108 }, -109 -110 /** -111 * 获取精灵动画序列中指定帧的索引位置。 -112 * @param {Object} frameValue 要获取的帧的索引位置或别名。 -113 * @returns {Object} 精灵帧对象。 -114 */ -115 getFrameIndex: function(frameValue){ -116 var frames = this._frames, -117 total = frames.length, -118 index = -1; -119 if(typeof frameValue === 'number'){ -120 index = frameValue; -121 }else{ -122 var frame = typeof frameValue === 'string' ? this._frameNames[frameValue] : frameValue; -123 if(frame){ -124 for(var i = 0; i < total; i++){ -125 if(frame === frames[i]){ -126 index = i; -127 break; -128 } -129 } -130 } -131 } -132 return index; -133 }, -134 -135 /** -136 * 播放精灵动画。 -137 * @returns {Sprite} Sprite对象本身。 -138 */ -139 play: function(){ -140 this.paused = false; -141 return this; -142 }, -143 -144 /** -145 * 暂停播放精灵动画。 -146 * @returns {Sprite} Sprite对象本身。 -147 */ -148 stop: function(){ -149 this.paused = true; -150 return this; -151 }, -152 -153 /** -154 * 跳转精灵动画到指定的帧。 -155 * @param {Object} indexOrName 要跳转的帧的索引位置或别名。 -156 * @param {Boolean} pause 指示跳转后是否暂停播放。 -157 * @returns {Sprite} Sprite对象本身。 -158 */ -159 goto: function(indexOrName, pause){ -160 var total = this._frames.length, -161 index = this.getFrameIndex(indexOrName); -162 -163 this.currentFrame = index < 0 ? 0 : index >= total ? total - 1 : index; -164 this.paused = pause; -165 this._firstRender = true; -166 return this; -167 }, -168 -169 /** -170 * 渲染方法。 -171 * @private -172 */ -173 _render: function(renderer, delta){ -174 var lastFrameIndex = this.currentFrame, frameIndex; -175 -176 if(this._firstRender){ -177 frameIndex = lastFrameIndex; -178 this._firstRender = false; -179 }else{ -180 frameIndex = this._nextFrame(delta); -181 } -182 -183 if(frameIndex != lastFrameIndex){ -184 this.currentFrame = frameIndex; -185 var callback = this._frames[frameIndex].callback; -186 callback && callback.call(this); -187 } -188 -189 //NOTE: it will be deprecated, don't use it. -190 if(this.onEnterFrame) this.onEnterFrame(frameIndex); -191 -192 this.drawable.init(this._frames[frameIndex]); -193 Sprite.superclass._render.call(this, renderer, delta); -194 }, -195 -196 /** -197 * @private -198 */ -199 _nextFrame: function(delta){ -200 var frames = this._frames, -201 total = frames.length, -202 frameIndex = this.currentFrame, -203 frame = frames[frameIndex], -204 duration = frame.duration || this.interval, -205 elapsed = this._frameElapsed; -206 -207 //calculate the current frame elapsed frames/time -208 var value = (frameIndex == 0 && !this.drawable) ? 0 : elapsed + (this.timeBased ? delta : 1); -209 elapsed = this._frameElapsed = value < duration ? value : 0; -210 -211 if(frame.stop || !this.loop && frameIndex >= total - 1){ -212 this.stop(); -213 } -214 -215 if(!this.paused && elapsed == 0){ -216 if(frame.next != null){ -217 //jump to the specified frame -218 frameIndex = this.getFrameIndex(frame.next); -219 }else if(frameIndex >= total - 1){ -220 //at the end of the frames, go back to first frame -221 frameIndex = 0; -222 }else if(this.drawable){ -223 //normal go forward to next frame -224 frameIndex++; -225 } -226 } -227 -228 return frameIndex; -229 }, -230 -231 /** -232 * 设置指定帧的回调函数。即每当播放头进入指定帧时调用callback函数。若callback为空，则会删除回调函数。 -233 * @param {Int|String} frame 要指定的帧的索引位置或别名。 -234 * @param {Function} callback 指定回调函数。 -235 * @returns {Sprite} 精灵本身。 -236 */ -237 setFrameCallback: function(frame, callback){ -238 frame = this.getFrame(frame); -239 if(frame) frame.callback = callback; -240 return this; -241 }, -242 -243 /** -244 * 精灵动画的播放头进入新帧时的回调方法。默认值为null。此方法已废弃，请使用addFrameCallback方法。 -245 * @type Function -246 * @deprecated -247 */ -248 onEnterFrame: null -249 -250 });\ No newline at end of file diff --git a/docs/api/symbols/src/src_view_Stage.js.html b/docs/api/symbols/src/src_view_Stage.js.html deleted file mode 100644 index 0c9152a1..00000000 --- a/docs/api/symbols/src/src_view_Stage.js.html +++ /dev/null @@ -1,255 +0,0 @@ -
1 /** - 2 * Hilo - 3 * Copyright 2015 alibaba.com - 4 * Licensed under the MIT License - 5 */ - 6 - 7 /** - 8 * 示例: - 9 * <pre> - 10 * var stage = new Hilo.Stage({ - 11 * renderType:'canvas', - 12 * container: containerElement, - 13 * width: 320, - 14 * height: 480 - 15 * }); - 16 * </pre> - 17 * @class 舞台是可视对象树的根，可视对象只有添加到舞台或其子对象后才会被渲染出来。创建一个hilo应用一般都是从创建一个stage开始的。 - 18 * @augments Container - 19 * @param {Object} properties 创建对象的属性参数。可包含此类所有可写属性。主要有： - 20 * <ul> - 21 * <li><b>container</b>:String|HTMLElement - 指定舞台在页面中的父容器元素。它是一个dom容器或id。若不传入此参数且canvas未被加入到dom树，则需要在舞台创建后手动把舞台画布加入到dom树中，否则舞台不会被渲染。可选。</li> - 22 * <li><b>renderType</b>:String - 指定渲染方式，canvas|dom|webgl，默认canvas。可选。</li> - 23 * <li><b>canvas</b>:String|HTMLCanvasElement|HTMLElement - 指定舞台所对应的画布元素。它是一个canvas或普通的div，也可以传入元素的id。若为canvas，则使用canvas来渲染所有对象，否则使用dom+css来渲染。可选。</li> - 24 * <li><b>width</b>:Number</li> - 指定舞台的宽度。默认为canvas的宽度。可选。 - 25 * <li><b>height</b>:Number</li> - 指定舞台的高度。默认为canvas的高度。可选。 - 26 * <li><b>paused</b>:Boolean</li> - 指定舞台是否停止渲染。默认为false。可选。 - 27 * </ul> - 28 * @module hilo/view/Stage - 29 * @requires hilo/core/Hilo - 30 * @requires hilo/core/Class - 31 * @requires hilo/view/Container - 32 * @requires hilo/renderer/CanvasRenderer - 33 * @requires hilo/renderer/DOMRenderer - 34 * @requires hilo/renderer/WebGLRenderer - 35 * @property {HTMLCanvasElement|HTMLElement} canvas 舞台所对应的画布。它可以是一个canvas或一个普通的div。只读属性。 - 36 * @property {Renderer} renderer 舞台渲染器。只读属性。 - 37 * @property {Boolean} paused 指示舞台是否暂停刷新渲染。 - 38 * @property {Object} viewport 舞台内容在页面中的渲染区域。包含的属性有：left、top、width、height。只读属性。 - 39 */ - 40 var Stage = Class.create(/** @lends Stage.prototype */{ - 41 Extends: Container, - 42 constructor: function(properties){ - 43 properties = properties || {}; - 44 this.id = this.id || properties.id || Hilo.getUid('Stage'); - 45 Stage.superclass.constructor.call(this, properties); - 46 - 47 this._initRenderer(properties); - 48 - 49 //init size - 50 var width = this.width, height = this.height, - 51 viewport = this.updateViewport(); - 52 if(!properties.width) width = (viewport && viewport.width) || 320; - 53 if(!properties.height) height = (viewport && viewport.height) || 480; - 54 this.resize(width, height, true); - 55 }, - 56 - 57 canvas: null, - 58 renderer: null, - 59 paused: false, - 60 viewport: null, - 61 - 62 /** - 63 * @private - 64 */ - 65 _initRenderer: function(properties){ - 66 var canvas = properties.canvas; - 67 var container = properties.container; - 68 var renderType = properties.renderType||'canvas'; - 69 - 70 if(typeof canvas === 'string') canvas = Hilo.getElement(canvas); - 71 if(typeof container === 'string') container = Hilo.getElement(container); - 72 - 73 if(!canvas){ - 74 var canvasTagName = renderType === 'dom'?'div':'canvas'; - 75 canvas = Hilo.createElement(canvasTagName, { - 76 style: { - 77 position: 'absolute' - 78 } - 79 }); - 80 } - 81 else if(!canvas.getContext){ - 82 renderType = 'dom'; - 83 } - 84 - 85 this.canvas = canvas; - 86 if(container) container.appendChild(canvas); - 87 - 88 var props = {canvas:canvas, stage:this}; - 89 switch(renderType){ - 90 case 'dom': - 91 this.renderer = new DOMRenderer(props); - 92 break; - 93 case 'webgl': - 94 if(WebGLRenderer.isSupport()){ - 95 this.renderer = new WebGLRenderer(props); - 96 } - 97 else{ - 98 this.renderer = new CanvasRenderer(props); - 99 } -100 break; -101 case 'canvas': -102 default: -103 this.renderer = new CanvasRenderer(props); -104 break; -105 } -106 }, -107 -108 /** -109 * 添加舞台画布到DOM容器中。注意：此方法覆盖了View.addTo方法。 -110 * @param {HTMLElement} domElement 一个dom元素。 -111 * @returns {Stage} 舞台本身，可用于链式调用。 -112 */ -113 addTo: function(domElement){ -114 var canvas = this.canvas; -115 if(canvas.parentNode !== domElement){ -116 domElement.appendChild(canvas); -117 } -118 return this; -119 }, -120 -121 /** -122 * 调用tick会触发舞台的更新和渲染。开发者一般无需使用此方法。 -123 * @param {Number} delta 调度器当前调度与上次调度tick之间的时间差。 -124 */ -125 tick: function(delta){ -126 if(!this.paused){ -127 this._render(this.renderer, delta); -128 } -129 }, -130 -131 /** -132 * 开启/关闭舞台的DOM事件响应。要让舞台上的可视对象响应用户交互，必须先使用此方法开启舞台的相应事件的响应。 -133 * @param {String|Array} type 要开启/关闭的事件名称或数组。 -134 * @param {Boolean} enabled 指定开启还是关闭。如果不传此参数，则默认为开启。 -135 * @returns {Stage} 舞台本身。链式调用支持。 -136 */ -137 enableDOMEvent: function(type, enabled){ -138 var me = this, -139 canvas = me.canvas, -140 types = typeof type === 'string' ? [type] : type, -141 enabled = enabled !== false, -142 handler = me._domListener || (me._domListener = function(e){me._onDOMEvent(e)}); -143 -144 for(var i = 0; i < types.length; i++){ -145 var type = types[i]; -146 -147 if(enabled){ -148 canvas.addEventListener(type, handler, false); -149 }else{ -150 canvas.removeEventListener(type, handler); -151 } -152 } -153 -154 return me; -155 }, -156 -157 /** -158 * DOM事件处理函数。此方法会把事件调度到事件的坐标点所对应的可视对象。 -159 * @private -160 */ -161 _onDOMEvent: function(e){ -162 var type = e.type, event = e, isTouch = type.indexOf('touch') == 0; -163 -164 //calculate stageX/stageY -165 var posObj = e; -166 if(isTouch){ -167 var touches = e.touches, changedTouches = e.changedTouches; -168 posObj = (touches && touches.length) ? touches[0] : -169 (changedTouches && changedTouches.length) ? changedTouches[0] : null; -170 } -171 -172 var x = posObj.pageX || posObj.clientX, y = posObj.pageY || posObj.clientY, -173 viewport = this.viewport || this.updateViewport(); -174 -175 event.stageX = x = (x - viewport.left) / this.scaleX; -176 event.stageY = y = (y - viewport.top) / this.scaleY; -177 -178 //鼠标事件需要阻止冒泡方法 -179 event.stopPropagation = function(){ -180 this._stopPropagationed = true; -181 }; -182 -183 var obj = this.getViewAtPoint(x, y, true, false, true)||this, -184 canvas = this.canvas, target = this._eventTarget; -185 -186 //fire mouseout/touchout event for last event target -187 var leave = type === 'mouseout'; -188 //当obj和target不同 且obj不是target的子元素时才触发out事件 -189 if(target && (target != obj && (!target.contains || !target.contains(obj))|| leave)){ -190 var out = (type === 'touchmove') ? 'touchout' : -191 (type === 'mousemove' || leave || !obj) ? 'mouseout' : null; -192 if(out) { -193 var outEvent = Hilo.copy({}, event); -194 outEvent.type = out; -195 outEvent.eventTarget = target; -196 target._fireMouseEvent(outEvent); -197 } -198 event.lastEventTarget = target; -199 this._eventTarget = null; -200 } -201 -202 //fire event for current view -203 if(obj && obj.pointerEnabled && type !== 'mouseout'){ -204 event.eventTarget = this._eventTarget = obj; -205 obj._fireMouseEvent(event); -206 } -207 -208 //set cursor for current view -209 if(!isTouch){ -210 var cursor = (obj && obj.pointerEnabled && obj.useHandCursor) ? 'pointer' : ''; -211 canvas.style.cursor = cursor; -212 } -213 -214 //fix android: `touchmove` fires only once -215 if(Hilo.browser.android && type === 'touchmove'){ -216 e.preventDefault(); -217 } -218 }, -219 -220 /** -221 * 更新舞台在页面中的可视区域，即渲染区域。当舞台canvas的样式border、margin、padding等属性更改后，需要调用此方法更新舞台渲染区域。 -222 * @returns {Object} 舞台的可视区域。即viewport属性。 -223 */ -224 updateViewport: function(){ -225 var canvas = this.canvas, viewport = null; -226 if(canvas.parentNode){ -227 viewport = this.viewport = Hilo.getElementRect(canvas); -228 } -229 return viewport; -230 }, -231 -232 /** -233 * 改变舞台的大小。 -234 * @param {Number} width 指定舞台新的宽度。 -235 * @param {Number} height 指定舞台新的高度。 -236 * @param {Boolean} forceResize 指定是否强制改变舞台大小，即不管舞台大小是否相同，仍然强制执行改变动作，可确保舞台、画布以及视窗之间的尺寸同步。 -237 */ -238 resize: function(width, height, forceResize){ -239 if(forceResize || this.width !== width || this.height !== height){ -240 this.width = width; -241 this.height = height; -242 this.renderer.resize(width, height); -243 this.updateViewport(); -244 } -245 } -246 -247 }); -248\ No newline at end of file diff --git a/docs/api/symbols/src/src_view_Text.js.html b/docs/api/symbols/src/src_view_Text.js.html deleted file mode 100644 index f9f4d666..00000000 --- a/docs/api/symbols/src/src_view_Text.js.html +++ /dev/null @@ -1,237 +0,0 @@ -
1 /** - 2 * Hilo - 3 * Copyright 2015 alibaba.com - 4 * Licensed under the MIT License - 5 */ - 6 - 7 /** - 8 * <iframe src='../../../examples/Text.html?noHeader' width = '320' height = '240' scrolling='no'></iframe> - 9 * <br/> - 10 * @class Text类提供简单的文字显示功能。复杂的文本功能可以使用DOMElement。 - 11 * @augments View - 12 * @param {Object} properties 创建对象的属性参数。可包含此类所有可写属性。 - 13 * @module hilo/view/Text - 14 * @requires hilo/core/Class - 15 * @requires hilo/core/Hilo - 16 * @requires hilo/view/View - 17 * @requires hilo/view/CacheMixin - 18 * @property {String} text 指定要显示的文本内容。 - 19 * @property {String} color 指定使用的字体颜色。 - 20 * @property {String} textAlign 指定文本的对齐方式。可以是以下任意一个值：'start', 'end', 'left', 'right', and 'center'。 - 21 * @property {String} textVAlign 指定文本的垂直对齐方式。可以是以下任意一个值：'top', 'middle', 'bottom'。 - 22 * @property {Boolean} outline 指定文本是绘制边框还是填充。 - 23 * @property {Number} lineSpacing 指定文本的行距。单位为像素。默认值为0。 - 24 * @property {Number} maxWidth 指定文本的最大宽度。默认值为200。 - 25 * @property {String} font 文本的字体CSS样式。只读属性。设置字体样式请用setFont方法。 - 26 * @property {Number} textWidth 指示文本内容的宽度，只读属性。仅在canvas模式下有效。 - 27 * @property {Number} textHeight 指示文本内容的高度，只读属性。仅在canvas模式下有效。 - 28 */ - 29 var Text = Class.create(/** @lends Text.prototype */{ - 30 Extends: View, - 31 Mixes:CacheMixin, - 32 constructor: function(properties){ - 33 properties = properties || {}; - 34 this.id = this.id || properties.id || Hilo.getUid('Text'); - 35 Text.superclass.constructor.call(this, properties); - 36 - 37 // if(!properties.width) this.width = 200; //default width - 38 if(!properties.font) this.font = '12px arial'; //default font style - 39 this._fontHeight = Text.measureFontHeight(this.font); - 40 }, - 41 - 42 text: null, - 43 color: '#000', - 44 textAlign: null, - 45 textVAlign: null, - 46 outline: false, - 47 lineSpacing: 0, - 48 maxWidth: 200, - 49 font: null, //ready-only - 50 textWidth: 0, //read-only - 51 textHeight: 0, //read-only - 52 - 53 /** - 54 * 设置文本的字体CSS样式。 - 55 * @param {String} font 要设置的字体CSS样式。 - 56 * @returns {Text} Text对象本身。链式调用支持。 - 57 */ - 58 setFont: function(font){ - 59 var me = this; - 60 if(me.font !== font){ - 61 me.font = font; - 62 me._fontHeight = Text.measureFontHeight(font); - 63 } - 64 - 65 return me; - 66 }, - 67 - 68 /** - 69 * 覆盖渲染方法。 - 70 * @private - 71 */ - 72 render: function(renderer, delta){ - 73 var me = this, canvas = renderer.canvas; - 74 - 75 if(renderer.renderType === 'canvas'){ - 76 me._draw(renderer.context); - 77 } - 78 else if(renderer.renderType === 'dom'){ - 79 var drawable = me.drawable; - 80 var domElement = drawable.domElement; - 81 var style = domElement.style; - 82 - 83 style.font = me.font; - 84 style.textAlign = me.textAlign; - 85 style.color = me.color; - 86 style.width = me.width + 'px'; - 87 style.height = me.height + 'px'; - 88 style.lineHeight = (me._fontHeight + me.lineSpacing) + 'px'; - 89 - 90 domElement.innerHTML = me.text; - 91 renderer.draw(this); - 92 } - 93 else{ - 94 //TODO:自动更新cache - 95 me.cache(); - 96 renderer.draw(me); - 97 } - 98 }, - 99 -100 /** -101 * 在指定的渲染上下文上绘制文本。 -102 * @private -103 */ -104 _draw: function(context){ -105 var me = this, text = me.text.toString(); -106 if(!text) return; -107 -108 //set drawing style -109 context.font = me.font; -110 context.textAlign = me.textAlign; -111 context.textBaseline = 'top'; -112 -113 //find and draw all explicit lines -114 var lines = text.split(/\r\n|\r|\n|<br(?:[ \/])*>/); -115 var width = 0, height = 0; -116 var lineHeight = me._fontHeight + me.lineSpacing; -117 var i, line, w; -118 var drawLines = []; -119 -120 for(i = 0, len = lines.length; i < len; i++){ -121 line = lines[i]; -122 w = context.measureText(line).width; -123 -124 //check if the line need to split -125 if(w <= me.maxWidth){ -126 drawLines.push({text:line, y:height}); -127 // me._drawTextLine(context, line, height); -128 if(width < w) width = w; -129 height += lineHeight; -130 continue; -131 } -132 -133 var str = '', oldWidth = 0, newWidth, j, word; -134 -135 for(j = 0, wlen = line.length; j < wlen; j++){ -136 word = line[j]; -137 newWidth = context.measureText(str + word).width; -138 -139 if(newWidth > me.maxWidth){ -140 drawLines.push({text:str, y:height}); -141 // me._drawTextLine(context, str, height); -142 if(width < oldWidth) width = oldWidth; -143 height += lineHeight; -144 str = word; -145 }else{ -146 oldWidth = newWidth; -147 str += word; -148 } -149 -150 if(j == wlen - 1){ -151 drawLines.push({text:str, y:height}); -152 // me._drawTextLine(context, str, height); -153 if(str !== word && width < newWidth) width = newWidth; -154 height += lineHeight; -155 } -156 } -157 } -158 -159 me.textWidth = width; -160 me.textHeight = height; -161 if(!me.width) me.width = width; -162 if(!me.height) me.height = height; -163 -164 //vertical alignment -165 var startY = 0; -166 switch(me.textVAlign){ -167 case 'middle': -168 startY = me.height - me.textHeight >> 1; -169 break; -170 case 'bottom': -171 startY = me.height - me.textHeight; -172 break; -173 } -174 -175 //draw background -176 var bg = me.background; -177 if(bg){ -178 context.fillStyle = bg; -179 context.fillRect(0, 0, me.width, me.height); -180 } -181 -182 if(me.outline) context.strokeStyle = me.color; -183 else context.fillStyle = me.color; -184 -185 //draw text lines -186 for(var i = 0; i < drawLines.length; i++){ -187 var line = drawLines[i]; -188 me._drawTextLine(context, line.text, startY + line.y); -189 } -190 }, -191 -192 /** -193 * 在指定的渲染上下文上绘制一行文本。 -194 * @private -195 */ -196 _drawTextLine: function(context, text, y){ -197 var me = this, x = 0, width = me.width; -198 -199 switch(me.textAlign){ -200 case 'center': -201 x = width >> 1; -202 break; -203 case 'right': -204 case 'end': -205 x = width; -206 break; -207 }; -208 -209 if(me.outline) context.strokeText(text, x, y); -210 else context.fillText(text, x, y); -211 }, -212 -213 Statics: /** @lends Text */{ -214 /** -215 * 测算指定字体样式的行高。 -216 * @param {String} font 指定要测算的字体样式。 -217 * @return {Number} 返回指定字体的行高。 -218 */ -219 measureFontHeight: function(font){ -220 var docElement = document.documentElement, fontHeight; -221 var elem = Hilo.createElement('div', {style:{font:font, position:'absolute'}, innerHTML:'M'}); -222 -223 docElement.appendChild(elem); -224 fontHeight = elem.offsetHeight; -225 docElement.removeChild(elem); -226 return fontHeight; -227 } -228 } -229 -230 });\ No newline at end of file diff --git a/docs/api/symbols/src/src_view_View.js.html b/docs/api/symbols/src/src_view_View.js.html deleted file mode 100644 index 03e7b61a..00000000 --- a/docs/api/symbols/src/src_view_View.js.html +++ /dev/null @@ -1,399 +0,0 @@ -
1 /** - 2 * Hilo - 3 * Copyright 2015 alibaba.com - 4 * Licensed under the MIT License - 5 */ - 6 - 7 /** - 8 * @class View类是所有可视对象或组件的基类。 - 9 * @param {Object} properties 创建对象的属性参数。可包含此类所有可写属性。 - 10 * @module hilo/view/View - 11 * @requires hilo/core/Hilo - 12 * @requires hilo/core/Class - 13 * @requires hilo/event/EventMixin - 14 * @requires hilo/geom/Matrix - 15 * @property {String} id 可视对象的唯一标识符。 - 16 * @property {Number} x 可视对象的x轴坐标。默认值为0。 - 17 * @property {Number} y 可视对象的y轴坐标。默认值为0。 - 18 * @property {Number} width 可视对象的宽度。默认值为0。 - 19 * @property {Number} height 可视对象的高度。默认值为0。 - 20 * @property {Number} alpha 可视对象的透明度。默认值为1。 - 21 * @property {Number} rotation 可视对象的旋转角度。默认值为0。 - 22 * @property {Boolean} visible 可视对象是否可见。默认为可见，即true。 - 23 * @property {Number} pivotX 可视对象的中心点的x轴坐标。默认值为0。 - 24 * @property {Number} pivotY 可视对象的中心点的y轴坐标。默认值为0。 - 25 * @property {Number} scaleX 可视对象在x轴上的缩放比例。默认为不缩放，即1。 - 26 * @property {Number} scaleY 可视对象在y轴上的缩放比例。默认为不缩放，即1。 - 27 * @property {Boolean} pointerEnabled 可视对象是否接受交互事件。默认为接受交互事件，即true。 - 28 * @property {Object} background 可视对象的背景样式。可以是CSS颜色值、canvas的gradient或pattern填充。 - 29 * @property {Graphics} mask 可视对象的遮罩图形。 - 30 * @property {String|Function} align 可视对象相对于父容器的对齐方式。取值可查看Hilo.align枚举对象。 - 31 * @property {Container} parent 可视对象的父容器。只读属性。 - 32 * @property {Number} depth 可视对象的深度，也即z轴的序号。只读属性。 - 33 * @property {Drawable} drawable 可视对象的可绘制对象。供高级开发使用。 - 34 * @property {Array} boundsArea 可视对象的区域顶点数组。格式为：[{x:10, y:10}, {x:20, y:20}]。 - 35 */ - 36 var View = (function(){ - 37 - 38 return Class.create(/** @lends View.prototype */{ - 39 Mixes: EventMixin, - 40 constructor: function(properties){ - 41 properties = properties || {}; - 42 this.id = this.id || properties.id || Hilo.getUid("View"); - 43 Hilo.copy(this, properties, true); - 44 }, - 45 - 46 id: null, - 47 x: 0, - 48 y: 0, - 49 width: 0, - 50 height: 0, - 51 alpha: 1, - 52 rotation: 0, - 53 visible: true, - 54 pivotX: 0, - 55 pivotY: 0, - 56 scaleX: 1, - 57 scaleY: 1, - 58 pointerEnabled: true, - 59 background: null, - 60 mask: null, - 61 align: null, - 62 drawable: null, - 63 boundsArea: null, - 64 parent: null, - 65 depth: -1, - 66 - 67 /** - 68 * 返回可视对象的舞台引用。若对象没有被添加到舞台，则返回null。 - 69 * @returns {Stage} 可视对象的舞台引用。 - 70 */ - 71 getStage: function(){ - 72 var obj = this, parent; - 73 while(parent = obj.parent) obj = parent; - 74 //NOTE: don't use `instanceof` to prevent circular module requirement. - 75 //But it's not a very reliable way to check it's a stage instance. - 76 if(obj.canvas) return obj; - 77 return null; - 78 }, - 79 - 80 /** - 81 * 返回可视对象缩放后的宽度。 - 82 * @returns {Number} 可视对象缩放后的宽度。 - 83 */ - 84 getScaledWidth: function(){ - 85 return this.width * this.scaleX; - 86 }, - 87 - 88 /** - 89 * 返回可视对象缩放后的高度。 - 90 * @returns {Number} 可视对象缩放后的高度。 - 91 */ - 92 getScaledHeight: function(){ - 93 return this.height * this.scaleY; - 94 }, - 95 - 96 /** - 97 * 添加此对象到父容器。 - 98 * @param {Container} container 一个容器。 - 99 * @param {Uint} index 要添加到索引位置。 -100 * @returns {View} 可视对象本身。 -101 */ -102 addTo: function(container, index){ -103 if(typeof index === 'number') container.addChildAt(this, index); -104 else container.addChild(this); -105 return this; -106 }, -107 -108 /** -109 * 从父容器里删除此对象。 -110 * @returns {View} 可视对象本身。 -111 */ -112 removeFromParent: function(){ -113 var parent = this.parent; -114 if(parent) parent.removeChild(this); -115 return this; -116 }, -117 -118 /** -119 * 获取可视对象在舞台全局坐标系内的外接矩形以及所有顶点坐标。 -120 * @returns {Array} 可视对象的顶点坐标数组vertexs。另vertexs还包含属性： -121 * <ul> -122 * <li><b>x</b> - 可视对象的外接矩形x轴坐标。</li> -123 * <li><b>y</b> - 可视对象的外接矩形y轴坐标。</li> -124 * <li><b>width</b> - 可视对象的外接矩形的宽度。</li> -125 * <li><b>height</b> - 可视对象的外接矩形的高度。</li> -126 * </ul> -127 */ -128 getBounds: function(){ -129 var w = this.width, h = this.height, -130 mtx = this.getConcatenatedMatrix(), -131 poly = this.boundsArea || [{x:0, y:0}, {x:w, y:0}, {x:w, y:h}, {x:0, y:h}], -132 vertexs = [], point, x, y, minX, maxX, minY, maxY; -133 -134 for(var i = 0, len = poly.length; i < len; i++){ -135 point = mtx.transformPoint(poly[i], true, true); -136 x = point.x; -137 y = point.y; -138 -139 if(i == 0){ -140 minX = maxX = x; -141 minY = maxY = y; -142 }else{ -143 if(minX > x) minX = x; -144 else if(maxX < x) maxX = x; -145 if(minY > y) minY = y; -146 else if(maxY < y) maxY = y; -147 } -148 vertexs[i] = point; -149 } -150 -151 vertexs.x = minX; -152 vertexs.y = minY; -153 vertexs.width = maxX - minX; -154 vertexs.height = maxY - minY; -155 return vertexs; -156 }, -157 -158 /** -159 * 获取可视对象相对于其某个祖先（默认为最上层容器）的连接矩阵。 -160 * @param {View} ancestor 可视对象的相对的祖先容器。 -161 * @private -162 */ -163 getConcatenatedMatrix: function(ancestor){ -164 var mtx = new Matrix(1, 0, 0, 1, 0, 0); -165 -166 for(var o = this; o != ancestor && o.parent; o = o.parent){ -167 var cos = 1, sin = 0, -168 rotation = o.rotation % 360, -169 pivotX = o.pivotX, pivotY = o.pivotY, -170 scaleX = o.scaleX, scaleY = o.scaleY; -171 -172 if(rotation){ -173 var r = rotation * Math.PI / 180; -174 cos = Math.cos(r); -175 sin = Math.sin(r); -176 } -177 -178 if(pivotX != 0) mtx.tx -= pivotX; -179 if(pivotY != 0) mtx.ty -= pivotY; -180 mtx.concat(cos*scaleX, sin*scaleX, -sin*scaleY, cos*scaleY, o.x, o.y); -181 } -182 return mtx; -183 }, -184 -185 /** -186 * 检测由x和y参数指定的点是否在其外接矩形之内。 -187 * @param {Number} x 要检测的点的x轴坐标。 -188 * @param {Number} y 要检测的点的y轴坐标。 -189 * @param {Boolean} usePolyCollision 是否使用多边形碰撞检测。默认为false。 -190 * @returns {Boolean} 点是否在可视对象之内。 -191 */ -192 hitTestPoint: function(x, y, usePolyCollision){ -193 var bound = this.getBounds(), -194 hit = x >= bound.x && x <= bound.x + bound.width && -195 y >= bound.y && y <= bound.y + bound.height; -196 -197 if(hit && usePolyCollision){ -198 hit = pointInPolygon(x, y, bound); -199 } -200 return hit; -201 }, -202 -203 /** -204 * 检测object参数指定的对象是否与其相交。 -205 * @param {View} object 要检测的可视对象。 -206 * @param {Boolean} usePolyCollision 是否使用多边形碰撞检测。默认为false。 -207 */ -208 hitTestObject: function(object, usePolyCollision){ -209 var b1 = this.getBounds(), -210 b2 = object.getBounds(), -211 hit = b1.x <= b2.x + b2.width && b2.x <= b1.x + b1.width && -212 b1.y <= b2.y + b2.height && b2.y <= b1.y + b1.height; -213 -214 if(hit && usePolyCollision){ -215 hit = polygonCollision(b1, b2); -216 } -217 return !!hit; -218 }, -219 -220 /** -221 * 可视对象的基本渲染实现，用于框架内部或高级开发使用。通常应该重写render方法。 -222 * @param {Renderer} renderer 渲染器。 -223 * @param {Number} delta 渲染时时间偏移量。 -224 * @protected -225 */ -226 _render: function(renderer, delta){ -227 if((!this.onUpdate || this.onUpdate(delta) !== false) && renderer.startDraw(this)){ -228 renderer.transform(this); -229 this.render(renderer, delta); -230 renderer.endDraw(this); -231 } -232 }, -233 /** -234 * 冒泡鼠标事件 -235 */ -236 _fireMouseEvent:function(e){ -237 e.eventCurrentTarget = this; -238 this.fire(e); -239 -240 //处理mouseover事件 mouseover不需要阻止冒泡 -241 if(e.type == "mousemove"){ -242 if(!this.__mouseOver){ -243 this.__mouseOver = true; -244 var overEvent = Hilo.copy({}, e); -245 overEvent.type = "mouseover"; -246 this.fire(overEvent); -247 } -248 } -249 else if(e.type == "mouseout"){ -250 this.__mouseOver = false; -251 } -252 -253 //向上冒泡 -254 var parent = this.parent; -255 if(!e._stopped && !e._stopPropagationed && parent){ -256 if(e.type == "mouseout" || e.type == "touchout"){ -257 if(!parent.hitTestPoint(e.stageX, e.stageY, true)){ -258 parent._fireMouseEvent(e); -259 } -260 } -261 else{ -262 parent._fireMouseEvent(e); -263 } -264 } -265 }, -266 -267 /** -268 * 更新可视对象，此方法会在可视对象渲染之前调用。此函数可以返回一个Boolean值。若返回false，则此对象不会渲染。默认值为null。 -269 * 限制：如果在此函数中改变了可视对象在其父容器中的层级，当前渲染帧并不会正确渲染，而是在下一渲染帧。可在其父容器的onUpdate方法中来实现。 -270 * @type Function -271 * @default null -272 */ -273 onUpdate: null, -274 -275 /** -276 * 可视对象的具体渲染逻辑。子类可通过覆盖此方法实现自己的渲染。 -277 * @param {Renderer} renderer 渲染器。 -278 * @param {Number} delta 渲染时时间偏移量。 -279 */ -280 render: function(renderer, delta){ -281 renderer.draw(this); -282 }, -283 -284 /** -285 * 返回可视对象的字符串表示。 -286 * @returns {String} 可视对象的字符串表示。 -287 */ -288 toString: function(){ -289 return Hilo.viewToString(this); -290 } -291 }); -292 -293 /** -294 * @private -295 */ -296 function pointInPolygon(x, y, poly){ -297 var cross = 0, onBorder = false, minX, maxX, minY, maxY; -298 -299 for(var i = 0, len = poly.length; i < len; i++){ -300 var p1 = poly[i], p2 = poly[(i+1)%len]; -301 -302 if(p1.y == p2.y && y == p1.y){ -303 p1.x > p2.x ? (minX = p2.x, maxX = p1.x) : (minX = p1.x, maxX = p2.x); -304 if(x >= minX && x <= maxX){ -305 onBorder = true; -306 continue; -307 } -308 } -309 -310 p1.y > p2.y ? (minY = p2.y, maxY = p1.y) : (minY = p1.y, maxY = p2.y); -311 if(y < minY || y > maxY) continue; -312 -313 var nx = (y - p1.y)*(p2.x - p1.x) / (p2.y - p1.y) + p1.x; -314 if(nx > x) cross++; -315 else if(nx == x) onBorder = true; -316 -317 //当射线和多边形相交 -318 if(p1.x > x && p1.y == y){ -319 var p0 = poly[(len+i-1)%len]; -320 //当交点的两边在射线两旁 -321 if(p0.y < y && p2.y > y || p0.y > y && p2.y < y){ -322 cross ++; -323 } -324 } -325 } -326 -327 return onBorder || (cross % 2 == 1); -328 } -329 -330 /** -331 * @private -332 */ -333 function polygonCollision(poly1, poly2){ -334 var result = doSATCheck(poly1, poly2, {overlap:-Infinity, normal:{x:0, y:0}}); -335 if(result) return doSATCheck(poly2, poly1, result); -336 return false; -337 } -338 -339 /** -340 * @private -341 */ -342 function doSATCheck(poly1, poly2, result){ -343 var len1 = poly1.length, len2 = poly2.length, -344 currentPoint, nextPoint, distance, -345 min1, max1, min2, max2, dot, overlap, normal = {x:0, y:0}; -346 -347 for(var i = 0; i < len1; i++){ -348 currentPoint = poly1[i]; -349 nextPoint = poly1[(i < len1-1 ? i+1 : 0)]; -350 -351 normal.x = currentPoint.y - nextPoint.y; -352 normal.y = nextPoint.x - currentPoint.x; -353 -354 distance = Math.sqrt(normal.x * normal.x + normal.y * normal.y); -355 normal.x /= distance; -356 normal.y /= distance; -357 -358 min1 = max1 = poly1[0].x * normal.x + poly1[0].y * normal.y; -359 for(var j = 1; j < len1; j++){ -360 dot = poly1[j].x * normal.x + poly1[j].y * normal.y; -361 if(dot > max1) max1 = dot; -362 else if(dot < min1) min1 = dot; -363 } -364 -365 min2 = max2 = poly2[0].x * normal.x + poly2[0].y * normal.y; -366 for(j = 1; j < len2; j++){ -367 dot = poly2[j].x * normal.x + poly2[j].y * normal.y; -368 if(dot > max2) max2 = dot; -369 else if(dot < min2) min2 = dot; -370 } -371 -372 if(min1 < min2){ -373 overlap = min2 - max1; -374 normal.x = -normal.x; -375 normal.y = -normal.y; -376 }else{ -377 overlap = min1 - max2; -378 } -379 -380 if(overlap >= 0){ -381 return false; -382 }else if(overlap > result.overlap){ -383 result.overlap = overlap; -384 result.normal.x = normal.x; -385 result.normal.y = normal.y; -386 } -387 } -388 -389 return result; -390 } -391 -392 })();\ No newline at end of file