2.0.57

examples/pef.html

@@ -54,6 +54,7 @@
             document.body.clientHeight,
             FYGE.RENDERER_TYPE.WEBGL,
         );
+        console.log(stage)
         //监听窗口缩放,按需,一般移动端的不需要
         // window.addEventListener('resize', () => { stage.resize() });
         //鼠标事件

package.json

 {
     "name": "fyge",
-    "version": "2.0.56",
+    "version": "2.0.57",
     "description": "canvas渲染引擎",
     "main": "./build/fyge.min.js",
     "module": "./build/fyge.esm.js",

record.txt

@@ -550,6 +550,12 @@
         TextField的updateText方法内多行文本内，对于未设置文本宽度textWidth，不执行下面的测量，用else连接，realLines单独处理
         ScrollPage的scrollTo方法内缓动前增加执行移除先前缓动
 
+2.0.57  FloatDisplay新增addHtmlElement方法，用于处理html的插入
+        Stage新增autoSteering和scaleMode的get、set方法
+        Event删除静态属性CALL_FRAME
+        其他的都是注释的修改
+
+
 
 
 

src/2d/HashObject.ts

@@ -12,22 +12,19 @@ export abstract class HashObject {
     }
 
     /**
-     * 每一个对象都会有一个唯一的id码。
+     * 实例唯一id
      * @property instanceId
      * @public
      * @since 1.0.0
      * @return {number}
      * @readonly
-     * @example
-     *      //获取 对象唯一码
-     *      console.log(this.instanceId);
      */
     public get instanceId(): number {
         return this._instanceId;
     }
 
     /**
-     * 每一个类都有一个实例类型字符串，通过这个字符串，你能知道这个实例是从哪个类实例而来
+     * 实例类型
      * @property instanceType
      * @since 1.0.0
      * @public

src/2d/const.ts

@@ -7,7 +7,7 @@
  * @name VERSION
  * @type {string}
  */
-export const VERSION = "2.0.56";
+export const VERSION = "2.0.57";
 
 
 /**

src/2d/display/DisplayObject.ts

@@ -296,7 +296,7 @@ export class DisplayObject extends EventDispatcher {
     }
 
     /**
-     * 将本地坐标转换到全局坐标值
+     * 将本地坐标转换到全局坐标值（stage存在时返回stage上的坐标，不存在为画布全局坐标）
      * @method localToGlobal
      * @public
      * @since 1.0.0

src/2d/display/FloatDisplay.ts

@@ -2,11 +2,7 @@ import { Event } from "../events/Event";
 import { DisplayObject } from "./DisplayObject";
 // import { devicePixelRatio } from "../const";
 /**
- * 此类对于需要在canvas上放置html其他类型元素的时候非常有用<br/>
- * 比如有时候我们需要放置一个注册,登录或者其他的内容.这些内容包含了输入框<br/>
- * 或者下拉框什么的,无法在canvas里实现,但这些元素又跟canvas里面的元素<br/>
- * 位置,大小,缩放对应.就相当于是一个显示对象一样。可以随意设置他的<br/>
- * 属性,那么将你的html元素通过此类封装成显示对象再合适不过了
+ * canvas上的html标签浮层
  * 不能用于容器
  * 注意canvas所在标签和自身htmlElement样式position设置为absolute
  * @class FloatDisplay
@@ -16,7 +12,7 @@ import { DisplayObject } from "./DisplayObject";
  */
 export class FloatDisplay extends DisplayObject {
     /**
-     * 需要封装起来的html元素的引用。你可以通过这个引用来调用或设置此元素自身的属性方法和事件,甚至是样式
+     * 包装的html元素
      * @property htmlElement
      * @public
      * @since 1.0.0
@@ -42,13 +38,6 @@ export class FloatDisplay extends DisplayObject {
      * @since 1.0.0
      * @public
      * @example
-     *      var floatDisplay = new FloatDisplay();
-     *      floatDisplay.init(document.getElementById('aaa'));
-     *      s.addChild(floatDisplay);
-     *
-     * <p><a href="" target="_blank">测试链接</a></p>
-     * 
-     * @example
      *  //创建悬浮的html元素
      *  var section = document.createElement('section');
      *   section.id = "rule";
@@ -86,13 +75,14 @@ export class FloatDisplay extends DisplayObject {
                 let style = s.htmlElement.style;
                 if (!s._isAdded) {
                     s._isAdded = true;
-                    if (s.stage["rootDiv"]) {
-                        s.stage["rootDiv"].insertBefore(s.htmlElement, s.stage["rootDiv"].childNodes[0]);
-                    }
-                    //没有div直接加在body里吧
-                    else {
-                        document.body.appendChild(s.htmlElement)
-                    }
+                    // if (s.stage["rootDiv"]) {
+                    //     s.stage["rootDiv"].insertBefore(s.htmlElement, s.stage["rootDiv"].childNodes[0]);
+                    // }
+                    // //没有div直接加在body里吧
+                    // else {
+                    //     document.body.appendChild(s.htmlElement)
+                    // }
+                    s.addHtmlElement()
                 } else {
                     if (s.htmlElement && s.visible) {
                         style.display = "block";//"inline-block"
@@ -146,13 +136,14 @@ export class FloatDisplay extends DisplayObject {
         //如果原先在舞台上，加入，是否显示下一帧吧
         if (s.stage) {
             s._isAdded = true;
-            if (s.stage["rootDiv"]) {
-                s.stage["rootDiv"].insertBefore(s.htmlElement, s.stage["rootDiv"].childNodes[0]);
-            }
-            //没有div直接加在body里吧
-            else {
-                document.body.appendChild(s.htmlElement)
-            }
+            // if (s.stage["rootDiv"]) {
+            //     s.stage["rootDiv"].insertBefore(s.htmlElement, s.stage["rootDiv"].childNodes[0]);
+            // }
+            // //没有div直接加在body里吧
+            // else {
+            //     document.body.appendChild(s.htmlElement)
+            // }
+            s.addHtmlElement()
         }
     }
 
@@ -243,6 +234,18 @@ export class FloatDisplay extends DisplayObject {
     //     this.updateStyle();
     // }
 
+    private addHtmlElement() {
+        const { stage, htmlElement } = this;
+        if (!stage || !htmlElement) return;
+        var divParent = this.stage["canvas"].parentNode;
+        if (divParent) {
+            divParent.insertBefore(htmlElement, divParent.childNodes[0])
+        } else {
+            //没有div直接加在body里
+            document.body.appendChild(htmlElement)
+        }
+    }
+
     public destroy(): void {
         super.destroy();
         this.removeHtmlElement();

src/2d/display/Stage.ts

@@ -17,86 +17,79 @@ import { getEnv, getOsType, isWebGLSupported } from "../utils";
 export class Stage extends Container {
 
     /**
-     * 当前stage所使用的渲染器
-     * 渲染器有两种,一种是canvas 一种是webGl
+     * stage使用的渲染器
      * @property renderObj
      * @public
      * @since 1.0.0
-     * @type {IRender}
+     * @type {SystemRenderer}
      * @default null
      */
     public renderObj: SystemRenderer = null;
 
     /**
-     * 舞台在设备里截取后的可见区域,有些时候知道可见区域是非常重要的,因为这样你就可以根据舞台的可见区域做自适应了。
+     * 相对于stage的可见区域，考虑不对外开放，但是有些地方又有用，比如某点是否在舞台可见区域内viewRect.isPointIn(gp)
      * @property viewRect
      * @public
-     * @readonly
      * @since 1.0.0
      * @type {Rectangle}
-     * @default {x:0,y:0,width:0,height:0}
+     * @default 
      * @readonly
      */
     public viewRect: Rectangle = new Rectangle();
 
     /**
-     * 舞台的尺寸宽,也就是我们常说的设计尺寸
+     * 舞台设计尺寸，一般为设计稿内容尺寸
      * @property desWidth
      * @public
      * @since 1.0.0
-     * @default 320
+     * @default 0
      * @type {number}
      * @readonly
      */
     public desWidth: number = 0;
     /**
-     * 舞台的尺寸高,也就是我们常说的设计尺寸
+     * 舞台设计尺寸，一般为设计稿内容尺寸
      * @property desHeight
      * @public
      * @since 1.0.0
-     * @default 240
+     * @default 0
      * @type {number}
      * @readonly
      */
     public desHeight: number = 0;
     /**
-     * 舞台在当前设备中的真实高
+     * 舞台在设备中的显示尺寸
      * @property divHeight
      * @public
      * @since 1.0.0
-     * @default 320
+     * @default 0
      * @type {number}
      * @readonly
      */
     public divHeight: number = 0;
     /**
-     * 舞台在当前设备中的真实宽
+     * 舞台在设备中的显示尺寸
      * @property divWidth
      * @public
      * @since 1.0.0
-     * @default 240
+     * @default 0
      * @readonly
      * @type {number}
      */
     public divWidth: number = 0;
+
+    private _bgColor: number = 0x000000;
     /**
-     * 舞台的背景色
-     * 默认就是透明背景
-     * 可能设置一个颜色值改变舞台背景
+     * 舞台的背景色，暂时无效，渲染器默认透明背景，且webgl模式下clearColor不会跟着修改，TODO 以后修改
      * @property bgColor
      * @public
      * @since 1.0.0
      * @type {number}
-     * @default "";
+     * @default 0;
      */
-    private _bgColor: number = 0x000000;
-
     public get bgColor(): number {
         return this._bgColor;
     }
-    /**
-     * 设置颜色，即改变渲染器颜色
-     */
     public set bgColor(value: number) {
         if (this._bgColor === value) return
         this._bgColor = value;
@@ -104,17 +97,20 @@ export class Stage extends Container {
     }
 
     /**
-     * 上一次鼠标或触碰经过的显示对象列表
+     * 上一次鼠标或触碰经过的显示对象列表，为了over和out事件
      * @property _lastDpList
      * @type {Object}
      * @private
      */
     private _lastDpList: any = {};
 
+    /**
+     * 计算画布实际尺寸/显示尺寸所得或构造函数传入设置画布实际尺寸
+     */
     private _dpi: number;
 
     /**
-     * 
+     * 记录下画布对象
      */
     private canvas: HTMLCanvasElement;
 
@@ -131,6 +127,8 @@ export class Stage extends Container {
     get stageHeight() {
         return this.viewRect.height;
     }
+
+    private _autoSteering: boolean = false;
     /**
      * 是否自动转向，一般对于需要手机横屏自动更新内容朝向的设置为true，自动对齐设计尺寸和屏幕显示尺寸
      * 默认false
@@ -139,13 +137,35 @@ export class Stage extends Container {
      * @type {boolean}
      * @default false
      */
-    public autoSteering: boolean = false;
+    get autoSteering() {
+        return this._autoSteering;
+    }
+    set autoSteering(value: boolean) {
+        if (this._autoSteering == value) return;
+        this._autoSteering = value;
+        //没啥性能问题，设置了就执行一次
+        this._setAlign();
+    }
+
+    private _scaleMode: "fixedWidth" | "fixedHeight";
     /**
-     * 缩放模式
+     * 缩放模式，暂时只有 "fixedWidth" | "fixedHeight"，
+     * 以后有需要再加，同时修改构造函数传参fixedHeight
      */
-    private _scaleMode: "fixedWidth" | "fixedHeight";
+    get scaleMode(): "fixedWidth" | "fixedHeight" {
+        return this._scaleMode
+    }
+    set scaleMode(value: "fixedWidth" | "fixedHeight") {
+        if (this._scaleMode == value) return;
+        this._scaleMode = value;
+        //没啥性能问题，设置了就执行一次
+        this._setAlign();
+    }
     /**
-     * 舞台是否居中
+     * 舞台是否居中，
+     * 不居中则以左上角为00点，
+     * 否则按照scaleMode均匀裁切上下或左右，用viewRect.xy获取实际裁剪数值
+     * 暂时外部没有需求，不开放
      */
     private _stageCenter: boolean;
     /**
@@ -274,7 +294,7 @@ export class Stage extends Container {
         // }
     }
     /**
-     * 暂时不存在外部调用的情况
+     * 处理适配，暂时不存在外部调用的情况
      */
     private _setAlign() {
         let s = this;
@@ -297,7 +317,7 @@ export class Stage extends Container {
         //内容是否为竖屏内容
         let isDesH = desH >= desW;
         //处理下,显示尺寸宽高颠倒下
-        if (s.autoSteering && isDesH != isDivH) {
+        if (s._autoSteering && isDesH != isDivH) {
             let d = divH;
             divH = divW;
             divW = d;
@@ -307,7 +327,7 @@ export class Stage extends Container {
         s.scaleX = scale;
         s.scaleY = scale;
         //未设置自动转向，或不需要转向
-        if (!s.autoSteering || isDesH == isDivH) {
+        if (!s._autoSteering || isDesH == isDivH) {
             s.rotation = 0;
             //没设置过居中的位移置0
             if (!s._stageCenter) s.x = s.y = 0
@@ -336,12 +356,13 @@ export class Stage extends Container {
     /**
      * 移动端不常用
      * 微信浏览器使用情景:ios返回页面下面出现操作栏
-     * window.addEventListener('resize', () => {stage.resize()});
      * 这里会按照原_dpi修改canvas的实际尺寸
      * 一般设备的dpi不会改变,
      * web全屏环境可不传参数,否则自行计算显示尺寸传入
      * @param divWidth 
      * @param divHeight 
+     * @example
+     *   window.addEventListener('resize', () => {stage.resize()});
      */
     public resize(divWidth?: number, divHeight?: number) {
         if (getEnv() == "web") {//web环境不传当作全屏处理
@@ -370,22 +391,22 @@ export class Stage extends Container {
     }
 
     /**
-     * 这个是鼠标事件的MouseEvent对象池,因为如果用户有监听鼠标事件,如果不建立对象池,那每一秒将会new Fps个数的事件对象,影响性能
+     * 鼠标事件MouseEvent对象池
      * @property _ml
      * @type {Array}
      * @private
      */
-    private _ml: any = [];
+    private _ml: MouseEvent[] = [];
     /**
-     * 这个是事件中用到的Point对象池,以提高性能
+     * 鼠标事件中用到的Point对象池
      * @property _mp
      * @type {Array}
      * @private
      */
-    private _mp: any = [];
+    private _mp: Point[] = [];
 
     /**
-     * 刷新mouse或者touch事件
+     * 初始化鼠标事件
      * @method _initMouseEvent
      * @private
      */
@@ -398,8 +419,8 @@ export class Stage extends Container {
         event.identifier = identifier;
     }
 
-    //每一个手指事件的对象池
     /**
+     * 每一个手指事件的对象池，为了click事件，得保证down和up是同一个手指标识
      * @property _mouseDownPoint
      * @type {Object}
      * @private
@@ -407,7 +428,7 @@ export class Stage extends Container {
     private _mouseDownPoint: any = {};
 
     /**
-     * 循环刷新页面的函数
+     * 渲染器刷新stage
      * @method flush
      * @private
      * @return {void}
@@ -417,7 +438,7 @@ export class Stage extends Container {
     }
 
     /**
-     * html的鼠标或单点触摸对应的引擎事件类型名
+     * 原始（html或其他）的鼠标事件名和引擎鼠标事件名的映射，TODO，字符串统统用MouseEvent的静态属性代替，事件名只维护一个地方
      * touchcancel:"onMouseUp"不常用，先不加
      * @property _mouseEventTypes
      * @type {{mousedown: string, mouseup: string, mousemove: string, touchstart: string, touchmove: string, touchend: string}}
@@ -447,7 +468,7 @@ export class Stage extends Container {
      */
     public webMouseEventStopPropagation: boolean;
     /**
-     * 无多指，无拖动
+     * 鼠标事件方法
      * @method onMouseEvent
      * @param e
      * @private

src/2d/events/Event.ts

@@ -44,7 +44,7 @@ export class Event extends HashObject {
     public static SCROLL_START: string = "onScrollStart";
     /**
      * ScrollPage组件滑动到结束位置事件
-     * @property ON_SCROLL_TO_END
+     * @property SCROLL_TO_END
      * @static
      * @since 1.1.0
      * @type {string}
@@ -71,7 +71,7 @@ export class Event extends HashObject {
     /**
      * 显示对象从舞台移出事件
      * @Event
-     * @property REMOVE_TO_STAGE
+     * @property REMOVED_FROM_STAGE
      * @type {string}
      * @static
      * @public
@@ -89,7 +89,7 @@ export class Event extends HashObject {
      */
     public static ENTER_FRAME: string = "onEnterFrame";
     /**
-     * MovieClip 播放完成事件
+     * AnimationClip 播放完成事件
      * @Event
      * @property END_FRAME
      * @type {string}
@@ -98,16 +98,6 @@ export class Event extends HashObject {
      * @since 1.0.0
      */
     public static END_FRAME: string = "onEndFrame";
-    /**
-     * MovieClip 帧标签事件
-     * @Event
-     * @property CALL_FRAME
-     * @type {string}
-     * @static
-     * @public
-     * @since 1.0.0
-     */
-    public static CALL_FRAME: string = "onCallFrame";
     /**
      * 完成事件
      * @Event
@@ -234,7 +224,7 @@ export class Event extends HashObject {
     }
 
     /**
-     * 重围事件到初始状态方便重复利用
+     * 重置事件
      * @method reset
      * @param {string} type
      * @param target

src/2d/events/EventDispatcher.ts

@@ -36,7 +36,7 @@ export class EventDispatcher extends HashObject {
     public static _totalMEC: number = 0;
 
     /**
-     * 看看有多少mouse或者touch侦听数
+     * 获取鼠标事件数量
      * @method getMouseEventCount
      * @return {number}
      * @static
@@ -62,16 +62,16 @@ export class EventDispatcher extends HashObject {
     }
 
     /**
-     * 给对象添加一个侦听
+     * 给对象添加事件监听
      * @method addEventListener
      * @public
      * @since 1.0.0
-     * @param {string} type 侦听类形
-     * @param {Function}listener 侦听后的回调方法,如果这个方法是类实例的方法
-     * @param context thisObject
+     * @param {string} type 监听类形
+     * @param {Function}listener 监听后的回调方法
+     * @param {*}context listener中的this指向
      * @param {boolean} useCapture true 捕获阶段 false 冒泡阶段 默认 true
      * @example
-     *      this.addEventListener(Event.ADD_TO_STAGE,function(e){console.log(this);},this);
+     *      this.addEventListener("eventName",function(e){console.log(e);},this);
      */
     public addEventListener(type: string, listener: Function, context?: any, useCapture: boolean = true): this {
         if (!type) {

src/2d/events/MouseEvent.ts

 import { Event } from "./Event";
 import { DisplayObject } from "../display/DisplayObject";
 /**
- * 鼠标事件类,电脑端鼠标,移动设备端的触摸都使用此事件来监听
+ * 鼠标事件类
  * @class MouseEvent
  * @extends Event
  * @public
@@ -9,7 +9,7 @@ import { DisplayObject } from "../display/DisplayObject";
  */
 export class MouseEvent extends Event {
     /**
-     * 鼠标或者手指按下事件
+     * 鼠标按下事件
      * @property MOUSE_DOWN
      * @static
      * @public
@@ -18,7 +18,7 @@ export class MouseEvent extends Event {
      */
     public static MOUSE_DOWN: string = "onMouseDown";
     /**
-     * 鼠标或者手指抬起事件
+     * 鼠标抬起事件
      * @property MOUSE_UP
      * @static
      * @public
@@ -27,7 +27,7 @@ export class MouseEvent extends Event {
      */
     public static MOUSE_UP: string = "onMouseUp";
     /**
-     * 鼠标或者手指单击
+     * 鼠标点击事件
      * @property CLICK
      * @static
      * @public
@@ -36,7 +36,7 @@ export class MouseEvent extends Event {
      */
     public static CLICK: string = "onMouseClick";
     /**
-     * 鼠标或者手指移动事件
+     * 鼠标移动事件
      * @property MOUSE_MOVE
      * @static
      * @public
@@ -45,7 +45,7 @@ export class MouseEvent extends Event {
      */
     public static MOUSE_MOVE: string = "onMouseMove";
     /**
-     * 鼠标或者手指移入到显示对象上里触发的事件
+     * 鼠标移入到显示对象上里触发的事件
      * @property MOUSE_OVER
      * @static
      * @public
@@ -54,7 +54,7 @@ export class MouseEvent extends Event {
      */
     public static MOUSE_OVER: string = "onMouseOver";
     /**
-     * 鼠标或者手指移出显示对象边界触发的事件
+     * 鼠标移出显示对象边界触发的事件
      * @property MOUSE_OUT
      * @static
      * @public
@@ -63,7 +63,7 @@ export class MouseEvent extends Event {
      */
     public static MOUSE_OUT: string = "onMouseOut";
     /**
-     * mouse或touch事件时canvas实际尺寸坐标x点
+     * 鼠标事件时canvas实际尺寸坐标x点
      * @property clientX
      * @public
      * @since 1.0.0
@@ -71,7 +71,7 @@ export class MouseEvent extends Event {
      */
     public clientX: number = 0;
     /**
-     * mouse或touch事件时canvas实际尺寸坐标y点
+     * 鼠标事件时canvas实际尺寸坐标y点
      * @property clientY
      * @public
      * @since 1.0.0
@@ -79,7 +79,7 @@ export class MouseEvent extends Event {
      */
     public clientY: number = 0;
     /**
-     * mouse或touch事件时stage上坐标x点
+     * 鼠标事件时stage上坐标x点
      * @property stageX
      * @public
      * @since 1.0.0
@@ -87,7 +87,7 @@ export class MouseEvent extends Event {
      */
     public stageX: number = 0;
     /**
-     * mouse或touch事件时stage上坐标y点
+     * 鼠标事件时stage上坐标y点
      * @property stageY
      * @public
      * @since 1.0.0
@@ -95,7 +95,7 @@ export class MouseEvent extends Event {
      */
     public stageY: number = 0;
     /**
-     * mouse或touch事件时显示对象本地坐标x点
+     * 鼠标事件时显示对象本地坐标x点
      * @property localX
      * @public
      * @since 1.0.0
@@ -103,7 +103,7 @@ export class MouseEvent extends Event {
      */
     public localX: number = 0;
     /**
-     * mouse或touch事件时显示对象本地坐标y点
+     * 鼠标事件时显示对象本地坐标y点
      * @property localY
      * @public
      * @since 1.0.0
@@ -111,7 +111,7 @@ export class MouseEvent extends Event {
      */
     public localY: number = 0;
     /**
-     * 触发事件的终点对象
+     * 鼠标事件的终点对象，注意区分target
      * @property currentTarget
      * @public
      * @since 1.0.0
@@ -120,7 +120,7 @@ export class MouseEvent extends Event {
      */
     public currentTarget: DisplayObject = null;
     /**
-     * 触摸或者鼠标事件的手指唯一标识
+     * 鼠标事件的手指唯一标识
      * @property identifier
      * @type {number}
      * @since 1.1.2

src/2d/graphics/Shape.ts

@@ -202,7 +202,7 @@ export class Shape extends Sprite {
 
     /**
      * 三次贝赛尔曲线
-     * 从上一点画二次贝赛尔曲线到某一点,如果没有设置上一点，则上一占默认为(0,0)
+     * 从上一点画二次贝赛尔曲线到某一点,如果没有设置上一点，则上一点默认为(0,0)
      * @method bezierCurveTo
      * @param {number} cp1X 1控制点X
      * @param {number} cp1Y 1控制点Y
@@ -434,7 +434,7 @@ export class Shape extends Sprite {
     }
 
     /**
-     * 线条位图填充 一般给Flash2x用
+     * 线条位图填充
      * @method beginBitmapStroke
      * @param {Image} image
      * @param {Array} matrix

src/2d/text/TextField.ts

@@ -9,11 +9,9 @@ import { BaseTexture } from "../texture";
 //文本canvas上xy的偏移量
 const padding = 10;
 /**
- * 到时有离屏canvas再修改，现在离屏canvasios有问题，且文本模糊
- * 继承Sprite，暂时发现，只需要切换bitmap和Sprite,TextField永远都是最新的，到时替换
- * 动态文本类,有时需要在canvas里有一个动态文本,能根据我们的显示内容来改变
+ * 动态文本类
  * @class TextField
- * @extends DisplayObject
+ * @extends Sprite
  * @since 1.0.0
  * @public
  */