@awayjs/graphics
Version:
AwayJS graphics classes
129 lines (128 loc) • 5.34 kB
JavaScript
import { ColorUtils, Matrix, Rectangle } from '@awayjs/core';
import { GradientType } from '../GradientType';
var GradientFillStyle = /** @class */ (function () {
function GradientFillStyle(type, colors, alphas, ratios, matrix, spreadMethod, interpolationMethod, focalPointRatio) {
if (colors.length != alphas.length || colors.length != ratios.length) {
throw ('GradientFillStyle: Error - colors, alphas and ratios must be of same length');
}
this.colors = colors.concat();
this.colors_r = [];
this.colors_g = [];
this.colors_b = [];
this.colors_r.length = this.colors_g.length = this.colors_g.length = this.colors.length;
this.alphas = alphas.concat();
this.ratios = ratios.concat();
this.matrix = matrix.clone();
this.type = type;
this.uvRectangle = new Rectangle();
this.ratios.sort(function (a, b) { return a - b; });
this.ratio_min = this.ratios[0];
this.ratio_max = this.ratios[this.ratios.length - 1];
// todo: in case the ratios.sort has changed the order of ratios,
// do we need to sync the order of color too ?
var c = colors.length;
var argb;
while (c > 0) {
c--;
argb = ColorUtils.float32ColorToARGB(colors[c]);
this.colors_r[c] = argb[1];
this.colors_g[c] = argb[2];
this.colors_b[c] = argb[3];
}
}
GradientFillStyle.prototype.getUVMatrix = function () {
if (this._uvMatrix) {
return this._uvMatrix;
}
if (!this.matrix) {
this.matrix = new Matrix();
}
var projection_width = 1638.4;
var projection_width_half = projection_width * 0.5;
// Get and invert the uv transform:
// not TRANSFORM already transformed matrix
var a = this.matrix.a;
var b = this.matrix.b;
var c = this.matrix.c;
var d = this.matrix.d;
var tx = this.matrix.tx;
var ty = this.matrix.ty;
var a_inv = d / (a * d - b * c);
var b_inv = -b / (a * d - b * c);
var c_inv = -c / (a * d - b * c);
var d_inv = a / (a * d - b * c);
var tx_inv = (c * ty - d * tx) / (a * d - b * c);
var ty_inv = -(a * ty - b * tx) / (a * d - b * c);
var resultMatrix;
if (this.type == GradientType.LINEAR) {
resultMatrix = new Matrix((a_inv / projection_width) * (1 - (1 / 256)), 0, (c_inv / projection_width) * (1 - (1 / 256)), 0, (this.uvRectangle.x) + ((tx_inv + projection_width_half) / projection_width) * (1 - (1 / 256)), this.uvRectangle.y);
}
else if (this.type == GradientType.RADIAL) {
resultMatrix = new Matrix(a_inv / projection_width_half, b_inv / projection_width_half, c_inv / projection_width_half, d_inv / projection_width_half, ((tx_inv + projection_width_half) / projection_width_half) - 1, ((ty_inv + projection_width_half) / projection_width_half) - 1);
}
else {
this._uvMatrix = this.matrix;
}
return this._uvMatrix = resultMatrix;
};
GradientFillStyle.prototype.getColorAtPosition = function (value) {
var r1 = -1;
var r2 = -1;
if (value <= this.ratio_min) {
r1 = 0;
r2 = 0;
}
else if (value >= this.ratio_max) {
r1 = this.ratios.length - 1;
r2 = this.ratios.length - 1;
}
else {
for (var r = 0; r < this.ratios.length - 1; r++) {
if (value == this.ratios[r]) {
r1 = r;
r2 = r;
break;
}
else if (value == this.ratios[r + 1]) {
r1 = r + 1;
r2 = r + 1;
break;
}
else if (value >= this.ratios[r] && value <= this.ratios[r + 1]) {
r1 = r;
r2 = r + 1;
break;
}
}
}
if (r1 == r2) {
return [this.alphas[r1], this.colors_r[r1], this.colors_g[r1], this.colors_b[r1]];
}
var mix = (value - this.ratios[r1]) / (this.ratios[r2] - this.ratios[r1]);
var mix_neg = 1 - mix;
var color_a = this.alphas[r2] * mix + this.alphas[r1] * mix_neg;
var color_r = this.colors_r[r2] * mix + this.colors_r[r1] * mix_neg;
var color_g = this.colors_g[r2] * mix + this.colors_g[r1] * mix_neg;
var color_b = this.colors_b[r2] * mix + this.colors_b[r1] * mix_neg;
return [color_a, color_r, color_g, color_b];
};
GradientFillStyle.prototype.toString = function () {
var str = '';
var c = this.colors.length;
while (c > 0) {
c--;
str += this.colors[c] + '#' + this.alphas[c] + '#' + this.ratios[c] + '#';
}
return str;
};
Object.defineProperty(GradientFillStyle.prototype, "data_type", {
get: function () {
return GradientFillStyle.data_type;
},
enumerable: false,
configurable: true
});
GradientFillStyle.data_type = '[graphicsdata GradientFillStyle]';
return GradientFillStyle;
}());
export { GradientFillStyle };