2.0.53

build/FYGE.d.ts

-declare namespace FYGE{export  const VERSION = "2.0.52";
+declare namespace FYGE{export  const VERSION = "2.0.53";
 
 export  function cos(angle: number): number;
 
@@ -1498,7 +1498,7 @@ export  class BaseTexture extends EventDispatcher {
     scaleMode: SCALE_MODES;
     /**
      * 加载完成会设置为true
-     * 加载失败或没有贴图数据则为false，
+     * 加载失败或没有贴图数据则为false，或者宽高为0等都为false
      * 通常用于标记基础纹理是否可用
      */
     hasLoaded: boolean;
@@ -1565,9 +1565,9 @@ export  class BaseTexture extends EventDispatcher {
      */
     update(): void;
     /**
-     *
+     * 原先的_sourceChange改成了_sourceLoaded，且变成私有
      */
-    _sourceChange(source: any): void;
+    private _sourceLoaded;
     /**
      * 销毁 base texture
      * 基本不会销毁纹理

build/types.d.ts

-export  const VERSION = "2.0.52";
+export  const VERSION = "2.0.53";
 
 export  function cos(angle: number): number;
 
@@ -1498,7 +1498,7 @@ export  class BaseTexture extends EventDispatcher {
     scaleMode: SCALE_MODES;
     /**
      * 加载完成会设置为true
-     * 加载失败或没有贴图数据则为false，
+     * 加载失败或没有贴图数据则为false，或者宽高为0等都为false
      * 通常用于标记基础纹理是否可用
      */
     hasLoaded: boolean;
@@ -1565,9 +1565,9 @@ export  class BaseTexture extends EventDispatcher {
      */
     update(): void;
     /**
-     *
+     * 原先的_sourceChange改成了_sourceLoaded，且变成私有
      */
-    _sourceChange(source: any): void;
+    private _sourceLoaded;
     /**
      * 销毁 base texture
      * 基本不会销毁纹理

examples/2d.html

@@ -201,7 +201,9 @@
 
             //svga动画
             SvgaParser.loadSvga("./res/小贱成年常态.svga", (v) => {
-                stage.addChild(new FYGE.SvgaAni(v)).y -= 600
+                var s = stage.addChild(new FYGE.SvgaAni(v))
+                s.x += 200;
+                s.y -= 600;
             })
             //lottie动画（文件全）
             FYGE.GlobalLoader.loadJson((s, json) => {
@@ -249,11 +251,11 @@
             //测试下shape的椭圆
             var s = stage.addChild(new FYGE.Shape())
             s.beginFill(0xffff00)
-            s.drawEllipse(100, 180, 40, 30,0, Math.PI * 2)
+            s.drawEllipse(100, 180, 40, 30, 0, Math.PI * 2)
             s.endFill()
             var s = stage.addChild(new FYGE.Graphics())
             s.beginFill(0x00ff00)
-            s.drawEllipse(100, 245, 40, 30,0, Math.PI * 2)
+            s.drawEllipse(100, 245, 40, 30, 0, Math.PI * 2)
             s.endFill()
 
             //测试svga蒙版
@@ -261,12 +263,12 @@
                 stage.addChild(new FYGE.SvgaAni(v)).y -= 100
             })
 
-        //     var ss = stage.addChild(new FYGE.EditableText())
-        //     ss.size = 40;
-        //     ss.prompt = "啊实打实大苏打"
-        //    ss.addEventListener("onInput",(e)=>{
-        //        console.log(e)
-        //    })
+            //     var ss = stage.addChild(new FYGE.EditableText())
+            //     ss.size = 40;
+            //     ss.prompt = "啊实打实大苏打"
+            //    ss.addEventListener("onInput",(e)=>{
+            //        console.log(e)
+            //    })
 
             //  console.log(   FYGE.toDisplayDataURL(stage,null,{type: "jpeg"}))
         }, this);

package.json

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

record.txt

@@ -502,9 +502,19 @@
         loadSpine抽象出parseSpineData方法
         Spine的createMesh方法去掉了判断canvasPadding，直接赋值
 
+2.0.53  Container的update方法里不再判断自己的visible
+        Sprite的_onTextureUpdate内新增逻辑this._boundsID++;
+        Sprite的texture的set方法较大改动，原纹理移除update监听的判断，当前纹理始终监听，纹理赋值null时updateLocalBoundsSelf改成_onTextureUpdate（区别在注释里）
+        Shape的updateShape方法里注释visible判断，注释_boundsID++，注释所有_localBoundsSelf处理，注释_onTextureUpdate，后三个s.texture.update()里都会处理
+        TextField的updateText方法里注释_boundsID++，注释_localBoundsSelf处理，注释_onTextureUpdate，理由同上
+        BaseTexture的_sourceChange方法改成了_sourceLoaded,且私有，相关地方替换修改，且注释两个this.dispatchEvent("loaded")（_sourceLoaded内会执行）
+        Texture文件里的removeAllHandlers函数里新增removeEventListener置空
+
+
+
 
         
-        
+Sprite添加像素检测还需从长计议，涉及图集的trim和rotate，还有数据格式的图片不用绘制的方式        
 
 使用多纹理通道时需要着色器做if判断，所以性能会变差，但是使用单通道在有多纹理时需要断批一样影响性能，具体权衡暂时不改
 

src/2d/const.ts

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

src/2d/display/Container.ts

@@ -335,7 +335,7 @@ export default class Container extends DisplayObject {
         //children遍历计算
         for (let i = 0, j = this.children.length; i < j; ++i) {
             const child = this.children[i];
-            if (child.visible) {//为了优化性能，但是会出现，不显示的对象，获取到的位置等信息是错误的
+            if (child.visible) {//为了优化性能，但是会出现，不显示的对象，获取到的位置等信息是错误的，但是可以自行调用updateTransform
                 child.updateTransform();
             }
         }
@@ -550,7 +550,7 @@ export default class Container extends DisplayObject {
      * 节点每帧更新方法，注意别覆盖，否则每帧监听将失效，子类可继承修改
      */
     update() {
-        if (!this.visible) return;
+        // if (!this.visible) return;//从root往下时block（比如下面子级的visible判断），自身不进行判断
         //更新自己的
         super.update()
         //更新儿子们的

src/2d/display/Sprite.ts

@@ -161,6 +161,9 @@ export default class Sprite extends Container {
 
         //修改_localBoundsSelf
         this.updateLocalBoundsSelf();
+
+        //包围盒id
+        this._boundsID++;
     }
 
     /**
@@ -476,9 +479,15 @@ export default class Sprite extends Container {
             return;
         }
         //如果存在原贴图，且还没加载好，移除监听_onTextureUpdate；
-        if (this._texture != Texture.EMPTY &&
-            this._texture != null &&
-            !this._texture.baseTexture.hasLoaded) this._texture.removeEventListener('update', this._onTextureUpdate, this);
+        // if (this._texture != Texture.EMPTY &&
+        //     this._texture != null &&
+        //     !this._texture.baseTexture.hasLoaded) this._texture.removeEventListener('update', this._onTextureUpdate, this);
+
+        //原来的纹理，其实直接全都要移除，
+        if (this._texture) {
+            this._texture.removeEventListener('update', this._onTextureUpdate, this);
+        }
+
         //赋值
         this._texture = value || Texture.EMPTY;
 
@@ -490,12 +499,16 @@ export default class Sprite extends Container {
             if (value.baseTexture.hasLoaded) {
                 this._onTextureUpdate();
             }
-            else {
-                value.once('update', this._onTextureUpdate, this);//只会监听一次
-            }
+            // else {
+            //     value.once('update', this._onTextureUpdate, this);//只会监听一次
+            // }
+            //都监听下，其实没加载的纹理图片纹理确实只需要监听一次，这里先不管了，后续有性能问题再考虑
+            value.addEventListener('update', this._onTextureUpdate, this);
         } else {
             //624修改。如果置空纹理，_localBoundsSelf置空
-            this.updateLocalBoundsSelf();
+            // this.updateLocalBoundsSelf();
+            //20211201修改，这样修改如果设置过width和height的，内部会通过设置scale保留，从而依旧能点击到
+            this._onTextureUpdate()
         }
     }
     /**

src/2d/graphics/Shape.ts

@@ -533,10 +533,10 @@ export class Shape extends Sprite {
      */
     public updateShape(): void {
         let s: Shape = this;
-        if (!s.visible) return;
+        // if (!s.visible) return;//这里不阻止
         if (!s.dirty) return;
         s.dirty = false;
-        s._boundsID++;//为了Container里calculateBounds的判断;
+        // s._boundsID++;//为了Container里calculateBounds的判断;//20211201注释下面s.texture.update()里会执行
         //更新缓存
         let cLen: number = s._command.length;
         let leftX: number;
@@ -651,10 +651,10 @@ export class Shape extends Sprite {
             let h = buttonRightY - leftY;
             s.offsetX = leftX;
             s.offsetY = leftY;
-            s._localBoundsSelf.x = leftX + 10;
-            s._localBoundsSelf.y = leftY + 10;
-            s._localBoundsSelf.width = w - 20;
-            s._localBoundsSelf.height = h - 20;
+            // s._localBoundsSelf.x = leftX + 10;//下面anchorTexture的设置会更新（且还是原来的错误的纹理尺寸），s.texture.update()里也会更新了
+            // s._localBoundsSelf.y = leftY + 10;
+            // s._localBoundsSelf.width = w - 20;
+            // s._localBoundsSelf.height = h - 20;
             let _canvas: any = s.canvas;
             let ctx = s.context;
             _canvas.width = w;
@@ -669,13 +669,13 @@ export class Shape extends Sprite {
             s.canvas.height = 0;
             s.offsetX = 0;
             s.offsetY = 0;
-            s._localBoundsSelf.clear();
+            // s._localBoundsSelf.clear();//下面anchorTexture的设置会更新（且还是原来的错误的纹理尺寸），s.texture.update()里也会更新了
             s.anchorTexture.set(0, 0) //= { x: 0, y: 0 };
         }
         //更新贴图
         s.texture.update();
         //这个先不管,上面的_localBoundsSelf等都已计算
-        s._onTextureUpdate();//更新回去anchorTexture修改时更新了用的时原先的canvas尺寸
+        // s._onTextureUpdate();//更新回去anchorTexture修改时更新了用的时原先的canvas尺寸，20211201注释（texture.update()内会执行（监听一直在））
     }
 
     /**
@@ -802,7 +802,7 @@ export class Shape extends Sprite {
     //     this.updateShape();
     //     super._calculateBounds();
     // }
-    //为了updateShape里的_boundId++不会影响calculateBounds里的判断，用不带_的继承，TODO待测试
+    //因为updateShape里的_boundId++不会影响calculateBounds里的判断，用不带_的继承，TODO待测试
     calculateBounds() {
         this.updateShape();
         //在舞台上，且渲染方式是webgl，且用过遮罩的，注意，临时解决webgl，shape的遮罩移动时不生效，待考虑更优雅的方式TODO

src/2d/text/TextField.ts

@@ -501,7 +501,7 @@ export class TextField extends Sprite {
             return;
         }
         s.dirty = false;
-        s._boundsID++;//为了Container里calculateBounds的判断;
+        // s._boundsID++;//为了Container里calculateBounds的判断;//下面s.texture.update()内会执行监听内容_onTextureUpdate
         //强转字符
         s._text += "";
         //如果没有文本
@@ -513,7 +513,7 @@ export class TextField extends Sprite {
             //     s.texture.baseTexture.source.width = 0;
             //     s.texture.baseTexture.source.height = 0;
             // }
-            s._localBoundsSelf.clear();
+            // s._localBoundsSelf.clear();//下面s.texture.update()内会执行监听内容_onTextureUpdate
             s.anchorTexture = { x: 0, y: 0 };
             s.texture.update()
             return
@@ -643,7 +643,7 @@ export class TextField extends Sprite {
         this.anchorTexture = { x: (padding + 0.5) / canWidth, y: padding / canHeight }
         // if (osType == "ios") {
         s.texture.update();
-        s._onTextureUpdate();
+        // s._onTextureUpdate();//上面s.texture.update()会执行，监听一直在
         // document.body.appendChild(s.canvas)
         // } else {
         //     var imgData = ctx.getImageData(0, 0, canWidth, canHeight)

src/2d/texture/BaseTexture.ts

@@ -35,7 +35,7 @@ export default class BaseTexture extends EventDispatcher {
     scaleMode: SCALE_MODES;
     /**
      * 加载完成会设置为true
-     * 加载失败或没有贴图数据则为false，
+     * 加载失败或没有贴图数据则为false，或者宽高为0等都为false
      * 通常用于标记基础纹理是否可用
      */
     hasLoaded: boolean;
@@ -118,22 +118,22 @@ export default class BaseTexture extends EventDispatcher {
         if (source) {
             //是imageData
             if (source._data) {
-                this._sourceChange(source);
+                this._sourceLoaded(source);
             }
             //是canvas
             else if (source.getContext) {
-                this._sourceChange(source);
+                this._sourceLoaded(source);
             }
             else {
                 if (source.complete) {
-                    this._sourceChange(source);
-                    this.dispatchEvent("loaded");
+                    this._sourceLoaded(source);
+                    // this.dispatchEvent("loaded");//上面的方法会执行loaded
                 } else {
                     var self = this;
                     //会覆盖onload方法
                     source.onload = function () {
-                        self._sourceChange(source);
-                        self.dispatchEvent("loaded");
+                        self._sourceLoaded(source);
+                        // self.dispatchEvent("loaded");//上面的方法会执行loaded
                     };
                     //失败的
                     source.onerror = function () {
@@ -162,9 +162,9 @@ export default class BaseTexture extends EventDispatcher {
     }
 
     /**
-     * 
+     * 原先的_sourceChange改成了_sourceLoaded，且变成私有
      */
-    _sourceChange(source) {
+    private _sourceLoaded(source) {
         //赋值
         this.source = source;
         //路径，暂时没用，需要时再处理，先找src 再path（基本没有）
@@ -213,7 +213,7 @@ export default class BaseTexture extends EventDispatcher {
         let baseTexture = new BaseTexture();
         GlobalLoader.loadImage((s, res) => {
             if (s) {
-                baseTexture._sourceChange(res);
+                baseTexture._sourceLoaded(res);
                 //添加进缓存
                 if (url.indexOf('data:') !== 0) BaseTexture.addToCache(baseTexture, url);
             } else {

src/2d/texture/Texture.ts

@@ -160,8 +160,8 @@ export default class Texture extends EventDispatcher {
         this.orig = orig || frame;// new Rectangle(0, 0, 1, 1);
 
         this._rotate = Number(rotate || 0);
-
-        if (baseTexture.hasLoaded || (baseTexture.source && baseTexture.source.getContext)) {//对于canvas形式的判断hasLoaded有问题，导致不能监听update，到时改
+        //对于canvas形式的判断hasLoaded有问题，导致不能监听update，hasLoaded还用于判断纹理是否可用（canvas宽高为0不可用），所以这里判断吧
+        if (baseTexture.hasLoaded || (baseTexture.source && baseTexture.source.getContext)) {
             if (this.noFrame) {
                 frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height);
                 // if there is no frame we should monitor for any base texture changes..
@@ -488,6 +488,7 @@ function removeAllHandlers(tex) {
     tex.addEventListener = function _emptyOn() { /* empty */ };
     tex.once = function _emptyOnce() { /* empty */ };
     tex.dispatchEvent = function _emptyEmit() { /* empty */ };
+    tex.removeEventListener = function _emptyOff() { /* empty */ };
 }
 
 /**

test/testFilter.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+    <meta name="viewport"
+        content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="full-screen" content="true" />
+    <meta name="screen-orientation" content="portrait" />
+    <meta name="x5-fullscreen" content="true" />
+    <meta name="360-fullscreen" content="true" />
+    <!-- <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> -->
+    <!-- 小程序分享得用这个 -->
+    <!-- <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> -->
+    <!-- 易盾js -->
+    <!-- <script type="text/javascript" src="//cstaticdun.126.net/load.min.js"></script> -->
+    <!-- <script src="libs/zepto.min.js"></script> -->
+    <!-- <script src="libs/p2.js"></script> -->
+    <script src="../build/fyge.min.js"></script>
+    <style>
+        html,
+        body {
+            padding: 0;
+            margin: 0;
+            border: 0;
+
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            position: absolute;
+            background-color: #eeeeee;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="cusEngine" style="line-height:0;font-size:0">
+        <canvas id="canvas" style="width: 100%;height: 100%"></canvas>
+    </div>
+    <!-- 帧率检测 -->
+    <script src="//yun.duiba.com.cn/db_games/libs0924/stats.js"></script>
+</body>
+<script>
+    // window.devicePixelRatio=2
+    window.addEventListener("load", async function () {
+        //获取canvas
+        var canvas = document.getElementById("canvas");
+        // canvas.width = document.body.clientWidth * (window.devicePixelRatio || 1)
+        // canvas.height = document.body.clientHeight * (window.devicePixelRatio || 1)
+        canvas.width = 750;
+        canvas.height = 1624;
+
+        //建舞台
+        var stage = new FYGE.Stage(
+            canvas,
+            750,//设计宽度，按设计搞给的就行
+            1624,//设计高度
+            document.body.clientWidth,
+            document.body.clientHeight,
+            FYGE.RENDERER_TYPE.WEBGL
+        );
+        //鼠标事件
+        var mouseEvent = stage.onMouseEvent.bind(stage);
+        canvas.addEventListener("touchstart", mouseEvent, false);
+        canvas.addEventListener('touchmove', mouseEvent, false);
+        canvas.addEventListener('touchend', mouseEvent, false);
+        //stage初始化
+        stage.addEventListener(FYGE.Event.INIT_STAGE, async () => {
+            //添加个背景
+            var a = stage.addChild(new FYGE.Graphics())
+                .beginFill(0x000000, 0.7)
+                .drawRect(0, 0, 750, 1624)
+                .endFill()
+            var sp = stage.addChild(FYGE.Sprite.fromUrl("https://img.alicdn.com/imgextra/i4/2275046294/O1CN01avEmL01wMhS5Wxd63_!!2275046294-2-miniprogram.png"))
+            sp.position.set(300, 700)
+            sp.width=sp.height=200;
+            sp.addEventListener("onMouseClick",()=>{console.log(111)},this)
+            var ff = new FYGE.ColorMatrixFilter();
+            ff.contrast(2);
+            sp.filters = [
+ff
+            ]
+            setTimeout(()=>{
+                sp.texture=null;
+                console.log(sp.scaleX)
+            },3000)
+           
+            
+            // sp.texture
+// new FYGE.Texture()
+//             sp.texture=FYGE.Texture.fromUrl("https://img.alicdn.com/imgextra/i4/2275046294/O1CN01avEmL01wMhS5Wxd63_!!2275046294-2-miniprogram.png")
+
+//             const src = "//yun.duiba.com.cn/aurora/assets/abe23575ef1f27286df1a6364b8d3968d5f2fc78.png";
+// const sprite = new FYGE.Sprite(FYGE.Texture.fromUrl(src));
+// stage.addChild(sprite);
+
+// sprite.anchorTexture.set(0.5, 0.5);
+// sprite.position.set(375, 375);
+
+// const colorMatrix = [
+//             0.3, 0.3, 0.3, 0, 0,
+//             0.3, 0.3, 0.3, 0, 0,
+//             0.3, 0.3, 0.3, 0, 0,
+//             0, 0, 0, 1, 0
+//         ];
+//         const colorFilter = new FYGE.ColorMatrixFilter(colorMatrix);
+//         sprite.filters = [colorFilter];
+        }, this)
+
+        //循环
+        loop();
+        function loop() {
+            if (!window.paused) {
+                stage.flush();
+            }
+            FYGE.Tween.flush()
+
+            requestAnimationFrame(loop);
+        }
+    })
+</script>
+
+</html>
\ No newline at end of file