Hopiu/fabric.js
1
0
Fork 0
mirror of https://github.com/Hopiu/fabric.js.git synced 2026-05-18 10:31:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

gradientInfinity (#3082)

Browse source 
* gradientInfinity
* updated tests
This commit is contained in:
Andrea Bogazzi 2016-07-17 10:31:51 +02:00 committed by GitHub
parent 72a6c273bf
commit 6601af9340
2 changed files with 179 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/gradient.class.js
View file

@ -332,11 +332,18 @@
*/
var colorStopEls = el.getElementsByTagName('stop'),
type = (el.nodeName === 'linearGradient' ? 'linear' : 'radial'),
type,
gradientUnits = el.getAttribute('gradientUnits') || 'objectBoundingBox',
gradientTransform = el.getAttribute('gradientTransform'),
colorStops = [],
coords = { }, ellipseMatrix;
coords, ellipseMatrix;
if (el.nodeName === 'linearGradient' || el.nodeName === 'LINEARGRADIENT') {
type = 'linear';
}
else {
type = 'radial';
}
if (type === 'linear') {
coords = getLinearCoords(el);
@ -386,6 +393,12 @@
function _convertPercentUnitsToValues(object, options, gradientUnits) {
var propValue, addFactor = 0, multFactor = 1, ellipseMatrix = '';
for (var prop in options) {
if (options[prop] === 'Infinity') {
options[prop] = 1;
}
else if (options[prop] === '-Infinity') {
options[prop] = 0;
}
propValue = parseFloat(options[prop], 10);
if (typeof options[prop] === 'string' && /^\d+%$/.test(options[prop])) {
multFactor = 0.01;

192
test/unit/gradient.js
View file

@ -160,13 +160,50 @@
ok(gradient instanceof fabric.Gradient);
// TODO: need to double check these values
equal(gradient.coords.x1, 0);
equal(gradient.coords.y1, 0);
equal(gradient.coords.x2, 100);
equal(gradient.coords.y2, 0);
equal(gradient.coords.x1, 50);
equal(gradient.coords.y1, 50);
equal(gradient.colorStops[0].offset, 1);
equal(gradient.colorStops[1].offset, 0);
//equal(gradient.coords.x2, 100);
//equal(gradient.coords.y2, 100);
equal(gradient.colorStops[0].color, 'rgb(0,0,0)');
equal(gradient.colorStops[1].color, 'rgb(255,255,255)');
equal(gradient.colorStops[0].opacity, 0);
});
test('fromElement linearGradient with Infinity', function() {
ok(typeof fabric.Gradient.fromElement == 'function');
var element = fabric.document.createElement('linearGradient');
var stop1 = fabric.document.createElement('stop');
var stop2 = fabric.document.createElement('stop');
stop1.setAttribute('offset', '0%');
stop1.setAttribute('stop-color', 'white');
stop2.setAttribute('offset', '100%');
stop2.setAttribute('stop-color', 'black');
stop2.setAttribute('stop-opacity', '0');
element.setAttribute('x1', '-Infinity');
element.setAttribute('x2', 'Infinity');
element.setAttribute('y1', 'Infinity');
element.setAttribute('y2', '-Infinity');
element.appendChild(stop1);
element.appendChild(stop2);
var object = new fabric.Object({ width: 100, height: 100, top: 0, left: 0 });
var gradient = fabric.Gradient.fromElement(element, object);
ok(gradient instanceof fabric.Gradient);
equal(gradient.coords.x1, 0);
equal(gradient.coords.y1, 100);
equal(gradient.coords.x2, 100);
equal(gradient.coords.y2, 0);
equal(gradient.colorStops[0].offset, 1);
equal(gradient.colorStops[1].offset, 0);
@ -202,6 +239,117 @@
equal(gradient.colorStops[1].offset, 0);
});
test('fromElement with x1,x2,y1,2 linear', function() {
ok(typeof fabric.Gradient.fromElement == 'function');
var element = fabric.document.createElement('linearGradient');
element.setAttribute('x1', '30%');
element.setAttribute('x2', '20%');
element.setAttribute('y1', '0.1');
element.setAttribute('y2', 'Infinity');
var object = new fabric.Object({ width: 200, height: 200 });
var gradient = fabric.Gradient.fromElement(element, object);
equal(gradient.coords.x1, 60);
equal(gradient.coords.y1, 20);
equal(gradient.coords.x2, 40);
equal(gradient.coords.y2, 200);
object = new fabric.Object({ width: 200, height: 200, top: 50, left: 10 });
gradient = fabric.Gradient.fromElement(element, object);
equal(gradient.coords.x1, 70);
equal(gradient.coords.y1, 70);
equal(gradient.coords.x2, 50);
equal(gradient.coords.y2, 250);
});
test('fromElement with x1,x2,y1,2 radial', function() {
ok(typeof fabric.Gradient.fromElement == 'function');
var element = fabric.document.createElement('radialGradient');
element.setAttribute('fx', '30%');
element.setAttribute('fy', '20%');
element.setAttribute('cx', '0.1');
element.setAttribute('cy', '1');
element.setAttribute('r', '100%');
var object = new fabric.Object({ width: 200, height: 200 });
var gradient = fabric.Gradient.fromElement(element, object);
equal(gradient.coords.x1, 60, 'should change with width height');
equal(gradient.coords.y1, 40, 'should change with width height');
equal(gradient.coords.x2, 20, 'should change with width height');
equal(gradient.coords.y2, 200, 'should change with width height');
equal(gradient.coords.r1, 0, 'should change with width height');
equal(gradient.coords.r2, 200, 'should change with width height');
object = new fabric.Object({ width: 200, height: 200, top: 10, left: 10 });
gradient = fabric.Gradient.fromElement(element, object);
equal(gradient.coords.x1, 70, 'should change with top left');
equal(gradient.coords.y1, 50, 'should change with top left');
equal(gradient.coords.x2, 30, 'should change with top left');
equal(gradient.coords.y2, 210, 'should change with top left');
equal(gradient.coords.r1, 10, 'should change with top left');
equal(gradient.coords.r2, 210, 'should change with top left');
});
test('fromElement with x1,x2,y1,2 radial userSpaceOnUse', function() {
ok(typeof fabric.Gradient.fromElement == 'function');
var element = fabric.document.createElement('radialGradient');
element.setAttribute('fx', '30');
element.setAttribute('fy', '20');
element.setAttribute('cx', '15');
element.setAttribute('cy', '18');
element.setAttribute('r', '100');
element.setAttribute('gradientUnits', 'userSpaceOnUse');
var object = new fabric.Object({ width: 200, height: 200 });
var gradient = fabric.Gradient.fromElement(element, object);
equal(gradient.coords.x1, 30, 'should not change with width height');
equal(gradient.coords.y1, 20, 'should not change with width height');
equal(gradient.coords.x2, 15, 'should not change with width height');
equal(gradient.coords.y2, 18, 'should not change with width height');
equal(gradient.coords.r1, 0, 'should not change with width height');
equal(gradient.coords.r2, 100, 'should not change with width height');
object = new fabric.Object({ width: 200, height: 200, top: 50, left: 60 });
gradient = fabric.Gradient.fromElement(element, object);
equal(gradient.coords.x1, 30, 'should not change with top left');
equal(gradient.coords.y1, 20, 'should not change with top left');
equal(gradient.coords.x2, 15, 'should not change with top left');
equal(gradient.coords.y2, 18, 'should not change with top left');
equal(gradient.coords.r1, 0, 'should not change with top left');
equal(gradient.coords.r2, 100, 'should not change with top left');
});
test('fromElement with x1,x2,y1,2 linear userSpaceOnUse', function() {
ok(typeof fabric.Gradient.fromElement == 'function');
var element = fabric.document.createElement('linearGradient');
element.setAttribute('x1', '30');
element.setAttribute('y1', '20');
element.setAttribute('x2', '15');
element.setAttribute('y2', '18');
element.setAttribute('gradientUnits', 'userSpaceOnUse');
var object = new fabric.Object({ width: 200, height: 200 });
var gradient = fabric.Gradient.fromElement(element, object);
equal(gradient.coords.x1, 30, 'should not change with width height');
equal(gradient.coords.y1, 20, 'should not change with width height');
equal(gradient.coords.x2, 15, 'should not change with width height');
equal(gradient.coords.y2, 18, 'should not change with width height');
object = new fabric.Object({ width: 200, height: 200, top: 40, left: 40 });
gradient = fabric.Gradient.fromElement(element, object);
equal(gradient.coords.x1, 30, 'should not change with top left');
equal(gradient.coords.y1, 20, 'should not change with top left');
equal(gradient.coords.x2, 15, 'should not change with top left');
equal(gradient.coords.y2, 18, 'should not change with top left');
});
test('fromElement radialGradient', function() {
ok(typeof fabric.Gradient.fromElement == 'function');
@ -223,13 +371,10 @@
ok(gradient instanceof fabric.Gradient);
// TODO: need to double check these values
equal(gradient.coords.x1, 50);
equal(gradient.coords.y1, 50);
//equal(gradient.coords.x2, 100);
//equal(gradient.coords.y2, 100);
equal(gradient.coords.x2, 50);
equal(gradient.coords.y2, 50);
equal(gradient.colorStops[0].offset, 1);
equal(gradient.colorStops[1].offset, 0);
@ -259,13 +404,10 @@
ok(gradient instanceof fabric.Gradient);
// TODO: need to double check these values
equal(gradient.coords.x1, 50);
equal(gradient.coords.y1, 50);
//equal(gradient.coords.x2, 100);
//equal(gradient.coords.y2, 100);
equal(gradient.coords.x2, 50);
equal(gradient.coords.y2, 50);
equal(gradient.colorStops[0].offset, 1);
equal(gradient.colorStops[1].offset, 0);
@ -311,13 +453,10 @@
ok(gradient instanceof fabric.Gradient);
// TODO: need to double check these values
equal(gradient.coords.x1, 50);
equal(gradient.coords.y1, 50);
//equal(gradient.coords.x2, 100);
//equal(gradient.coords.y2, 100);
equal(gradient.coords.x1, 0);
equal(gradient.coords.y1, 0);
equal(gradient.coords.x2, 100);
equal(gradient.coords.y2, 0);
equal(gradient.colorStops[0].offset, 1);
equal(gradient.colorStops[1].offset, 0.75);
@ -371,13 +510,10 @@
ok(gradient instanceof fabric.Gradient);
// TODO: need to double check these values
equal(gradient.coords.x1, 50);
equal(gradient.coords.y1, 50);
//equal(gradient.coords.x2, 100);
//equal(gradient.coords.y2, 100);
equal(gradient.coords.x2, 50);
equal(gradient.coords.y2, 50);
equal(gradient.colorStops[0].offset, 1);
equal(gradient.colorStops[1].offset, 0.75);
@ -395,7 +531,7 @@
equal(gradient.colorStops[3].opacity, 1);
});
test('forObject linearCradient', function() {
test('forObject linearGradient', function() {
ok(typeof fabric.Gradient.forObject == 'function');
var object = new fabric.Object({ width: 50, height: 50 });