scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-03 19:45:44 -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
// items without children, where styles would be merged.
var style = this._style,
matrix = this._matrix,
width = style.getStrokeWidth(),
join = style.getStrokeJoin(),
cap = style.getStrokeCap(),
@ -2930,10 +2931,12 @@ var Item = Base.extend(Callback, /** @lends Item# */{
ctx.lineCap = cap;
if (limit)
ctx.miterLimit = limit;
// We need to take matrix into account for gradients,
// see #toCanvasStyle()
if (fillColor)
ctx.fillStyle = fillColor.toCanvasStyle(ctx);
ctx.fillStyle = fillColor.toCanvasStyle(ctx, matrix);
if (strokeColor) {
ctx.strokeStyle = strokeColor.toCanvasStyle(ctx);
ctx.strokeStyle = strokeColor.toCanvasStyle(ctx, matrix);
var dashArray = style.getDashArray(),
dashOffset = style.getDashOffset();
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(',') + ')';
},
toCanvasStyle: function(ctx) {
toCanvasStyle: function(ctx, matrix) {
if (this._canvasStyle)
return this._canvasStyle;
// Normal colors are simply represented by their css string.
@ -791,16 +791,20 @@ var Color = Base.extend(new function() {
return this._canvasStyle = this.toCSS();
// Gradient code form here onwards
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],
stops = gradient._stops,
origin = components[1],
destination = components[2],
origin = components[1].subtract(translation),
destination = components[2].subtract(translation),
canvasGradient;
if (gradient._radial) {
var radius = destination.getDistance(origin),
highlight = components[3];
if (highlight) {
var vector = highlight.subtract(origin);
var vector = highlight.subtract(translation).subtract(origin);
if (vector.getLength() > radius)
highlight = origin.add(vector.normalize(radius - 0.1));
}