l

.gitignore

@@ -5,3 +5,4 @@ debug
 .vscode
 dist
 test
+docs
\ No newline at end of file

.npmignore

@@ -13,4 +13,5 @@ webpack.config.js
 rollup.config.js
 record.txt
 test
-examples
+examples
\ No newline at end of file
+docs
\ No newline at end of file

build/FYGE.d.ts

-declare namespace FYGE{export  const VERSION = "2.0.15";
+declare namespace FYGE{export  const VERSION = "2.0.16";
 
 export  const osType: "ios" | "android" | "pc";
 
@@ -4149,6 +4149,11 @@ export  class CanvasRenderer extends SystemRenderer {
     destroyPlugins(): void;
 }
 
+export  function toDisplayDataURL(obj: DisplayObject, rect?: Rectangle, typeInfo?: {
+    type: "png" | "jpeg";
+    quality?: number;
+}
+
 export  function canUseNewCanvasBlendModes(): boolean;
 
 export  function getTintedTexture(texture: Texture, color: number): HTMLCanvasElement;
@@ -6696,7 +6701,9 @@ export  class EditableText extends TextField {
      * 获取输入框内容
      */
     get inputValue(): string;
+    set inputValue(v: string);
     constructor();
+    private initElement;
 }
 
 export  class BitmapText extends Container {

examples/2d.html

@@ -71,7 +71,7 @@
             1624,//设计高度
             sysInfo && sysInfo.windowWidth || document.body.clientWidth,
             sysInfo && sysInfo.windowHeight || document.body.clientHeight,
-            FYGE.RENDERER_TYPE.WEBGL,
+            FYGE.RENDERER_TYPE.CANVAS,
         );
         //监听窗口缩放,按需,一般移动端的不需要
         window.addEventListener('resize', () => { stage.resize() });
@@ -90,7 +90,7 @@
             //添加个背景矢量图
             stage.addChild(new FYGE.Graphics())
                 .beginFill(0x000000, 0.7)
-                .drawRect(0, 0, 750, 1624)
+                .drawRect(100, 100, 750, 1624)
                 .endFill()
 
             //单图纹理
@@ -247,6 +247,8 @@
             s.lineTo(200, 10);
             s.lineTo(10, 10);
             s.endStroke()
+
+        //  console.log(   FYGE.toDisplayDataURL(stage,null,{type: "jpeg"}))
         }, this);
 
         //循环

package.json

 {
     "name": "fyge",
-    "version": "2.0.15",
+    "version": "2.0.16",
     "description": "canvas渲染引擎",
     "main": "./build/fyge.min.js",
     "types": "./build/FYGE.d.ts",
-    "dependencies": {},
+    "dependencies": {
+        "typedoc": "^0.20.20"
+    },
     "scripts": {
         "declare": "node scripts/declare.js src/index.ts",
         "build": "webpack",
         "test": "echo \"Error: no test specified\" && exit 1",
         "dev": "webpack -w",
         "dev1": "rollup -c -m -w",
-        "watch": "webpack --watch"
+        "watch": "webpack --watch",
+        "typedoc":"typedoc src/index.ts"
     },
     "author": "MrKwon",
     "license": "ISC",
@@ -27,7 +30,8 @@
         "rollup-plugin-typescript": "^1.0.1",
         "rollup-plugin-typescript2": "^0.25.2",
         "rollup-plugin-uglify": "^6.0.3",
-        "typescript": "^3.5.1"
+        "typescript": "^3.5.1",
+        "typedoc": "^0.20.20"
     },
     "keywords": [
         "h5，淘宝小程序，canvas，webgl，3d，gltf，spine"

record.txt

@@ -230,6 +230,11 @@
         Lottie新增几处断言，mark引号，layerData引号
         MovieClip的setImage加了断言
         Spine加了_instanceType，sortBone加了断言
+
+2.0.16  Graphics的_renderCanvas方法的this.transform._parentID = -1，保证世界矩阵重新计算
+        CanvasMaskManager的pushMask方法添加finishPoly执行条件
+        EditableText大改，待测试
+        toDisplayDataURL的传参typeInfo加入type限制png|jpeg
         
 
 现在不改，索引数据过大时得用Uint32Array，同时开扩展gl.getExtension( "OES_element_index_uint" )和drawElements改参数类型为gl.UNSIGNED_INT

src/2d/const.ts

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

src/2d/graphics/Graphics.ts

@@ -1131,7 +1131,11 @@ export default class Graphics extends Container {
                 this.alpha = tempAlpha;
                 this.cacheAsBitmap = true;
                 this.children = tempChildren;//待测试，还原原先子级
-                if (this.parent) this.updateTransform();
+                if (this.parent) {
+                    //generateCanvasTexture里用canvasRenderer渲染会修改世界矩阵，保证自己能根据父级矩阵更新回来
+                    this.transform._parentID = -1;
+                    this.updateTransform();
+                }
             }
             //普通画图的渲染，提供图片和图形的插件，先判断_anchorTexture，offsetX,0
             renderer.plugins.sprite.render(this);

src/2d/renderers/managers/CanvasMaskManager.ts

@@ -40,7 +40,7 @@ export default class CanvasMaskManager extends HashObject {
         //兼容下canvas下也能用Shape作为遮罩
         if (maskData.instanceType == "Shape") {
             maskData["_drawShape"](renderer.context)
-        } else {
+        } else if (maskData.instanceType == "Graphics") {//还有那种sprite的。。。暂时这么判断，canvas下的sprite无效
             //以防万一，没有end，加一段，不考虑闭合情况
             maskData["finishPoly"]()
             this.renderGraphicsShape(maskData);

src/2d/text/EditableText.ts

@@ -67,10 +67,15 @@ export class EditableText extends TextField {
     get inputValue(): string {
         return this.htmlElement && this.htmlElement.value || (this.text != this._prompt ? this.text : "")
     }
-
+    set inputValue(v: string) {
+        if (this.htmlElement) this.htmlElement.value = v;
+        this.text = v;
+        this.fillColor = this.textColor;
+    }
 
     public constructor() {
         super();
+        this._instanceType = "EditableText";
         var s: EditableText = this;
         var remove = function () {
             //失去焦点
@@ -89,42 +94,7 @@ export class EditableText extends TextField {
         };
 
         this.addEventListener(MouseEvent.CLICK, function (e: Event) {
-            if (!s.htmlElement) {
-                s.htmlElement = document.createElement("input");
-                s.htmlElement.type = "input";
-
-                s.htmlElement.style.position = "absolute";
-                s.htmlElement.style.display = "none";
-                s.htmlElement.style.transformOrigin = s.htmlElement.style.WebkitTransformOrigin = "0 0 0";
-
-                s.htmlElement.style.outline = "none";
-                s.htmlElement.style.borderWidth = "thin";
-                s.htmlElement.style.borderColor = "#000";
-                //默认文案
-                s.htmlElement.placeholder = "";
-
-                /////////////////////设置边框//////////////
-                s.htmlElement.style.borderStyle = "none";
-                s.htmlElement.style.backgroundColor = "transparent";
-                // s.htmlElement.style.borderStyle = "inset";
-                // s.htmlElement.style.backgroundColor = "#fff";
-
-                //color:blue; text-align:center"
-                // if (this.inputType == 2) {
-                //     this.htmlElement.style.lineHeight = lineSpacing + "px";
-                // }
-                // s.stage.rootDiv.insertBefore(s.htmlElement, s.stage.rootDiv.childNodes[0]);
-                //TODO到时需要修改，记录下,stage加上canvas索引，
-                // var divParent = s.stage.canvas.parentNode;
-                // divParent.insertBefore(s.htmlElement, divParent.childNodes[0])
-                document.body.appendChild(s.htmlElement)
-                //添加
-                s.htmlElement.onblur = function () {
-                    if (osType == "ios") {
-                        window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
-                    }
-                };
-            }
+            s.initElement()
             //font包括字体和大小
             s.htmlElement.style.font = s.size + "px " + this.font;
             s.htmlElement.style.color = s.textColor;
@@ -135,6 +105,8 @@ export class EditableText extends TextField {
             //     }
             s.htmlElement.style.height = s.textHeight + "px";
             s.htmlElement.style.width = s.textWidth + "px";
+            //如果文案不是默认的
+            if (s.text !== s.prompt) s.htmlElement.value = s.text;//这样判断还是可能有问题，TODO
             s.text = "";
             s.htmlElement.style.display = "block";
             s.htmlElement.focus();
@@ -149,5 +121,46 @@ export class EditableText extends TextField {
         });
 
     }
+    private initElement() {
+        let s: EditableText = this;
+        if (s.htmlElement) return;
+        s.htmlElement = document.createElement("input");
+        let htmlElement: HTMLInputElement = s.htmlElement, style = htmlElement.style;
+        htmlElement.type = "input";
+        style.position = "absolute";
+        style.display = "none";
+        //@ts-ignore
+        style.transformOrigin = style.WebkitTransformOrigin = style.webkitTransformOrigin = "0 0 0";
 
+        style.outline = "none";
+        style.borderWidth = "thin";
+        style.borderColor = "#000";
+        //默认文案
+        htmlElement.placeholder = "";
+
+        /////////////////////设置边框//////////////
+        style.borderStyle = "none";
+        style.backgroundColor = "transparent";
+        // s.htmlElement.style.borderStyle = "inset";
+        // s.htmlElement.style.backgroundColor = "#fff";
+
+        //color:blue; text-align:center"
+        // if (this.inputType == 2) {
+        //     this.htmlElement.style.lineHeight = lineSpacing + "px";
+        // }
+        // s.stage.rootDiv.insertBefore(s.htmlElement, s.stage.rootDiv.childNodes[0]);
+        //TODO到时需要修改，记录下,stage加上canvas索引，
+        var divParent = s.stage["canvas"].parentNode;
+        if (divParent) {
+            divParent.insertBefore(htmlElement, divParent.childNodes[0])
+        } else {
+            document.body.appendChild(htmlElement)
+        }
+        //添加
+        htmlElement.onblur = function () {
+            if (osType == "ios") {
+                window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+            }
+        };
+    }
 }

src/2d/utils/toDisplayDataURL.ts

@@ -17,7 +17,7 @@ let tempMatrix = new Matrix()
  * @param {DisplayObject} obj 显示对象
  * @param {Rectangle} rect 需要裁切的区域，默认不裁切
  * @param {Object} typeInfo {type:"png"}  或者 {type:"jpeg",quality:100}  png格式不需要设置quality，jpeg 格式需要设置quality的值 从1-100
- * @param {number} bgColor 十六进制颜色值如 0xffffff 默认值为空的情况下，jpeg格式的话就是黑色底，png格式的话就是透明底,
+ * @param {number} bgColor 十六进制颜色值如 0xffffff 默认值为空的情况下，jpeg格式的话就是黑色底，png格式的话就是透明底,暂时无效
  * @return {string} base64格式数据
  * @example
  *      toDisplayDataURL(DisplayObj, {
@@ -32,7 +32,12 @@ let tempMatrix = new Matrix()
  *
  * Tip:在一些需要上传图片，编辑图片，需要提交图片数据，分享作品又或者长按保存作品的项目，运用toDisplayDataURL方法把显示对象base64就是最好不过的选择了。
  */
-export default function toDisplayDataURL(obj: DisplayObject, rect: Rectangle = null, typeInfo: any = null, bgColor: number = 0x000000): string {
+export default function toDisplayDataURL(
+    obj: DisplayObject,
+    rect: Rectangle = null,
+    typeInfo: { type: "png" | "jpeg", quality?: number } = null,
+    bgColor: number = 0x000000
+): string {
     var bounds = obj.getLocalBounds();
     let w: number = rect ? rect.width : bounds.width;
     let h: number = rect ? rect.height : bounds.height;