projects / extjs.git / blame
| Commit | Line | Data |
|---|---|---|
| 6527f429 DM |
1 | /**\r |
| 2 | * Linear gradient.\r | |
| 3 | *\r | |
| 4 | * @example\r | |
| 5 | * Ext.create({\r | |
| 6 | * xtype: 'draw', \r | |
| 7 | * renderTo: document.body,\r | |
| 8 | * width: 600,\r | |
| 9 | * height: 400,\r | |
| 10 | * sprites: [{\r | |
| 11 | * type: 'circle',\r | |
| 12 | * cx: 100,\r | |
| 13 | * cy: 100,\r | |
| 14 | * r: 100,\r | |
| 15 | * fillStyle: {\r | |
| 16 | * type: 'linear',\r | |
| 17 | * degrees: 180,\r | |
| 18 | * stops: [{\r | |
| 19 | * offset: 0,\r | |
| 20 | * color: '#1F6D91'\r | |
| 21 | * }, {\r | |
| 22 | * offset: 1,\r | |
| 23 | * color: '#90BCC9'\r | |
| 24 | * }]\r | |
| 25 | * }\r | |
| 26 | * }]\r | |
| 27 | * });\r | |
| 28 | */\r | |
| 29 | Ext.define('Ext.draw.gradient.Linear', {\r | |
| 30 | extend: 'Ext.draw.gradient.Gradient',\r | |
| 31 | requires: ['Ext.draw.Color'],\r | |
| 32 | type: 'linear',\r | |
| 33 | config: {\r | |
| 34 | /**\r | |
| 35 | * @cfg {Number} degrees\r | |
| 36 | * The angle of rotation of the gradient in degrees.\r | |
| 37 | */\r | |
| 38 | degrees: 0,\r | |
| 39 | /**\r | |
| 40 | * @cfg {Number} radians\r | |
| 41 | * The angle of rotation of the gradient in radians.\r | |
| 42 | */\r | |
| 43 | radians: 0\r | |
| 44 | },\r | |
| 45 | \r | |
| 46 | applyRadians: function (radians, oldRadians) {\r | |
| 47 | if (Ext.isNumber(radians)) {\r | |
| 48 | return radians;\r | |
| 49 | }\r | |
| 50 | return oldRadians;\r | |
| 51 | },\r | |
| 52 | \r | |
| 53 | applyDegrees: function (degrees, oldDegrees) {\r | |
| 54 | if (Ext.isNumber(degrees)) {\r | |
| 55 | return degrees;\r | |
| 56 | }\r | |
| 57 | return oldDegrees;\r | |
| 58 | },\r | |
| 59 | \r | |
| 60 | updateRadians: function (radians) {\r | |
| 61 | this.setDegrees(Ext.draw.Draw.degrees(radians));\r | |
| 62 | },\r | |
| 63 | \r | |
| 64 | updateDegrees: function (degrees) {\r | |
| 65 | this.setRadians(Ext.draw.Draw.rad(degrees));\r | |
| 66 | },\r | |
| 67 | \r | |
| 68 | /**\r | |
| 69 | * @inheritdoc\r | |
| 70 | */\r | |
| 71 | generateGradient: function (ctx, bbox) {\r | |
| 72 | var angle = this.getRadians(),\r | |
| 73 | cos = Math.cos(angle),\r | |
| 74 | sin = Math.sin(angle),\r | |
| 75 | w = bbox.width,\r | |
| 76 | h = bbox.height,\r | |
| 77 | cx = bbox.x + w * 0.5,\r | |
| 78 | cy = bbox.y + h * 0.5,\r | |
| 79 | stops = this.getStops(),\r | |
| 80 | ln = stops.length,\r | |
| 81 | gradient,\r | |
| 82 | l, i;\r | |
| 83 | \r | |
| 84 | if (Ext.isNumber(cx + cy) && h > 0 && w > 0) {\r | |
| 85 | l = (Math.sqrt(h * h + w * w) * Math.abs(Math.cos(angle - Math.atan(h / w)))) / 2;\r | |
| 86 | gradient = ctx.createLinearGradient(\r | |
| 87 | cx + cos * l, cy + sin * l,\r | |
| 88 | cx - cos * l, cy - sin * l\r | |
| 89 | );\r | |
| 90 | \r | |
| 91 | for (i = 0; i < ln; i++) {\r | |
| 92 | gradient.addColorStop(stops[i].offset, stops[i].color);\r | |
| 93 | }\r | |
| 94 | return gradient;\r | |
| 95 | }\r | |
| 96 | return Ext.draw.Color.NONE;\r | |
| 97 | }\r | |
| 98 | }); |