优化材质性能

package.json

@@ -2,7 +2,7 @@
 	"name": "scilla",
 	"version": "1.0.2",
 	"main": "./dist/index.es.js",
-	"browser": "./dist/index.js",
+	"browser": "./dist/index.es.js",
 	"types": "./dist/index.d.ts",
 	"license": "MIT",
 	"devDependencies": {

src/core/Texture.ts

@@ -6,20 +6,26 @@ import Bounds from "../support/Bounds";
 import HashObject from "../core/HashObject";
 import {createCanvas} from "./context/RenderContext";
 import {Frame} from "../ReType";
+import {dirtyFieldDetector} from "../tools/decorators";
 
 /**
  * 纹理类
  */
 export default class Texture extends HashObject {
+	@dirtyFieldDetector
 	img: any;
-	bounds: Bounds;
 
-	_cacheCanvas;
+	private _bounds: Bounds;
+	private _cacheCanvas;
+	private _cacheContext;
 
 	constructor() {
 		super();
 
-		this.bounds = new Bounds();
+		this['isDirty'] = true;
+		this._bounds = new Bounds(0, 0, 0, 0, () => {
+			this['isDirty'] = true;
+		});
 	}
 
 	/**
@@ -28,7 +34,7 @@ export default class Texture extends HashObject {
 	 */
 	setFrame(frame: Frame) {
 		let {x, y, w, h} = frame;
-		this.bounds.setTo(x, y, w, h);
+		this._bounds.setTo(x, y, w, h);
 	}
 
 	/**
@@ -43,31 +49,49 @@ export default class Texture extends HashObject {
 	 * 获取纹理宽度
 	 */
 	get width() {
-		return this.bounds.width;
+		return this._bounds.width;
 	}
 
 	/**
 	 * 获取纹理高度
 	 */
 	get height() {
-		return this.bounds.height;
+		return this._bounds.height;
+	}
+
+	/**
+	 * 获取边界
+	 */
+	get bounds(): Bounds {
+		return this._bounds;
 	}
 
 	/**
 	 * 产生一个缓存画布
 	 */
 	getCacheCanvas() {
-		const {width, height} = this.bounds;
-
 		let canvas = this._cacheCanvas;
-		if (!canvas) {
-			canvas = this._cacheCanvas = createCanvas();
-		}
-		canvas.stageWidth = width;
-		canvas.stageHeight = height;
 
-		const context = canvas.getContext('2d');
-		this.drawToCanvas(context);
+		if (this['isDirty']) {
+			this['isDirty'] = false;
+
+			const {_bounds: {width, height}} = this;
+
+			if (!canvas) {
+				canvas = this._cacheCanvas = createCanvas();
+			}
+
+			let context = this._cacheContext;
+			if (!context) {
+				context = canvas.getContext('2d');
+			}
+
+			canvas.width = width;
+			canvas.height = height;
+			this.drawToCanvas(context);
+
+			this.drawToCanvas(context);
+		}
 
 		return canvas;
 	}
@@ -83,7 +107,8 @@ export default class Texture extends HashObject {
 	 * @param dh
 	 */
 	drawToCanvas(context, dx = 0, dy = 0, sx?, sy?, dw?, dh?) {
-		const {x, y, width, height} = this.bounds;
+		const {_bounds: {x, y, width, height}} = this;
+
 		context.drawImage(this.img, sx || x, sy || y, width, height, dx, dy, dw || width, dh || height);
 	}
 
@@ -92,7 +117,7 @@ export default class Texture extends HashObject {
 	 */
 	destroy() {
 		this.img = null;
-		this.bounds = null;
+		this._bounds = null;
 
 		this.destroyCacheCanvas();
 	}

src/support/Bounds.ts

@@ -3,20 +3,34 @@
  *
  */
 
+import {dirtyFieldTrigger} from "../tools/decorators";
+
 /**
  * 边界类
  */
 export default class Bounds {
+	@dirtyFieldTrigger
 	x: number;
+	@dirtyFieldTrigger
 	y: number;
+	@dirtyFieldTrigger
 	width: number;
+	@dirtyFieldTrigger
 	height: number;
+
+	_onChange: Function;
 	
-	constructor(x: number = 0, y: number = 0, width: number = 0, height: number = 0) {
+	constructor(x: number = 0, y: number = 0, width: number = 0, height: number = 0, onChange?) {
 		this.x = x;
 		this.y = y;
 		this.width = width;
 		this.height = height;
+
+		this._onChange = onChange;
+	}
+
+	onModify(value, key, oldValue){
+		this._onChange && this._onChange(value, key, oldValue);
 	}
 
 	get left(): number {

src/support/Vector2D.ts

@@ -313,6 +313,10 @@ export default class Vector2D extends HashObject {
 		return {x: this.x, y: this.y}
 	}
 
+	toArray() {
+		return [this.x, this.y];
+	}
+
 	static corner(v1, v2) {
 		return Math.acos(v1.dotProd(v2) / (v1.length * v2.length));
 	}