You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by bi...@apache.org on 2014/09/17 03:25:29 UTC
[5/7] Add support for LinearGradient for AS and JS versions. Includes
support for gradient rotation as well. Elliptical Arc (A) property of Path
does not support gradient rotations (yet) in the AS version
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9999c237/frameworks/js/FlexJS/src/org/apache/flex/core/graphics/GraphicShape.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/core/graphics/GraphicShape.js b/frameworks/js/FlexJS/src/org/apache/flex/core/graphics/GraphicShape.js
index 4b44a9c..2fd902a 100644
--- a/frameworks/js/FlexJS/src/org/apache/flex/core/graphics/GraphicShape.js
+++ b/frameworks/js/FlexJS/src/org/apache/flex/core/graphics/GraphicShape.js
@@ -27,13 +27,13 @@ org.apache.flex.core.graphics.GraphicShape = function() {
/**
* @private
- * @type {org.apache.flex.core.graphics.SolidColor}
+ * @type {org.apache.flex.core.graphics.IFill}
*/
this.fill_ = null;
/**
* @private
- * @type {org.apache.flex.core.graphics.SolidColorStroke}
+ * @type {org.apache.flex.core.graphics.IStroke}
*/
this.stroke_ = null;
@@ -83,7 +83,7 @@ org.apache.flex.core.graphics.GraphicShape.prototype.FLEXJS_CLASS_INFO =
/**
* @expose
- * @return {org.apache.flex.core.graphics.SolidColor} The fill object.
+ * @return {org.apache.flex.core.graphics.IFill} The fill object.
*/
org.apache.flex.core.graphics.GraphicShape.prototype.get_fill = function() {
return this.fill_;
@@ -91,7 +91,7 @@ org.apache.flex.core.graphics.GraphicShape.prototype.get_fill = function() {
/**
- * @param {org.apache.flex.core.graphics.SolidColor} value The fill object.
+ * @param {org.apache.flex.core.graphics.IFill} value The fill object.
*/
org.apache.flex.core.graphics.GraphicShape.prototype.set_fill = function(value) {
this.fill_ = value;
@@ -100,7 +100,7 @@ org.apache.flex.core.graphics.GraphicShape.prototype.set_fill = function(value)
/**
* @expose
- * @return {org.apache.flex.core.graphics.SolidColorStroke} The stroke object.
+ * @return {org.apache.flex.core.graphics.IStroke} The stroke object.
*/
org.apache.flex.core.graphics.GraphicShape.prototype.get_stroke = function() {
return this.stroke_;
@@ -109,7 +109,7 @@ org.apache.flex.core.graphics.GraphicShape.prototype.get_stroke = function() {
/**
* @expose
- * @param {org.apache.flex.core.graphics.SolidColorStroke} value The stroke object.
+ * @param {org.apache.flex.core.graphics.IStroke} value The stroke object.
*/
org.apache.flex.core.graphics.GraphicShape.prototype.set_stroke = function(value) {
this.stroke_ = value;
@@ -117,7 +117,7 @@ org.apache.flex.core.graphics.GraphicShape.prototype.set_stroke = function(value
/**
- * @override
+ *
*/
org.apache.flex.core.graphics.GraphicShape.prototype.addedToParent = function() {
var bbox = this.element.getBBox();
@@ -164,7 +164,7 @@ org.apache.flex.core.graphics.GraphicShape.prototype.getStyleStr = function() {
org.apache.flex.core.graphics.GraphicShape.prototype.resize = function(x, y, bbox) {
this.element.setAttribute('width', String(bbox.width + bbox.x + this.xOffset_) + 'px');
this.element.setAttribute('height', String(bbox.height + bbox.y + this.yOffset_) + 'px');
- this.element.setAttribute('style', 'overflow:visible; position:absolute; left:' + String(x) + 'px; top:' + String(y));
+ this.element.setAttribute('style', 'overflow:visible; position:absolute; left:' + String(x) + 'px; top:' + String(y) + 'px');
};
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9999c237/frameworks/js/FlexJS/src/org/apache/flex/core/graphics/LinearGradient.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/core/graphics/LinearGradient.js b/frameworks/js/FlexJS/src/org/apache/flex/core/graphics/LinearGradient.js
new file mode 100644
index 0000000..1ef3e71
--- /dev/null
+++ b/frameworks/js/FlexJS/src/org/apache/flex/core/graphics/LinearGradient.js
@@ -0,0 +1,124 @@
+/**
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * org.apache.flex.core.graphics.LinearGradient
+ *
+ * @fileoverview
+ *
+ * @suppress {checkTypes}
+ */
+
+goog.provide('org.apache.flex.core.graphics.LinearGradient');
+goog.require('org.apache.flex.core.graphics.GradientBase');
+
+/**
+ * @constructor
+ * @extends {org.apache.flex.core.graphics.GradientBase}
+ * @implements {org.apache.flex.core.graphics.IFill}
+ */
+org.apache.flex.core.graphics.LinearGradient = function() {
+ org.apache.flex.core.graphics.LinearGradient.base(this, 'constructor');
+};
+goog.inherits(org.apache.flex.core.graphics.LinearGradient, org.apache.flex.core.graphics.GradientBase);
+
+
+/**
+ * @private
+ * @type {number}
+ */
+org.apache.flex.core.graphics.LinearGradient.prototype._scaleX;
+
+
+/**
+ * @expose
+ * @return {number}
+ */
+org.apache.flex.core.graphics.LinearGradient.prototype.get_scaleX = function() {
+ return this._scaleX;
+};
+
+
+/**
+ * @expose
+ * @param {number} value
+ */
+org.apache.flex.core.graphics.LinearGradient.prototype.set_scaleX = function(value) {
+ this._scaleX = value;
+};
+
+
+/**
+ * addFillAttrib()
+ *
+ * @expose
+ * @param {org.apache.flex.core.graphics.GraphicShape} value The GraphicShape object on which the fill must be added.
+ * @return {string}
+ */
+org.apache.flex.core.graphics.LinearGradient.prototype.addFillAttrib = function(value) {
+ //Create and add a linear gradient def
+ var svgNS = value.element.namespaceURI;
+ var grad = document.createElementNS(svgNS,'linearGradient');
+ var gradientId = this.get_newId();
+ grad.setAttribute('id',gradientId);
+
+ //Set x1, y1, x2, y2 of gradient
+ grad.setAttribute('x1','0%');
+ grad.setAttribute('y1','0%');
+ grad.setAttribute('x2','100%');
+ grad.setAttribute('y2','0%');
+
+ //Apply rotation to the gradient if get_rotatation() is a number
+ if (this.get_rotation() )
+ {
+ grad.setAttribute('gradientTransform', 'rotate(' + this.get_rotation() + ' 0.5 0.5)');
+ }
+
+ //Process gradient entries and create a stop for each entry
+ var entries = this.get_entries();
+ for (var i=0;i<entries.length;i++)
+ {
+ var gradientEntry = entries[i];
+ var stop = document.createElementNS(svgNS,'stop');
+ //Set Offset
+ stop.setAttribute('offset', String(gradientEntry.get_ratio() * 100) + '%');
+ //Set Color
+ var color = Number(gradientEntry.get_color()).toString(16);
+ if (color.length == 1) color = '00' + color;
+ if (color.length == 2) color = '00' + color;
+ if (color.length == 4) color = '00' + color;
+ stop.setAttribute('stop-color', '#' + String(color));
+ //Set Alpha
+ stop.setAttribute('stop-opacity', String(gradientEntry.get_alpha()));
+
+ grad.appendChild(stop);
+ }
+
+ //Add defs element if not available already
+ //Add newly created gradient to defs element
+ var defs = value.element.querySelector('defs') ||
+ value.element.insertBefore( document.createElementNS(svgNS,'defs'), value.element.firstChild);
+ defs.appendChild(grad);
+
+ //Return the fill attribute
+ return 'fill:url(#' + gradientId + ')';
+};
+
+
+/**
+ * Metadata
+ *
+ * @type {Object.<string, Array.<Object>>}
+ */
+org.apache.flex.core.graphics.LinearGradient.prototype.FLEXJS_CLASS_INFO = { names: [{ name: 'LinearGradient', qName: 'org.apache.flex.core.graphics.LinearGradient'}], interfaces: [org.apache.flex.core.graphics.IFill] };
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9999c237/frameworks/js/FlexJS/src/org/apache/flex/core/graphics/SolidColor.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/core/graphics/SolidColor.js b/frameworks/js/FlexJS/src/org/apache/flex/core/graphics/SolidColor.js
index ca11b93..20516b0 100644
--- a/frameworks/js/FlexJS/src/org/apache/flex/core/graphics/SolidColor.js
+++ b/frameworks/js/FlexJS/src/org/apache/flex/core/graphics/SolidColor.js
@@ -45,7 +45,7 @@ org.apache.flex.core.graphics.SolidColor = function() {
*/
org.apache.flex.core.graphics.SolidColor.prototype.FLEXJS_CLASS_INFO =
{ names: [{ name: 'SolidColor',
- qName: 'org.apache.flex.core.graphics.SolidColor' }] };
+ qName: 'org.apache.flex.core.graphics.SolidColor' }], interfaces: [org.apache.flex.core.graphics.IFill] };
/**