scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-05 20:32:00 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Take Item#matrix into account when drawing gradients.

Browse source 
Closes #267.
This commit is contained in:
Jürg Lehni 2013-08-14 11:27:04 -07:00
parent 720dd1b35d
commit 1a1c2674fd
2 changed files with 13 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/item/Item.js
View file

@ -2915,6 +2915,7 @@ var Item = Base.extend(Callback, /** @lends Item# */{
// We can access internal properties since we're only using this on // We can access internal properties since we're only using this on
// items without children, where styles would be merged. // items without children, where styles would be merged.
var style = this._style, var style = this._style,
matrix = this._matrix,
width = style.getStrokeWidth(), width = style.getStrokeWidth(),
join = style.getStrokeJoin(), join = style.getStrokeJoin(),
cap = style.getStrokeCap(), cap = style.getStrokeCap(),
@ -2930,10 +2931,12 @@ var Item = Base.extend(Callback, /** @lends Item# */{
ctx.lineCap = cap; ctx.lineCap = cap;
if (limit) if (limit)
ctx.miterLimit = limit; ctx.miterLimit = limit;
// We need to take matrix into account for gradients,
// see #toCanvasStyle()
if (fillColor) if (fillColor)
ctx.fillStyle = fillColor.toCanvasStyle(ctx); ctx.fillStyle = fillColor.toCanvasStyle(ctx, matrix);
if (strokeColor) { if (strokeColor) {
ctx.strokeStyle = strokeColor.toCanvasStyle(ctx); ctx.strokeStyle = strokeColor.toCanvasStyle(ctx, matrix);
var dashArray = style.getDashArray(), var dashArray = style.getDashArray(),
dashOffset = style.getDashOffset(); dashOffset = style.getDashOffset();
if (paper.support.nativeDash && dashArray && dashArray.length) { if (paper.support.nativeDash && dashArray && dashArray.length) {

12
src/style/Color.js
View file

@ -783,7 +783,7 @@ var Color = Base.extend(new function() {
+ components.join(',') + ')'; + components.join(',') + ')';
}, },
toCanvasStyle: function(ctx) { toCanvasStyle: function(ctx, matrix) {
if (this._canvasStyle) if (this._canvasStyle)
return this._canvasStyle; return this._canvasStyle;
// Normal colors are simply represented by their css string. // Normal colors are simply represented by their css string.
@ -791,16 +791,20 @@ var Color = Base.extend(new function() {
return this._canvasStyle = this.toCSS(); return this._canvasStyle = this.toCSS();
// Gradient code form here onwards // Gradient code form here onwards
var components = this._components, var components = this._components,
// We need to counteract the matrix translation. The other
// transformations will be handled by the matrix which was
// applied to ctx.
translation = matrix ? matrix.getTranslation() : new Point(),
gradient = components[0], gradient = components[0],
stops = gradient._stops, stops = gradient._stops,
origin = components[1], origin = components[1].subtract(translation),
destination = components[2], destination = components[2].subtract(translation),
canvasGradient; canvasGradient;
if (gradient._radial) { if (gradient._radial) {
var radius = destination.getDistance(origin), var radius = destination.getDistance(origin),
highlight = components[3]; highlight = components[3];
if (highlight) { if (highlight) {
var vector = highlight.subtract(origin); var vector = highlight.subtract(translation).subtract(origin);
if (vector.getLength() > radius) if (vector.getLength() > radius)
highlight = origin.add(vector.normalize(radius - 0.1)); highlight = origin.add(vector.normalize(radius - 0.1));
} }