EaselJS 0.7.0: ColorMatrix.toArray()メソッドが空の配列を返す [Edit]

投稿者：野中 文雄 | 投稿日：2013.11.09 | [CreateJS][HTML5][野中ゼミ]

新しいEaselJS 0.7.0のColorMatrix.toArray()メソッドが、カラー変換行列の25成分値を取出すことなく、空の配列を返します。

EaselJS 0.7.0: ColorMatrix.toArray() returns an empty array

The ColorMatrix.toArray() method of EaselJS 0.7.0 returns an empty array, which should have contained 25 elements of the ColorMatrix object.

var test = new createjs.ColorMatrix(100);
var _array = test.toArray();
console.log(test);  // [1, 0, 0, 0, 255, 0, 1, 0, 0, 255, 0, 0, 1, 0, 255, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1]
console.log(_array);  // []

ColorMatrix.toArray()メソッドは、実質的に以下のように実装されています。ColorMatrixクラスのFunction.prototypeプロパティにはArrayオブジェクトが与えられます。けれど、Arrayクラスはこのステートメントだけでは完全には継承されません。

The ColorMatrix.toArray() method is basically implemented as follows. The Function.prototype property of the ColorMatrix class is set to an Array object. But the Array class is not completely inherited just by this statement.

function ColorMatrix(brightness, contrast, saturation, hue) {
	this.initialize(brightness, contrast, saturation, hue);
}
ColorMatrix.prototype = [];
ColorMatrix.IDENTITY_MATRIX = [
	1,0,0,0,0,
	0,1,0,0,0,
	0,0,1,0,0,
	0,0,0,1,0,
	0,0,0,0,1
];
ColorMatrix.prototype.initialize = function(brightness,contrast,saturation,hue) {
	this.reset();
	this.adjustColor(brightness,contrast,saturation,hue);
	return this;
};
ColorMatrix.prototype.reset = function() {
	return this.copyMatrix(ColorMatrix.IDENTITY_MATRIX);
};
ColorMatrix.prototype.toArray = function() {
	return this.slice(0,ColorMatrix.LENGTH);
};

たとえば、Arrayのサブクラスのオブジェクトに、配列アクセス演算子[]でエレメントを加えることはできます。しかし、そのArray.lengthプロパティの値は0になります。

For example, an element can be added to an object of the sub class of the Array with the brackets []. However, its Array.length property returns 0.

function ArraySub() {}
ArraySub.prototype = [];
var test = new ArraySub();
test[0] = "element0";
console.log(test);  // ["element0"]
console.log(test[0]);  // element0
console.log(test.length);  // 0

ColorMatrixオブジェクトのArray.lengthプロパティの値を正しく25に定めれば、ColorMatrix.toArray()メソッドが25エレメントの配列を返すようになります。ただし、このプロパティの定めだけでは、まだArrayクラスの継承には十分といえません。

Once the Array.length property of a ColorMatrix object is set to proper value 25, the ColorMatrix.toArray() method returns an Array with 25 elements. But this is still not enough to inherit the Array class.

var test = new createjs.ColorMatrix(255);
// var _array = test.toArray();
var _array = toArray(test);
console.log(_array);  // [1, 0, 0, 0, 255, 0, 1, 0, 0, 255, 0, 0, 1, 0, 255, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1]
function toArray(matrix) {
	matrix.length = createjs.ColorMatrix.LENGTH;
	return matrix.toArray();
}

EaselJS次期バージョン候補(NEXT)では、Arrayクラスの継承は止めてColorMatrix.toArray()メソッドを実装することにより、この問題を解決しました。

The EaselJS NEXT version fixes this issue by abandoning inheritance of the Array class as follows:

function ColorMatrix(brightness, contrast, saturation, hue) {
	this.initialize(brightness, contrast, saturation, hue);
}
// ColorMatrix.prototype = [];

ColorMatrix.prototype.toArray = function() {
	var arr = [];
	for (var i =  0, l = ColorMatrix.LENGTH; i < l; i++) {
		arr[i] = this[i];
	}
	return arr;
};

その他の記事