/**
* Linear gradient.
*
* @example
* Ext.create({
* xtype: 'draw',
* renderTo: document.body,
* width: 600,
* height: 400,
* sprites: [{
* type: 'circle',
* cx: 100,
* cy: 100,
* r: 100,
* fillStyle: {
* type: 'linear',
* degrees: 180,
* stops: [{
* offset: 0,
* color: '#1F6D91'
* }, {
* offset: 1,
* color: '#90BCC9'
* }]
* }
* }]
* });
*/
Ext.define('Ext.draw.gradient.Linear', {
extend: 'Ext.draw.gradient.Gradient',
requires: ['Ext.draw.Color'],
type: 'linear',
config: {
/**
* @cfg {Number} degrees
* The angle of rotation of the gradient in degrees.
*/
degrees: 0,
/**
* @cfg {Number} radians
* The angle of rotation of the gradient in radians.
*/
radians: 0
},
applyRadians: function(radians, oldRadians) {
if (Ext.isNumber(radians)) {
return radians;
}
return oldRadians;
},
applyDegrees: function(degrees, oldDegrees) {
if (Ext.isNumber(degrees)) {
return degrees;
}
return oldDegrees;
},
updateRadians: function(radians) {
this.setDegrees(Ext.draw.Draw.degrees(radians));
},
updateDegrees: function(degrees) {
this.setRadians(Ext.draw.Draw.rad(degrees));
},
/**
* @method generateGradient
* @inheritdoc
*/
generateGradient: function(ctx, bbox) {
var angle = this.getRadians(),
cos = Math.cos(angle),
sin = Math.sin(angle),
w = bbox.width,
h = bbox.height,
cx = bbox.x + w * 0.5,
cy = bbox.y + h * 0.5,
stops = this.getStops(),
ln = stops.length,
gradient,
l, i;
if (Ext.isNumber(cx) && Ext.isNumber(cy) && h > 0 && w > 0) {
l = (Math.sqrt(h * h + w * w) * Math.abs(Math.cos(angle - Math.atan(h / w)))) / 2;
gradient = ctx.createLinearGradient(
cx + cos * l, cy + sin * l,
cx - cos * l, cy - sin * l
);
for (i = 0; i < ln; i++) {
gradient.addColorStop(stops[i].offset, stops[i].color);
}
return gradient;
}
return Ext.util.Color.NONE;
}
});