scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2024-12-29 09:22:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix linear gradient orientation when shape substitution is applied.

Browse source
This commit is contained in:
Jürg Lehni 2013-02-12 17:22:31 -08:00
parent f554bdce2a
commit 7df4338ef5
2 changed files with 37 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
examples/SVG Export/Gradients.html
View file

@ -6,18 +6,37 @@
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
var path = new Path.Circle(view.center, view.bounds.height * 0.4);
var gradient = new Gradient([ new RgbColor(1, 1, 0, 0), 'red', 'black'], 'radial');
var from = path.position;
var to = path.bounds.rightCenter;
var gradientColor = new GradientColor(gradient, from, to);
path.fillColor = gradientColor;
path.strokeColor = 'black';
var radial = new Gradient([ new RgbColor(1, 1, 0, 0), 'red', 'black'], 'radial');
var linear = new Gradient([ new RgbColor(1, 1, 0, 0), 'red', 'black'], 'linear');
var radius = view.bounds.width * 0.4,
from = new Point(view.center.x),
to = from + [radius, 0];
var circle = new Path.Circle({
center: from,
radius: radius,
fillColor: new GradientColor(radial, from, to),
strokeColor: 'black'
});
var from = view.bounds.leftCenter,
to = view.bounds.bottomRight;
var rect = new Path.Rectangle({
from: from,
to: to,
fillColor: new GradientColor(linear, from, to),
strokeColor: 'black'
});
rect.rotate(45).scale(0.7);
document.getElementById('svg').appendChild(project.exportSvg());
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<svg id="svg" width="500" height="500"></svg>
<canvas id="canvas" width="300" height="600"></canvas>
<svg id="svg" width="300" height="600"></svg>
</body>
</html>

14
src/svg/SvgExport.js
View file

@ -344,6 +344,8 @@ new function() {
if (angle) {
attrs.transform = 'rotate(' + formatFloat(angle) + ','
+ formatPoint(center) + ')';
// Tell applyStyle() that to transform the gradient the other way
item._gradientMatrix = new Matrix().rotate(-angle, center);
}
return createElement(type, attrs);
}
@ -379,7 +381,7 @@ new function() {
return createElement('use', attrs);
}
function exportGradient(color) {
function exportGradient(color, item) {
// NOTE: As long as the fillTransform attribute is not implemented,
// we need to create a separate gradient object for each gradient,
// even when they share the same gradient defintion.
@ -388,9 +390,10 @@ new function() {
var gradient = color.gradient,
gradientNode = getDefinition(color);
if (!gradientNode) {
var origin = color._origin,
destination = color._destination,
highlight = color._hilite,
var matrix = item._gradientMatrix,
origin = color._origin.transform(matrix),
destination = color._destination.transform(matrix),
highlight = color._hilite && color._hilite.transform(matrix),
attrs;
if (gradient.type == 'radial') {
attrs = {
@ -464,7 +467,7 @@ new function() {
? 'none'
: entry.type === 'color'
? value.gradient
? exportGradient(value)
? exportGradient(value, item)
: value.toCss(true) // false for noAlpha, see above
: entry.type === 'array'
? value.join(',')
@ -480,6 +483,7 @@ new function() {
if (item._visibility != null && !item._visibility)
attrs.visibility = 'hidden';
delete item._gradientMatrix; // see exportPath()
return setAttributes(node, attrs);
}