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

Gradient color stops can now be parsed from style attribute of <stop> elements (which are children of <gradient> elements). Fix gradient rendering logic, where rendering point would originate from center of the shape, instead of a proper top/left corner. Add 2 more example gradients to the demo page.

Browse source
This commit is contained in:
kangax 2011-01-20 01:42:00 -05:00
parent 0570d6f825
commit 6e8810d791
6 changed files with 137 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
dist/all.js vendored
View file

@ -2936,6 +2936,25 @@ fabric.util.animate = animate;
})(this);
(function() {
function getColorStopFromStyle(el) {
var style = el.getAttribute('style');
if (style) {
var keyValuePairs = style.split(/\s*;\s*/);
for (var i = keyValuePairs.length; i--; ) {
var split = keyValuePairs[i].split(/\s*:\s*/),
key = split[0].trim(),
value = split[1].trim();
if (key === 'stop-color') {
return value;
}
}
}
}
/** @namespace */
fabric.Gradient = {
@ -2957,7 +2976,7 @@ fabric.util.animate = animate;
for (var position in colorStops) {
var colorValue = colorStops[position];
gradient.addColorStop(position, colorValue);
gradient.addColorStop(parseFloat(position), colorValue);
}
return gradient;
},
@ -2977,17 +2996,26 @@ fabric.util.animate = animate;
* <stop offset="100%" stop-color="black"/>
* </linearGradient>
*
* OR
*
* <linearGradient id="grad1">
* <stop offset="0%" style="stop-color:rgb(255,255,255)"/>
* <stop offset="100%" style="stop-color:rgb(0,0,0)"/>
* </linearGradient>
*
*/
var colorStopEls = el.getElementsByTagName('stop'),
el,
offset,
colorStops = { };
colorStops = { },
colorStopFromStyle;
for (var i = colorStopEls.length; i--; ) {
el = colorStopEls[i];
offset = parseInt(el.getAttribute('offset'), 10) / 100;
colorStops[offset] = el.getAttribute('stop-color');
debugger;
colorStops[offset] = getColorStopFromStyle(el) || el.getAttribute('stop-color');
}
var coords = {
@ -3040,6 +3068,12 @@ fabric.util.animate = animate;
options[prop] = object.height * percents / 100;
}
}
if (prop === 'x1' || prop === 'x2') {
options[prop] -= object.width / 2;
}
else if (prop === 'y1' || prop === 'y2') {
options[prop] -= object.height / 2;
}
}
}

55
src/gradient.js
View file

@ -1,5 +1,24 @@
(function() {
function getColorStopFromStyle(el) {
var style = el.getAttribute('style');
if (style) {
var keyValuePairs = style.split(/\s*;\s*/);
for (var i = keyValuePairs.length; i--; ) {
var split = keyValuePairs[i].split(/\s*:\s*/),
key = split[0].trim(),
value = split[1].trim();
if (key === 'stop-color') {
return value;
}
}
}
}
/** @namespace */
fabric.Gradient = {
@ -21,7 +40,7 @@
for (var position in colorStops) {
var colorValue = colorStops[position];
gradient.addColorStop(position, colorValue);
gradient.addColorStop(parseFloat(position), colorValue);
}
return gradient;
},
@ -33,25 +52,34 @@
*/
fromElement: function(el, ctx, instance) {
/**
/**
* @example:
*
* <linearGradient id="grad1">
* <stop offset="0%" stop-color="white"/>
* <stop offset="100%" stop-color="black"/>
* <linearGradient id="grad1">
* <stop offset="0%" stop-color="white"/>
* <stop offset="100%" stop-color="black"/>
* </linearGradient>
*
* OR
*
* <linearGradient id="grad1">
* <stop offset="0%" style="stop-color:rgb(255,255,255)"/>
* <stop offset="100%" style="stop-color:rgb(0,0,0)"/>
* </linearGradient>
*
*/
var colorStopEls = el.getElementsByTagName('stop'),
el,
el,
offset,
colorStops = { };
colorStops = { },
colorStopFromStyle;
for (var i = colorStopEls.length; i--; ) {
el = colorStopEls[i];
offset = parseInt(el.getAttribute('offset'), 10) / 100;
colorStops[offset] = el.getAttribute('stop-color');
debugger;
colorStops[offset] = getColorStopFromStyle(el) || el.getAttribute('stop-color');
}
var coords = {
@ -104,6 +132,13 @@
options[prop] = object.height * percents / 100;
}
}
// normalize rendering point (should be from top/left corner rather than center of the shape)
if (prop === 'x1' || prop === 'x2') {
options[prop] -= object.width / 2;
}
else if (prop === 'y1' || prop === 'y2') {
options[prop] -= object.height / 2;
}
}
}

20
test/demo/assets/74.svg Normal file
View file

@ -0,0 +1,20 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 567 B

19
test/demo/assets/75.svg Normal file
View file

@ -0,0 +1,19 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="red_black" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#red_black)"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 562 B

16
test/demo/demo.js
View file

@ -120,16 +120,24 @@
var id = element.id, match;
if (match = /\d+$/.exec(id)) {
loadSVGFromURL('assets/' + match[0] + '.svg', function(objects, options) {
var pathGroup = new fabric.PathGroup(objects, options);
pathGroup
var loadedObject;
if (objects.length > 1) {
loadedObject = new fabric.PathGroup(objects, options);
}
else {
loadedObject = objects[0];
}
loadedObject
.set('left', left)
.set('top', top)
.set('angle', angle)
.set('fill', '#' + getRandomColor())
//.set('fill', '#' + getRandomColor())
.scaleToWidth(300)
.setCoords();
canvas.add(pathGroup);
canvas.add(loadedObject);
canvas.calcOffset();
});
}

6
test/demo/index.html
View file

@ -57,8 +57,9 @@
<!-- <li><button class="shape" id="shape68"><strong>xxx</strong> paths</button></li> -->
<!-- <li><button class="shape" id="shape70"><strong>xxx</strong> paths</button></li> -->
<!-- <li><button class="shape" id="shape73"><strong>xxx</strong> paths</button></li> -->
<li><button class="shape" id="shape54"><strong>1</strong> path</button></li>
<li><button class="shape" id="shape66"><strong>1</strong> path</button></li>
<li><button class="shape" id="shape54">Image (<strong>1</strong> path)</button></li>
<li><button class="shape" id="shape74">Gradient (<strong>1</strong> path)</button></li>
<li><button class="shape" id="shape66">Gradient (<strong>1</strong> path)</button></li>
<li><button class="shape" id="shape25"><strong>36</strong> paths</button></li>
<li><button class="shape" id="shape36"><strong>41</strong> paths</button></li>
<li><button class="shape" id="shape58"><strong>54</strong> paths</button></li>
@ -115,6 +116,7 @@
<li><button class="shape" id="shape44"><strong>22375</strong> paths</button></li>
<li><button class="shape" id="shape72"><strong>29303</strong> paths</button></li>
<li><button class="shape" id="shape48"><strong>41787</strong> paths</button></li>
<li><button class="shape" id="shape75"><strong>xxx</strong> paths</button></li>
</ul>
<ul>