Hopiu/fabric.js
1
0
Fork 0
mirror of https://github.com/Hopiu/fabric.js.git synced 2026-05-02 11:04:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update gradient.class.js

Browse source
This commit is contained in:
Andrea Bogazzi 2014-08-16 08:13:20 +02:00
parent 77911424ce
commit 011674707a
1 changed files with 25 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
src/gradient.class.js
View file

@ -77,6 +77,9 @@
*/
fabric.Gradient = fabric.util.createClass(/** @lends fabric.Gradient.prototype */ {
origX: 0,
origY: 0,
/**
* Constructor
* @param {Object} [options] Options object with type, coords, gradientUnits and colorStops
@ -108,6 +111,8 @@
if (options.gradientTransform) {
this.gradientTransform = options.gradientTransform;
}
this.origX = options.left;
this.orgiY = options.top;
},
/**
@ -149,7 +154,7 @@
*/
toSVG: function(object, normalize) {
var coords = fabric.util.object.clone(this.coords),
markup;
markup, commonMarkup;
// colorStops must be sorted ascending
this.colorStops.sort(function(a, b) {
@ -165,18 +170,21 @@
else if (this.gradientUnits === 'objectBoundingBox') {
_convertValuesToPercentUnits(object, coords);
}
commonMarkup = 'id="SVGID_' + this.id +
'" gradientUnits="' + this.gradientUnits + '"';
if (this.gradientTransform) {
commonMarkup += ' gradientTransform="matrix(' + this.gradientTransform.join(' ') + ')" ';
}
if (this.type === 'linear') {
markup = [
//jscs:disable validateIndentation
'<linearGradient ',
'id="SVGID_', this.id,
'" gradientUnits="', this.gradientUnits,
'" x1="', coords.x1,
commonMarkup,
' x1="', coords.x1,
'" y1="', coords.y1,
'" x2="', coords.x2,
'" y2="', coords.y2,
'">'
'">\n'
//jscs:enable validateIndentation
];
}
@ -184,14 +192,13 @@
markup = [
//jscs:disable validateIndentation
'<radialGradient ',
'id="SVGID_', this.id,
'" gradientUnits="', this.gradientUnits,
'" cx="', coords.x2,
commonMarkup,
' cx="', coords.x2,
'" cy="', coords.y2,
'" r="', coords.r2,
'" fx="', coords.x1,
'" fy="', coords.y1,
'">'
'">\n'
//jscs:enable validateIndentation
];
}
@ -202,13 +209,13 @@
'<stop ',
'offset="', (this.colorStops[i].offset * 100) + '%',
'" style="stop-color:', this.colorStops[i].color,
(this.colorStops[i].opacity ? ';stop-opacity: ' + this.colorStops[i].opacity : ';'),
'"/>'
(this.colorStops[i].opacity != null ? ';stop-opacity: ' + this.colorStops[i].opacity : ';'),
'"/>\n'
//jscs:enable validateIndentation
);
}
markup.push((this.type === 'linear' ? '</linearGradient>' : '</radialGradient>'));
markup.push((this.type === 'linear' ? '</linearGradient>\n' : '</radialGradient>\n'));
return markup.join('');
},
@ -355,23 +362,12 @@
if (typeof options[prop] === 'string' && /^\d+%$/.test(options[prop])) {
var percents = parseFloat(options[prop], 10);
if (prop === 'x1' || prop === 'x2' || prop === 'r2') {
options[prop] = fabric.util.toFixed(object.width * percents / 100, 2);
options[prop] = fabric.util.toFixed(object.width * percents / 100, 2) + object.left;
}
else if (prop === 'y1' || prop === 'y2') {
options[prop] = fabric.util.toFixed(object.height * percents / 100, 2);
options[prop] = fabric.util.toFixed(object.height * percents / 100, 2) + object.top;
}
}
normalize(options, prop, object);
}
}
// normalize rendering point (should be from top/left corner rather than center of the shape)
function normalize(options, prop, object) {
if (prop === 'x1' || prop === 'x2') {
options[prop] -= fabric.util.toFixed(object.width / 2, 2);
}
else if (prop === 'y1' || prop === 'y2') {
options[prop] -= fabric.util.toFixed(object.height / 2, 2);
}
}
@ -381,15 +377,12 @@
*/
function _convertValuesToPercentUnits(object, options) {
for (var prop in options) {
normalize(options, prop, object);
// convert to percent units
//convert to percent units
if (prop === 'x1' || prop === 'x2' || prop === 'r2') {
options[prop] = fabric.util.toFixed(options[prop] / object.width * 100, 2) + '%';
options[prop] = fabric.util.toFixed((options[prop] - object.origX) / object.width * 100, 2) + '%';
}
else if (prop === 'y1' || prop === 'y2') {
options[prop] = fabric.util.toFixed(options[prop] / object.height * 100, 2) + '%';
options[prop] = fabric.util.toFixed((options[prop] - object.origY) / object.height * 100, 2) + '%';
}
}
}