feat: add displayobject initScale

Author: drawcall

examples/source/js/text/text.js

@@ -19,15 +19,15 @@ text.x = 250;
 text.y = 200;
 app.stage.addChild(text);
 
-var text = new InkPaint.Text("你好周杰伦! 哈哈");
-text.updateStyle({
+var text1 = new InkPaint.Text("你好周杰伦! 哈哈");
+text1.updateStyle({
     fill: "#ffffff",
     backgroundColor: "#00eeee",
     padding: 10
 });
-text.x = 450;
-text.y = 300;
-app.stage.addChild(text);
+text1.x = 450;
+text1.y = 300;
+app.stage.addChild(text1);
 
 var bunny = InkPaint.Sprite.fromImage("source/assets/eggHead.png");
 bunny.x = 500;
@@ -60,8 +60,13 @@ richText.y = 350;
 
 app.stage.addChild(richText);
 
+var length = 10;
 var ticker = new InkPaint.Ticker();
 ticker.start();
 ticker.add(function() {
     app.render();
+
+    length -= 0.1;
+    if (length <= -5) length = 10;
+    text1.text = "你好周杰伦! 哈哈".substr(0, Math.max(0, length) >> 0);
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "inkpaint",
-  "version": "2.2.5",
+  "version": "2.3.1",
   "description": "InkPaint is a lightweight node.js canvas graphics animation library.",
   "main": "./lib/index.js",
   "license": "MIT",

src/display/DisplayObject.js

@@ -1,13 +1,13 @@
 import EventEmitter from "eventemitter3";
 import { TRANSFORM_MODE } from "../const";
+import Bounds from "./Bounds";
 import settings from "../settings";
 import Transform from "./Transform";
-import Bounds from "./Bounds";
-import { Rectangle } from "../math";
 import { uuidvx } from "../utils";
+import { Rectangle, Point } from "../math";
+import TransformStatic from "./TransformStatic";
 import FXAAFilter from "../filters/fxaa/FXAAFilter";
 import BlurFilter from "../filters/blur/BlurFilter";
-import TransformStatic from "./TransformStatic";
 
 export default class DisplayObject extends EventEmitter {
   constructor() {
@@ -26,6 +26,7 @@ export default class DisplayObject extends EventEmitter {
     this.parent = null;
     this.worldAlpha = 1;
     this.filterArea = null;
+    this.initScale = new Point(1, 1);
 
     this.filters = null;
     this._enabledFilters = null;
@@ -422,6 +423,7 @@ export default class DisplayObject extends EventEmitter {
     this.fxaa = false;
     this.filters = null;
     this.transform = null;
+    this.initScale = null;
     this.parent = null;
     this._bounds = null;
     this._currentBounds = null;

src/text/Text.js

@@ -181,9 +181,14 @@ export default class Text extends Sprite {
     const background = style.background || style.backgroundColor;
     if (!background) return;
 
-    const context = this.context;
-    context.fillStyle = background;
-    context.fillRect(0, 0, this.canvas.width, this.canvas.height);
+    const { context, canvas, text } = this;
+    const ftext = String(text).trim();
+    if (ftext) {
+      context.fillStyle = background;
+      context.fillRect(0, 0, canvas.width, canvas.height);
+    } else {
+      context.clearRect(0, 0, canvas.width, canvas.height);
+    }
   }
 
   drawLetterSpacing(text, x, y, isStroke = false) {
@@ -280,9 +285,7 @@ export default class Text extends Sprite {
 
     // call sprite onTextureUpdate to update scale if _width or _height were set
     this._onTextureUpdate();
-
     baseTexture.emit("update", baseTexture);
-
     this.dirty = false;
   }
 
@@ -414,13 +417,11 @@ export default class Text extends Sprite {
 
   get width() {
     this.updateText(true);
-
     return Math.abs(this.scale.x) * this._texture.orig.width;
   }
 
   set width(value) {
     this.updateText(true);
-
     const s = sign(this.scale.x) || 1;
     this.scale.x = (s * value) / this._texture.orig.width;
     this._width = value;
@@ -468,9 +469,7 @@ export default class Text extends Sprite {
       text === "" || text === null || text === undefined ? " " : text
     );
 
-    if (this._text === text) {
-      return;
-    }
+    if (this._text === text) return;
     this._text = text;
     this.dirty = true;
   }