scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-01 02:38:43 -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"> <link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script> <script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
var path = new Path.Circle(view.center, view.bounds.height * 0.4); var radial = new Gradient([ new RgbColor(1, 1, 0, 0), 'red', 'black'], 'radial');
var gradient = 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 from = path.position;
var to = path.bounds.rightCenter; var radius = view.bounds.width * 0.4,
var gradientColor = new GradientColor(gradient, from, to); from = new Point(view.center.x),
path.fillColor = gradientColor; to = from + [radius, 0];
path.strokeColor = 'black';
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()); document.getElementById('svg').appendChild(project.exportSvg());
</script> </script>
</head> </head>
<body> <body>
<canvas id="canvas" width="500" height="500"></canvas> <canvas id="canvas" width="300" height="600"></canvas>
<svg id="svg" width="500" height="500"></svg> <svg id="svg" width="300" height="600"></svg>
</body> </body>
</html> </html>

14
src/svg/SvgExport.js
View file

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