诸多修改

.npmignore

@@ -9,4 +9,5 @@ webpack.config.js
 .idea
 /debug
 /dist
-rollup.config.js
+rollup.config.js
\ No newline at end of file
+record.txt
\ No newline at end of file

package.json

 {
     "name": "fyge-tbmini",
-    "version": "1.1.7",
+    "version": "1.2.5",
     "description": "淘宝小程序canvas渲染引擎",
     "main": "./build/fyge.min.js",
     "types": "./build/FYGE.d.ts",

record.txt

+1.1.7   修改的文本y偏移4
+1.1.8   版本，去掉fillText和strokeText的maxW
+1.1.9   新加shape,待测试,hitTestByPixel有问题得为false先
+
+1.2.0   sprite修改，置空纹理时执行updateLocalBoundsSelf
+        movieClip修改，alpha小于0.05不置visible为false，置alpha为0
+        matrix修改，添加decompose方法
+        const里的backupCanvas 赋值createCanvas()  
+
+1.2.1   bitmapText的单位图字文本一致但贴图不一致，不会修改，去掉_text判断
+
+1.2.2   backupCanvas导出修改
+
+1.2.3   Rectangle.createFromRects修改，忽略宽高都为0的矩形；（待测试）
+        sprite赋值texture时如果存在原贴图，且还没加载好，移除监听_onTextureUpdate；（待测试）
+        sprite获取texture时如果是空纹理，返回null；（待测试）
+        shape的_instanceType从ShapeNode改为Shape
+
+1.2.4   button加上方法changeTexture，三个纹理属性都变成private  （代码已改，还未build）
+        loader的loadImage里的url需要encodeURI一边，为了中文
+        shape在updateShaper的s.texture.update();后添加_onTextureUpdate
+        修改backupCanvas为getBackupCanvasCtx，返回上下文，（待测试）
+
+1.2.5   shape的点击事件，清除颜色前要先setTransform(1,0,0,1,0,0);
+
+
+//TODO
+Texture里的removeAllHandlers是否考虑加上tex.removeEventListener = function _emptyOn() { /* empty */ };
+bitmapText 考虑添加垂直居中方法（还没写）,简单起见，没标记过dirty，所以有需要先设置对齐，再设置text
+graphics的canvas模式渲染，会把子级的也缓存，现在做法，尽量不在矢量图添加子级
\ No newline at end of file

src/2d/display/Sprite.ts

@@ -461,13 +461,18 @@ export default class Sprite extends Container {
      * @member {Texture}
      */
     get texture() {
-        return this._texture;
+        return this._texture === Texture.EMPTY ? null : this._texture;//考虑是否返回null
     }
 
     set texture(value) {
         if (this._texture === value) {
             return;
         }
+        //如果存在原贴图，且还没加载好，移除监听_onTextureUpdate；
+        if (this._texture != Texture.EMPTY &&
+            this._texture != null &&
+            !this._texture.baseTexture.hasLoaded) this._texture.removeEventListener('update', this._onTextureUpdate, this);
+        //赋值
         this._texture = value || Texture.EMPTY;
 
         this._textureID = -1;
@@ -479,8 +484,11 @@ export default class Sprite extends Container {
                 this._onTextureUpdate();
             }
             else {
-                value.once('update', this._onTextureUpdate, this);
+                value.once('update', this._onTextureUpdate, this);//只会监听一次
             }
+        } else {
+            //624修改。如果置空纹理，_localBoundsSelf置空
+            this.updateLocalBoundsSelf();
         }
     }
 

src/2d/events/Event.ts

@@ -257,5 +257,6 @@ export class Event extends HashObject {
         s.target = target;
         s._pd = false;
         s.type = type;
+        s.data = null;//最好加上，不然可能带上原来的数据
     }
 }

src/2d/graphics/index.ts

 
 
 export { default as Graphics } from "./Graphics";
-// export * from "./GraphicsData";//暂时不导。外部用不到暂时
+// export * from "./GraphicsData";//暂时不导。外部用不到暂时
\ No newline at end of file
+
+export * from "./Shape";

src/2d/loader/Loader.ts

@@ -112,6 +112,8 @@ export class Loader extends EventDispatcher {
         img.onerror = function () {
             callback(false);
         }
+        //坑爹中文
+        url = encodeURI(url)
         if (url.indexOf('data:') !== 0) img.crossOrigin = "anonymous";
         img.src = url;
     }

src/2d/math/Matrix.ts

 
 import { Point } from "././Point";
 import { HashObject } from "../HashObject";
-import { DEG_TO_RAD, cos, sin, RAD_TO_DEG } from "../const";
+import { DEG_TO_RAD, cos, sin, RAD_TO_DEG, PI_2 } from "../const";
+import Transform from "./Transform";
 
 /**
  * 2维矩阵
@@ -457,7 +458,45 @@ export class Matrix extends HashObject {
 
         return array;
     }
+    /**
+     * 从矩阵数据转成tansform的数据
+     * @param transform 
+     */
+    decompose(transform: Transform) {
+        const a = this.a;
+        const b = this.b;
+        const c = this.c;
+        const d = this.d;
+        //取斜切
+        const skewX = -Math.atan2(-c, d);
+        const skewY = Math.atan2(b, a);
+
+        const delta = Math.abs(skewX + skewY);
+        //斜切值和旋转不唯一，所以设定条件只取其一
+        if (delta < 0.00001 || Math.abs(PI_2 - delta) < 0.00001) {
+            transform.rotation = skewY;
+            //考虑是否必要
+            if (a < 0 && d >= 0) {
+                transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI;
+            }
+            transform.skew.x = transform.skew.y = 0;
+        }
+        else {
+            transform.rotation = 0;
+            transform.skew.x = skewX;
+            transform.skew.y = skewY;
+        }
+
+        //取缩放
+        transform.scale.x = Math.sqrt((a * a) + (b * b));
+        transform.scale.y = Math.sqrt((c * c) + (d * d));
 
+        //取位置
+        transform.position.x = this.tx;
+        transform.position.y = this.ty;
+
+        return transform;
+    }
     /**
      * A default (identity) matrix
      *

src/2d/math/Rectangle.ts

@@ -184,6 +184,8 @@ export class Rectangle extends HashObject {
             let rect = arg[0];
             let x = rect.x, y = rect.y, w = rect.width, h = rect.height, wx1: number, wx2: number, hy1: number, hy2: number;
             for (let i: number = 1; i < arg.length; i++) {
+                //如果宽高为空，后续考虑是否xy需要占位;
+                if (!arg[i].width && !arg[i].height) continue;
                 wx1 = x + w;
                 hy1 = y + h;
                 wx2 = arg[i].x + arg[i].width;

src/2d/text/BitmapText.ts

 
 
-import { TEXT_ALIGN } from "../const";
+import { TEXT_ALIGN, VERTICAL_ALIGN } from "../const";
 import Texture from "../texture/Texture";
 import { Sprite, Container } from "../display";
 
@@ -19,6 +19,10 @@ export class BitmapText extends Container {
      * 对齐方式
      */
     textAlign: TEXT_ALIGN = TEXT_ALIGN.CENTER;
+    /**
+     * 垂直居中方式，暂时还没写,
+     */
+    verticalAlign: VERTICAL_ALIGN = VERTICAL_ALIGN.MIDDLE;
     /**
      * 文本
      */
@@ -95,6 +99,7 @@ export class BitmapText extends Container {
             this.children[i].x = left + temSum
             temSum += this.children[i].width;
         }
+        //垂直居中，暂时还没写
     }
 }
 
@@ -117,7 +122,7 @@ class BitmapTextSingle extends Sprite {
         return this._text
     }
     set text(value: string) {
-        if (value == this._text) return;
+        // if (value == this._text) return;
         this._text = value;
         this.texture = this.textures[this._text];
     }

src/2d/text/TextField.ts

@@ -614,9 +614,9 @@ export class TextField extends Sprite {
             if (s.stroke) {
                 ctx.strokeStyle = s.strokeColor;
                 ctx.lineWidth = s.stroke * 2;
-                ctx.strokeText(realLines[i], ox, upY + i * lineH, maxW);
+                ctx.strokeText(realLines[i], ox, upY + i * lineH/*, maxW*/);
             }
-            ctx.fillText(realLines[i], ox, upY + i * lineH, maxW);
+            ctx.fillText(realLines[i], ox, upY + i * lineH/*, maxW*/);//考虑去掉这个maxW
         }
         //offset用_anchorTexture代替
         s.offsetX = -padding;

src/2d/ui/Button.ts

@@ -6,9 +6,9 @@ import Texture from "../texture/Texture";
 import Tween from "../../tween/Tween";
 
 export class Button extends Sprite {
-    textureUp;
-    textureDown;
-    textureDisable;
+    private textureUp: Texture;
+    private textureDown: Texture;
+    private textureDisable: Texture;
     constructor(tUp: Texture, tDown?: Texture, tDisable?: Texture) {
         super(tUp);
         this._instanceType = "Button";
@@ -22,6 +22,25 @@ export class Button extends Sprite {
         this.anchorY = this.textureUp.height / 2;
         this.initButton();
     }
+    /**
+     * 修改纹理
+     * @param tUp 
+     * @param tDown 
+     * @param tDisable 
+     */
+    changeTexture(tUp: Texture, tDown?: Texture, tDisable?: Texture) {
+        this.textureUp = tUp;
+        this.textureDown = tDown === tUp ? null : tDown;
+        this.textureDisable = tDisable || tUp;
+        this.anchorX = this.textureUp.width / 2;
+        this.anchorY = this.textureUp.height / 2;
+        //如果是点击状态时且有down
+        if (this._clicked && this.textureDown) {
+            this.texture = this.textureDown;
+        } else {
+            this.texture = this.textureUp;
+        }
+    }
 
     /**
      * @method  _mouseEvent

src/2d/ui/MovieClip.ts

@@ -244,7 +244,8 @@ export class MovieClip extends Container {
                 this.addChild(child);
                 //透明度处理
                 if (ele.frames[0].alpha < 0.05) {
-                    child.visible = false;
+                    // child.visible = false;
+                    child.alpha = 0;
                 } else {
                     child.alpha = ele.frames[0].alpha;
                 }
@@ -602,9 +603,10 @@ export class MovieClip extends Container {
                     var frame = child["frames"][s._curFrame - 1];
                     //layout不晓得干嘛用，暂不管
                     if (frame.alpha < 0.05) {
-                        child.visible = false;
+                        // child.visible = false;
+                        child.alpha = 0;
                     } else {
-                        child.visible = true;
+                        // child.visible = true;
                         child.alpha = frame.alpha;
                         //先判断transform是否相等
                         if (!Matrix.isEqual(child.transform.localMatrix, frame.transform)) {

src/2d/utils/index.ts

@@ -30,13 +30,23 @@ export function uid(): number {
     return ++nextUid;
 }
 
+let backupCanvasCtx: CanvasRenderingContext2D
 /**
  * 各种使用需要的canvas
  * 比如取canvas上下文创建对象，渐变色等
  * 像素碰撞检测时
  * 淘宝小程序内不要用任何相关的先
  */
-export const backupCanvas: HTMLCanvasElement = null //= document.createElement("canvas")
+// export const backupCanvas: HTMLCanvasElement = createCanvas() //= document.createElement("canvas")
+export function getBackupCanvasCtx() {
+    if (!backupCanvasCtx) {
+        var canvas = createCanvas();
+        canvas.width = 1;
+        canvas.height = 1;
+        backupCanvasCtx = canvas.getContext("2d");
+    }
+    return backupCanvasCtx
+}
 /**
  * 创建渐变色
  * @param points 
@@ -44,7 +54,7 @@ export const backupCanvas: HTMLCanvasElement = null //= document.createElement("
  */
 export function getGradientColor(points: any, colors: any): any {
     let colorObj: any;
-    let ctx = backupCanvas.getContext("2d");
+    let ctx = getBackupCanvasCtx()//backupCanvas.getContext("2d");
     if (points.length == 4) {
         colorObj = ctx.createLinearGradient(points[0], points[1], points[2], points[3]);
     } else {
@@ -60,7 +70,7 @@ export function getGradientColor(points: any, colors: any): any {
  * @param image 
  */
 export function getCanvasBitmapStyle(image: any): any {
-    let ctx = backupCanvas.getContext("2d");
+    let ctx = getBackupCanvasCtx()//backupCanvas.getContext("2d");
     return ctx.createPattern(image, "repeat");
 }
 /**