667 lines
		
	
	
		
			17 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
			
		
		
	
	
			667 lines
		
	
	
		
			17 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
import FillStylePattern from './FillStylePattern';
 | 
						|
import FillStyleLinearGradient from './FillStyleLinearGradient';
 | 
						|
import FillStyleRadialGradient from './FillStyleRadialGradient';
 | 
						|
import GImage from '../env/image.js';
 | 
						|
import {
 | 
						|
	ArrayBufferToBase64,
 | 
						|
	Base64ToUint8ClampedArray
 | 
						|
} from '../env/tool.js';
 | 
						|
 | 
						|
export default class CanvasRenderingContext2D {
 | 
						|
 | 
						|
	_drawCommands = '';
 | 
						|
 | 
						|
	_globalAlpha = 1.0;
 | 
						|
 | 
						|
	_fillStyle = 'rgb(0,0,0)';
 | 
						|
	_strokeStyle = 'rgb(0,0,0)';
 | 
						|
 | 
						|
	_lineWidth = 1;
 | 
						|
	_lineCap = 'butt';
 | 
						|
	_lineJoin = 'miter';
 | 
						|
 | 
						|
	_miterLimit = 10;
 | 
						|
 | 
						|
	_globalCompositeOperation = 'source-over';
 | 
						|
 | 
						|
	_textAlign = 'start';
 | 
						|
	_textBaseline = 'alphabetic';
 | 
						|
 | 
						|
	_font = '10px sans-serif';
 | 
						|
 | 
						|
	_savedGlobalAlpha = [];
 | 
						|
 | 
						|
	timer = null;
 | 
						|
	componentId = null;
 | 
						|
 | 
						|
	_notCommitDrawImageCache = [];
 | 
						|
	_needRedrawImageCache = [];
 | 
						|
	_redrawCommands = '';
 | 
						|
	_autoSaveContext = true;
 | 
						|
	// _imageMap = new GHashMap();
 | 
						|
	// _textureMap = new GHashMap();
 | 
						|
 | 
						|
	constructor() {
 | 
						|
		this.className = 'CanvasRenderingContext2D';
 | 
						|
		//this.save()
 | 
						|
	}
 | 
						|
 | 
						|
	setFillStyle(value) {
 | 
						|
		this.fillStyle = value;
 | 
						|
	}
 | 
						|
 | 
						|
	set fillStyle(value) {
 | 
						|
		this._fillStyle = value;
 | 
						|
 | 
						|
		if (typeof(value) == 'string') {
 | 
						|
			this._drawCommands = this._drawCommands.concat("F" + value + ";");
 | 
						|
		} else if (value instanceof FillStylePattern) {
 | 
						|
			const image = value._img;
 | 
						|
			if (!image.complete) {
 | 
						|
				image.onload = () => {
 | 
						|
					var index = this._needRedrawImageCache.indexOf(image);
 | 
						|
					if (index > -1) {
 | 
						|
						this._needRedrawImageCache.splice(index, 1);
 | 
						|
						CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
 | 
						|
						this._redrawflush(true);
 | 
						|
					}
 | 
						|
				}
 | 
						|
				this._notCommitDrawImageCache.push(image);
 | 
						|
			} else {
 | 
						|
				CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
 | 
						|
			}
 | 
						|
 | 
						|
			//CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
 | 
						|
			this._drawCommands = this._drawCommands.concat("G" + image._id + "," + value._style + ";");
 | 
						|
		} else if (value instanceof FillStyleLinearGradient) {
 | 
						|
			var command = "D" + value._start_pos._x.toFixed(2) + "," + value._start_pos._y.toFixed(2) + "," +
 | 
						|
				value._end_pos._x.toFixed(2) + "," + value._end_pos._y.toFixed(2) + "," +
 | 
						|
				value._stop_count;
 | 
						|
			for (var i = 0; i < value._stop_count; ++i) {
 | 
						|
				command += ("," + value._stops[i]._pos + "," + value._stops[i]._color);
 | 
						|
			}
 | 
						|
			this._drawCommands = this._drawCommands.concat(command + ";");
 | 
						|
		} else if (value instanceof FillStyleRadialGradient) {
 | 
						|
			var command = "H" + value._start_pos._x.toFixed(2) + "," + value._start_pos._y.toFixed(2) + "," + value._start_pos._r
 | 
						|
				.toFixed(2) + "," +
 | 
						|
				value._end_pos._x.toFixed(2) + "," + value._end_pos._y.toFixed(2) + "," + value._end_pos._r.toFixed(2) + "," +
 | 
						|
				value._stop_count;
 | 
						|
			for (var i = 0; i < value._stop_count; ++i) {
 | 
						|
				command += ("," + value._stops[i]._pos + "," + value._stops[i]._color);
 | 
						|
			}
 | 
						|
			this._drawCommands = this._drawCommands.concat(command + ";");
 | 
						|
		}
 | 
						|
	}
 | 
						|
 | 
						|
	get fillStyle() {
 | 
						|
		return this._fillStyle;
 | 
						|
	}
 | 
						|
 | 
						|
	get globalAlpha() {
 | 
						|
		return this._globalAlpha;
 | 
						|
	}
 | 
						|
 | 
						|
	setGlobalAlpha(value) {
 | 
						|
		this.globalAlpha = value;
 | 
						|
	}
 | 
						|
 | 
						|
	set globalAlpha(value) {
 | 
						|
		this._globalAlpha = value;
 | 
						|
		this._drawCommands = this._drawCommands.concat("a" + value.toFixed(2) + ";");
 | 
						|
	}
 | 
						|
 | 
						|
 | 
						|
	get strokeStyle() {
 | 
						|
		return this._strokeStyle;
 | 
						|
	}
 | 
						|
 | 
						|
	setStrokeStyle(value) {
 | 
						|
		this.strokeStyle = value;
 | 
						|
	}
 | 
						|
 | 
						|
	set strokeStyle(value) {
 | 
						|
 | 
						|
		this._strokeStyle = value;
 | 
						|
 | 
						|
		if (typeof(value) == 'string') {
 | 
						|
			this._drawCommands = this._drawCommands.concat("S" + value + ";");
 | 
						|
		} else if (value instanceof FillStylePattern) {
 | 
						|
			CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
 | 
						|
			this._drawCommands = this._drawCommands.concat("G" + image._id + "," + value._style + ";");
 | 
						|
		} else if (value instanceof FillStyleLinearGradient) {
 | 
						|
			var command = "D" + value._start_pos._x.toFixed(2) + "," + value._start_pos._y.toFixed(2) + "," +
 | 
						|
				value._end_pos._x.toFixed(2) + "," + value._end_pos._y.toFixed(2) + "," +
 | 
						|
				value._stop_count;
 | 
						|
 | 
						|
			for (var i = 0; i < value._stop_count; ++i) {
 | 
						|
				command += ("," + value._stops[i]._pos + "," + value._stops[i]._color);
 | 
						|
			}
 | 
						|
			this._drawCommands = this._drawCommands.concat(command + ";");
 | 
						|
		} else if (value instanceof FillStyleRadialGradient) {
 | 
						|
			var command = "H" + value._start_pos._x.toFixed(2) + "," + value._start_pos._y.toFixed(2) + "," + value._start_pos._r
 | 
						|
				.toFixed(2) + "," +
 | 
						|
				value._end_pos._x.toFixed(2) + "," + value._end_pos._y + ",".toFixed(2) + value._end_pos._r.toFixed(2) + "," +
 | 
						|
				value._stop_count;
 | 
						|
 | 
						|
			for (var i = 0; i < value._stop_count; ++i) {
 | 
						|
				command += ("," + value._stops[i]._pos + "," + value._stops[i]._color);
 | 
						|
			}
 | 
						|
			this._drawCommands = this._drawCommands.concat(command + ";");
 | 
						|
		}
 | 
						|
	}
 | 
						|
 | 
						|
	get lineWidth() {
 | 
						|
		return this._lineWidth;
 | 
						|
	}
 | 
						|
 | 
						|
	setLineWidth(value) {
 | 
						|
		this.lineWidth = value;
 | 
						|
	}
 | 
						|
 | 
						|
	set lineWidth(value) {
 | 
						|
		this._lineWidth = value;
 | 
						|
		this._drawCommands = this._drawCommands.concat("W" + value + ";");
 | 
						|
	}
 | 
						|
 | 
						|
	get lineCap() {
 | 
						|
		return this._lineCap;
 | 
						|
	}
 | 
						|
 | 
						|
	setLineCap(value) {
 | 
						|
		this.lineCap = value;
 | 
						|
	}
 | 
						|
 | 
						|
	set lineCap(value) {
 | 
						|
		this._lineCap = value;
 | 
						|
		this._drawCommands = this._drawCommands.concat("C" + value + ";");
 | 
						|
	}
 | 
						|
 | 
						|
	get lineJoin() {
 | 
						|
		return this._lineJoin;
 | 
						|
	}
 | 
						|
 | 
						|
	setLineJoin(value) {
 | 
						|
		this.lineJoin = value
 | 
						|
	}
 | 
						|
 | 
						|
	set lineJoin(value) {
 | 
						|
		this._lineJoin = value;
 | 
						|
		this._drawCommands = this._drawCommands.concat("J" + value + ";");
 | 
						|
	}
 | 
						|
 | 
						|
	get miterLimit() {
 | 
						|
		return this._miterLimit;
 | 
						|
	}
 | 
						|
 | 
						|
	setMiterLimit(value) {
 | 
						|
		this.miterLimit = value
 | 
						|
	}
 | 
						|
 | 
						|
	set miterLimit(value) {
 | 
						|
		this._miterLimit = value;
 | 
						|
		this._drawCommands = this._drawCommands.concat("M" + value + ";");
 | 
						|
	}
 | 
						|
 | 
						|
	get globalCompositeOperation() {
 | 
						|
		return this._globalCompositeOperation;
 | 
						|
	}
 | 
						|
 | 
						|
	set globalCompositeOperation(value) {
 | 
						|
 | 
						|
		this._globalCompositeOperation = value;
 | 
						|
		let mode = 0;
 | 
						|
		switch (value) {
 | 
						|
			case "source-over":
 | 
						|
				mode = 0;
 | 
						|
				break;
 | 
						|
			case "source-atop":
 | 
						|
				mode = 5;
 | 
						|
				break;
 | 
						|
			case "source-in":
 | 
						|
				mode = 0;
 | 
						|
				break;
 | 
						|
			case "source-out":
 | 
						|
				mode = 2;
 | 
						|
				break;
 | 
						|
			case "destination-over":
 | 
						|
				mode = 4;
 | 
						|
				break;
 | 
						|
			case "destination-atop":
 | 
						|
				mode = 4;
 | 
						|
				break;
 | 
						|
			case "destination-in":
 | 
						|
				mode = 4;
 | 
						|
				break;
 | 
						|
			case "destination-out":
 | 
						|
				mode = 3;
 | 
						|
				break;
 | 
						|
			case "lighter":
 | 
						|
				mode = 1;
 | 
						|
				break;
 | 
						|
			case "copy":
 | 
						|
				mode = 2;
 | 
						|
				break;
 | 
						|
			case "xor":
 | 
						|
				mode = 6;
 | 
						|
				break;
 | 
						|
			default:
 | 
						|
				mode = 0;
 | 
						|
		}
 | 
						|
 | 
						|
		this._drawCommands = this._drawCommands.concat("B" + mode + ";");
 | 
						|
	}
 | 
						|
 | 
						|
	get textAlign() {
 | 
						|
		return this._textAlign;
 | 
						|
	}
 | 
						|
 | 
						|
	setTextAlign(value) {
 | 
						|
		this.textAlign = value
 | 
						|
	}
 | 
						|
 | 
						|
	set textAlign(value) {
 | 
						|
 | 
						|
		this._textAlign = value;
 | 
						|
		let Align = 0;
 | 
						|
		switch (value) {
 | 
						|
			case "start":
 | 
						|
				Align = 0;
 | 
						|
				break;
 | 
						|
			case "end":
 | 
						|
				Align = 1;
 | 
						|
				break;
 | 
						|
			case "left":
 | 
						|
				Align = 2;
 | 
						|
				break;
 | 
						|
			case "center":
 | 
						|
				Align = 3;
 | 
						|
				break;
 | 
						|
			case "right":
 | 
						|
				Align = 4;
 | 
						|
				break;
 | 
						|
			default:
 | 
						|
				Align = 0;
 | 
						|
		}
 | 
						|
 | 
						|
		this._drawCommands = this._drawCommands.concat("A" + Align + ";");
 | 
						|
	}
 | 
						|
 | 
						|
	get textBaseline() {
 | 
						|
		return this._textBaseline;
 | 
						|
	}
 | 
						|
 | 
						|
	setTextBaseline(value) {
 | 
						|
		this.textBaseline = value
 | 
						|
	}
 | 
						|
 | 
						|
	set textBaseline(value) {
 | 
						|
		this._textBaseline = value;
 | 
						|
		let baseline = 0;
 | 
						|
		switch (value) {
 | 
						|
			case "alphabetic":
 | 
						|
				baseline = 0;
 | 
						|
				break;
 | 
						|
			case "middle":
 | 
						|
				baseline = 1;
 | 
						|
				break;
 | 
						|
			case "top":
 | 
						|
				baseline = 2;
 | 
						|
				break;
 | 
						|
			case "hanging":
 | 
						|
				baseline = 3;
 | 
						|
				break;
 | 
						|
			case "bottom":
 | 
						|
				baseline = 4;
 | 
						|
				break;
 | 
						|
			case "ideographic":
 | 
						|
				baseline = 5;
 | 
						|
				break;
 | 
						|
			default:
 | 
						|
				baseline = 0;
 | 
						|
				break;
 | 
						|
		}
 | 
						|
 | 
						|
		this._drawCommands = this._drawCommands.concat("E" + baseline + ";");
 | 
						|
	}
 | 
						|
 | 
						|
	get font() {
 | 
						|
		return this._font;
 | 
						|
	}
 | 
						|
 | 
						|
	setFontSize(size) {
 | 
						|
		var str = this._font;
 | 
						|
		var strs = str.trim().split(/\s+/);
 | 
						|
		for (var i = 0; i < strs.length; i++) {
 | 
						|
			var values = ["normal", "italic", "oblique", "normal", "small-caps", "normal", "bold",
 | 
						|
				"bolder", "lighter", "100", "200", "300", "400", "500", "600", "700", "800", "900",
 | 
						|
				"normal", "ultra-condensed", "extra-condensed", "condensed", "semi-condensed",
 | 
						|
				"semi-expanded", "expanded", "extra-expanded", "ultra-expanded"
 | 
						|
			];
 | 
						|
 | 
						|
			if (-1 == values.indexOf(strs[i].trim())) {
 | 
						|
				if (typeof size === 'string') {
 | 
						|
					strs[i] = size;
 | 
						|
				} else if (typeof size === 'number') {
 | 
						|
					strs[i] = String(size) + 'px';
 | 
						|
				}
 | 
						|
				break;
 | 
						|
			}
 | 
						|
		}
 | 
						|
		this.font = strs.join(" ");
 | 
						|
	}
 | 
						|
 | 
						|
	set font(value) {
 | 
						|
		this._font = value;
 | 
						|
		this._drawCommands = this._drawCommands.concat("j" + value + ";");
 | 
						|
	}
 | 
						|
 | 
						|
	setTransform(a, b, c, d, tx, ty) {
 | 
						|
		this._drawCommands = this._drawCommands.concat("t" +
 | 
						|
			(a === 1 ? "1" : a.toFixed(2)) + "," +
 | 
						|
			(b === 0 ? "0" : b.toFixed(2)) + "," +
 | 
						|
			(c === 0 ? "0" : c.toFixed(2)) + "," +
 | 
						|
			(d === 1 ? "1" : d.toFixed(2)) + "," + tx.toFixed(2) + "," + ty.toFixed(2) + ";");
 | 
						|
	}
 | 
						|
 | 
						|
	transform(a, b, c, d, tx, ty) {
 | 
						|
		this._drawCommands = this._drawCommands.concat("f" +
 | 
						|
			(a === 1 ? "1" : a.toFixed(2)) + "," +
 | 
						|
			(b === 0 ? "0" : b.toFixed(2)) + "," +
 | 
						|
			(c === 0 ? "0" : c.toFixed(2)) + "," +
 | 
						|
			(d === 1 ? "1" : d.toFixed(2)) + "," + tx + "," + ty + ";");
 | 
						|
	}
 | 
						|
 | 
						|
	resetTransform() {
 | 
						|
		this._drawCommands = this._drawCommands.concat("m;");
 | 
						|
	}
 | 
						|
 | 
						|
	scale(a, d) {
 | 
						|
		this._drawCommands = this._drawCommands.concat("k" + a.toFixed(2) + "," +
 | 
						|
			d.toFixed(2) + ";");
 | 
						|
	}
 | 
						|
 | 
						|
	rotate(angle) {
 | 
						|
		this._drawCommands = this._drawCommands
 | 
						|
			.concat("r" + angle.toFixed(6) + ";");
 | 
						|
	}
 | 
						|
 | 
						|
	translate(tx, ty) {
 | 
						|
		this._drawCommands = this._drawCommands.concat("l" + tx.toFixed(2) + "," + ty.toFixed(2) + ";");
 | 
						|
	}
 | 
						|
 | 
						|
	save() {
 | 
						|
		this._savedGlobalAlpha.push(this._globalAlpha);
 | 
						|
		this._drawCommands = this._drawCommands.concat("v;");
 | 
						|
	}
 | 
						|
 | 
						|
	restore() {
 | 
						|
		this._drawCommands = this._drawCommands.concat("e;");
 | 
						|
		this._globalAlpha = this._savedGlobalAlpha.pop();
 | 
						|
	}
 | 
						|
 | 
						|
	createPattern(img, pattern) {
 | 
						|
		if (typeof img === 'string') {
 | 
						|
			var imgObj = new GImage();
 | 
						|
			imgObj.src = img;
 | 
						|
			img = imgObj;
 | 
						|
		}
 | 
						|
		return new FillStylePattern(img, pattern);
 | 
						|
	}
 | 
						|
 | 
						|
	createLinearGradient(x0, y0, x1, y1) {
 | 
						|
		return new FillStyleLinearGradient(x0, y0, x1, y1);
 | 
						|
	}
 | 
						|
 | 
						|
	createRadialGradient = function(x0, y0, r0, x1, y1, r1) {
 | 
						|
		return new FillStyleRadialGradient(x0, y0, r0, x1, y1, r1);
 | 
						|
	};
 | 
						|
 | 
						|
	createCircularGradient = function(x0, y0, r0) {
 | 
						|
		return new FillStyleRadialGradient(x0, y0, 0, x0, y0, r0);
 | 
						|
	};
 | 
						|
 | 
						|
	strokeRect(x, y, w, h) {
 | 
						|
		this._drawCommands = this._drawCommands.concat("s" + x + "," + y + "," + w + "," + h + ";");
 | 
						|
	}
 | 
						|
 | 
						|
 | 
						|
	clearRect(x, y, w, h) {
 | 
						|
		this._drawCommands = this._drawCommands.concat("c" + x + "," + y + "," + w +
 | 
						|
			"," + h + ";");
 | 
						|
	}
 | 
						|
 | 
						|
	clip() {
 | 
						|
		this._drawCommands = this._drawCommands.concat("p;");
 | 
						|
	}
 | 
						|
 | 
						|
	resetClip() {
 | 
						|
		this._drawCommands = this._drawCommands.concat("q;");
 | 
						|
	}
 | 
						|
 | 
						|
	closePath() {
 | 
						|
		this._drawCommands = this._drawCommands.concat("o;");
 | 
						|
	}
 | 
						|
 | 
						|
	moveTo(x, y) {
 | 
						|
		this._drawCommands = this._drawCommands.concat("g" + x.toFixed(2) + "," + y.toFixed(2) + ";");
 | 
						|
	}
 | 
						|
 | 
						|
	lineTo(x, y) {
 | 
						|
		this._drawCommands = this._drawCommands.concat("i" + x.toFixed(2) + "," + y.toFixed(2) + ";");
 | 
						|
	}
 | 
						|
 | 
						|
	quadraticCurveTo = function(cpx, cpy, x, y) {
 | 
						|
		this._drawCommands = this._drawCommands.concat("u" + cpx + "," + cpy + "," + x + "," + y + ";");
 | 
						|
	}
 | 
						|
 | 
						|
	bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y, ) {
 | 
						|
		this._drawCommands = this._drawCommands.concat(
 | 
						|
			"z" + cp1x.toFixed(2) + "," + cp1y.toFixed(2) + "," + cp2x.toFixed(2) + "," + cp2y.toFixed(2) + "," +
 | 
						|
			x.toFixed(2) + "," + y.toFixed(2) + ";");
 | 
						|
	}
 | 
						|
 | 
						|
	arcTo(x1, y1, x2, y2, radius) {
 | 
						|
		this._drawCommands = this._drawCommands.concat("h" + x1 + "," + y1 + "," + x2 + "," + y2 + "," + radius + ";");
 | 
						|
	}
 | 
						|
 | 
						|
	beginPath() {
 | 
						|
		this._drawCommands = this._drawCommands.concat("b;");
 | 
						|
	}
 | 
						|
 | 
						|
 | 
						|
	fillRect(x, y, w, h) {
 | 
						|
		this._drawCommands = this._drawCommands.concat("n" + x + "," + y + "," + w +
 | 
						|
			"," + h + ";");
 | 
						|
	}
 | 
						|
 | 
						|
	rect(x, y, w, h) {
 | 
						|
		this._drawCommands = this._drawCommands.concat("w" + x + "," + y + "," + w + "," + h + ";");
 | 
						|
	}
 | 
						|
 | 
						|
	fill() {
 | 
						|
		this._drawCommands = this._drawCommands.concat("L;");
 | 
						|
	}
 | 
						|
 | 
						|
	stroke(path) {
 | 
						|
		this._drawCommands = this._drawCommands.concat("x;");
 | 
						|
	}
 | 
						|
 | 
						|
	arc(x, y, radius, startAngle, endAngle, anticlockwise) {
 | 
						|
 | 
						|
		let ianticlockwise = 0;
 | 
						|
		if (anticlockwise) {
 | 
						|
			ianticlockwise = 1;
 | 
						|
		}
 | 
						|
 | 
						|
		this._drawCommands = this._drawCommands.concat(
 | 
						|
			"y" + x.toFixed(2) + "," + y.toFixed(2) + "," +
 | 
						|
			radius.toFixed(2) + "," + startAngle + "," + endAngle + "," + ianticlockwise +
 | 
						|
			";"
 | 
						|
		);
 | 
						|
	}
 | 
						|
 | 
						|
	fillText(text, x, y) {
 | 
						|
		let tmptext = text.replace(/!/g, "!!");
 | 
						|
		tmptext = tmptext.replace(/,/g, "!,");
 | 
						|
		tmptext = tmptext.replace(/;/g, "!;");
 | 
						|
		this._drawCommands = this._drawCommands.concat("T" + tmptext + "," + x + "," + y + ",0.0;");
 | 
						|
	}
 | 
						|
 | 
						|
	strokeText = function(text, x, y) {
 | 
						|
		let tmptext = text.replace(/!/g, "!!");
 | 
						|
		tmptext = tmptext.replace(/,/g, "!,");
 | 
						|
		tmptext = tmptext.replace(/;/g, "!;");
 | 
						|
		this._drawCommands = this._drawCommands.concat("U" + tmptext + "," + x + "," + y + ",0.0;");
 | 
						|
	}
 | 
						|
 | 
						|
	measureText(text) {
 | 
						|
		return CanvasRenderingContext2D.GBridge.measureText(text, this.font, this.componentId);
 | 
						|
	}
 | 
						|
 | 
						|
	isPointInPath = function(x, y) {
 | 
						|
		throw new Error('GCanvas not supported yet');
 | 
						|
	}
 | 
						|
 | 
						|
	drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) {
 | 
						|
		if (typeof image === 'string') {
 | 
						|
			var imgObj = new GImage();
 | 
						|
			imgObj.src = image;
 | 
						|
			image = imgObj;
 | 
						|
		}
 | 
						|
		if (image instanceof GImage) {
 | 
						|
			if (!image.complete) {
 | 
						|
				imgObj.onload = () => {
 | 
						|
					var index = this._needRedrawImageCache.indexOf(image);
 | 
						|
					if (index > -1) {
 | 
						|
						this._needRedrawImageCache.splice(index, 1);
 | 
						|
						CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
 | 
						|
						this._redrawflush(true);
 | 
						|
					}
 | 
						|
				}
 | 
						|
				this._notCommitDrawImageCache.push(image);
 | 
						|
			} else {
 | 
						|
				CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
 | 
						|
			}
 | 
						|
			var srcArgs = [image, sx, sy, sw, sh, dx, dy, dw, dh];
 | 
						|
			var args = [];
 | 
						|
			for (var arg in srcArgs) {
 | 
						|
				if (typeof(srcArgs[arg]) != 'undefined') {
 | 
						|
					args.push(srcArgs[arg]);
 | 
						|
				}
 | 
						|
			}
 | 
						|
			this.__drawImage.apply(this, args);
 | 
						|
			//this.__drawImage(image,sx, sy, sw, sh, dx, dy, dw, dh);
 | 
						|
		}
 | 
						|
	}
 | 
						|
 | 
						|
	__drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) {
 | 
						|
		const numArgs = arguments.length;
 | 
						|
 | 
						|
		function drawImageCommands() {
 | 
						|
 | 
						|
			if (numArgs === 3) {
 | 
						|
				const x = parseFloat(sx) || 0.0;
 | 
						|
				const y = parseFloat(sy) || 0.0;
 | 
						|
 | 
						|
				return ("d" + image._id + ",0,0," +
 | 
						|
					image.width + "," + image.height + "," +
 | 
						|
					x + "," + y + "," + image.width + "," + image.height + ";");
 | 
						|
			} else if (numArgs === 5) {
 | 
						|
				const x = parseFloat(sx) || 0.0;
 | 
						|
				const y = parseFloat(sy) || 0.0;
 | 
						|
				const width = parseInt(sw) || image.width;
 | 
						|
				const height = parseInt(sh) || image.height;
 | 
						|
 | 
						|
				return ("d" + image._id + ",0,0," +
 | 
						|
					image.width + "," + image.height + "," +
 | 
						|
					x + "," + y + "," + width + "," + height + ";");
 | 
						|
			} else if (numArgs === 9) {
 | 
						|
				sx = parseFloat(sx) || 0.0;
 | 
						|
				sy = parseFloat(sy) || 0.0;
 | 
						|
				sw = parseInt(sw) || image.width;
 | 
						|
				sh = parseInt(sh) || image.height;
 | 
						|
				dx = parseFloat(dx) || 0.0;
 | 
						|
				dy = parseFloat(dy) || 0.0;
 | 
						|
				dw = parseInt(dw) || image.width;
 | 
						|
				dh = parseInt(dh) || image.height;
 | 
						|
 | 
						|
				return ("d" + image._id + "," +
 | 
						|
					sx + "," + sy + "," + sw + "," + sh + "," +
 | 
						|
					dx + "," + dy + "," + dw + "," + dh + ";");
 | 
						|
			}
 | 
						|
		}
 | 
						|
		this._drawCommands += drawImageCommands();
 | 
						|
	}
 | 
						|
 | 
						|
	_flush(reserve, callback) {
 | 
						|
		const commands = this._drawCommands;
 | 
						|
		this._drawCommands = '';
 | 
						|
		CanvasRenderingContext2D.GBridge.render2d(this.componentId, commands, callback);
 | 
						|
		this._needRender = false;
 | 
						|
	}
 | 
						|
 | 
						|
	_redrawflush(reserve, callback) {
 | 
						|
		const commands = this._redrawCommands;
 | 
						|
		CanvasRenderingContext2D.GBridge.render2d(this.componentId, commands, callback);
 | 
						|
		if (this._needRedrawImageCache.length == 0) {
 | 
						|
			this._redrawCommands = '';
 | 
						|
		}
 | 
						|
	}
 | 
						|
 | 
						|
	draw(reserve, callback) {
 | 
						|
		if (!reserve) {
 | 
						|
			this._globalAlpha = this._savedGlobalAlpha.pop();
 | 
						|
			this._savedGlobalAlpha.push(this._globalAlpha);
 | 
						|
			this._redrawCommands = this._drawCommands;
 | 
						|
			this._needRedrawImageCache = this._notCommitDrawImageCache;
 | 
						|
			if (this._autoSaveContext) {
 | 
						|
				this._drawCommands = ("v;" + this._drawCommands);
 | 
						|
				this._autoSaveContext = false;
 | 
						|
			} else {
 | 
						|
				this._drawCommands = ("e;X;v;" + this._drawCommands);
 | 
						|
			}
 | 
						|
		} else {
 | 
						|
			this._needRedrawImageCache = this._needRedrawImageCache.concat(this._notCommitDrawImageCache);
 | 
						|
			this._redrawCommands += this._drawCommands;
 | 
						|
			if (this._autoSaveContext) {
 | 
						|
				this._drawCommands = ("v;" + this._drawCommands);
 | 
						|
				this._autoSaveContext = false;
 | 
						|
			}
 | 
						|
		}
 | 
						|
		this._notCommitDrawImageCache = [];
 | 
						|
		if (this._flush) {
 | 
						|
			this._flush(reserve, callback);
 | 
						|
		}
 | 
						|
	}
 | 
						|
 | 
						|
	getImageData(x, y, w, h, callback) {
 | 
						|
		CanvasRenderingContext2D.GBridge.getImageData(this.componentId, x, y, w, h, function(res) {
 | 
						|
			res.data = Base64ToUint8ClampedArray(res.data);
 | 
						|
			if (typeof(callback) == 'function') {
 | 
						|
				callback(res);
 | 
						|
			}
 | 
						|
		});
 | 
						|
	}
 | 
						|
 | 
						|
	putImageData(data, x, y, w, h, callback) {
 | 
						|
		if (data instanceof Uint8ClampedArray) {
 | 
						|
			data = ArrayBufferToBase64(data);
 | 
						|
			CanvasRenderingContext2D.GBridge.putImageData(this.componentId, data, x, y, w, h, function(res) {
 | 
						|
				if (typeof(callback) == 'function') {
 | 
						|
					callback(res);
 | 
						|
				}
 | 
						|
			});
 | 
						|
		}
 | 
						|
	}
 | 
						|
 | 
						|
	toTempFilePath(x, y, width, height, destWidth, destHeight, fileType, quality, callback) {
 | 
						|
		CanvasRenderingContext2D.GBridge.toTempFilePath(this.componentId, x, y, width, height, destWidth, destHeight,
 | 
						|
			fileType, quality,
 | 
						|
			function(res) {
 | 
						|
				if (typeof(callback) == 'function') {
 | 
						|
					callback(res);
 | 
						|
				}
 | 
						|
			});
 | 
						|
	}
 | 
						|
}
 |