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

Clear ctx.shadowColor after ctx.fill() to avoid application to both fill and stroke.

Browse source 
Closes #314.
This commit is contained in:
Jürg Lehni 2013-10-30 00:00:04 +01:00
parent db882748b1
commit eecf68b7c3
6 changed files with 64 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
src/item/Item.js
View file

@ -420,6 +420,11 @@ var Item = Base.extend(Callback, /** @lends Item# */{
// DOCS: Item#hasStroke()
hasStroke: function() {
return this.getStyle().hasStroke();
},
// DOCS: Item#hasShadow()
hasShadow: function() {
return this.getStyle().hasShadow();
}
}, Base.each(['locked', 'visible', 'blendMode', 'opacity', 'guide'],
// Produce getter/setters for properties. We need setters because we want to
@ -3105,7 +3110,6 @@ var Item = Base.extend(Callback, /** @lends Item# */{
// items without children, where styles would be merged.
var style = this._style,
matrix = this._matrix,
strokeWidth = style.getStrokeWidth(),
fillColor = style.getFillColor(),
strokeColor = style.getStrokeColor(),
shadowColor = style.getShadowColor();
@ -3113,36 +3117,44 @@ var Item = Base.extend(Callback, /** @lends Item# */{
// see #toCanvasStyle()
if (fillColor)
ctx.fillStyle = fillColor.toCanvasStyle(ctx, matrix);
if (strokeColor && strokeWidth > 0) {
ctx.strokeStyle = strokeColor.toCanvasStyle(ctx, matrix);
ctx.lineWidth = strokeWidth;
var strokeJoin = style.getStrokeJoin(),
strokeCap = style.getStrokeCap(),
miterLimit = style.getMiterLimit(),
dashArray = style.getDashArray(),
dashOffset = style.getDashOffset();
if (strokeJoin)
ctx.lineJoin = strokeJoin;
if (strokeCap)
ctx.lineCap = strokeCap;
if (miterLimit)
ctx.miterLimit = miterLimit;
if (paper.support.nativeDash && dashArray && dashArray.length) {
if ('setLineDash' in ctx) {
ctx.setLineDash(dashArray);
ctx.lineDashOffset = dashOffset;
} else {
ctx.mozDash = dashArray;
ctx.mozDashOffset = dashOffset;
if (strokeColor) {
var strokeWidth = style.getStrokeWidth();
if (strokeWidth > 0) {
ctx.strokeStyle = strokeColor.toCanvasStyle(ctx, matrix);
ctx.lineWidth = strokeWidth;
var strokeJoin = style.getStrokeJoin(),
strokeCap = style.getStrokeCap(),
miterLimit = style.getMiterLimit();
if (strokeJoin)
ctx.lineJoin = strokeJoin;
if (strokeCap)
ctx.lineCap = strokeCap;
if (miterLimit)
ctx.miterLimit = miterLimit;
if (paper.support.nativeDash) {
var dashArray = style.getDashArray(),
dashOffset = style.getDashOffset();
if (dashArray && dashArray.length) {
if ('setLineDash' in ctx) {
ctx.setLineDash(dashArray);
ctx.lineDashOffset = dashOffset;
} else {
ctx.mozDash = dashArray;
ctx.mozDashOffset = dashOffset;
}
}
}
}
}
if (shadowColor) {
ctx.shadowColor = shadowColor.toCanvasStyle(ctx);
ctx.shadowBlur = style.getShadowBlur();
var offset = this.getShadowOffset();
ctx.shadowOffsetX = offset.x;
ctx.shadowOffsetY = offset.y;
var shadowBlur = style.getShadowBlur();
if (shadowBlur > 0) {
ctx.shadowColor = shadowColor.toCanvasStyle(ctx);
ctx.shadowBlur = shadowBlur;
var offset = this.getShadowOffset();
ctx.shadowOffsetX = offset.x;
ctx.shadowOffsetY = offset.y;
}
}
},

4
src/item/Shape.js
View file

@ -204,8 +204,10 @@ var Shape = Item.extend(/** @lends Shape# */{
}
if (!clip && (hasFill || hasStroke)) {
this._setStyles(ctx);
if (hasFill)
if (hasFill) {
ctx.fill(style.getWindingRule());
ctx.shadowColor = 'rgba(0,0,0,0)';
}
if (hasStroke)
ctx.stroke();
}

4
src/path/CompoundPath.js
View file

@ -225,8 +225,10 @@ var CompoundPath = PathItem.extend(/** @lends CompoundPath# */{
if (!param.clip) {
this._setStyles(ctx);
var style = this._style;
if (style.hasFill())
if (style.hasFill()) {
ctx.fill(style.getWindingRule());
ctx.shadowColor = 'rgba(0,0,0,0)';
}
if (style.hasStroke())
ctx.stroke();
}

7
src/path/Path.js
View file

@ -2024,8 +2024,13 @@ var Path = PathItem.extend(/** @lends Path# */{
// If the path is part of a compound path or doesn't have a fill
// or stroke, there is no need to continue.
this._setStyles(ctx);
if (hasFill)
// If shadowColor is defined, clear it after fill, so it won't
// be applied to both fill and stroke. If the path is only
// stroked, we don't have to clear it.
if (hasFill) {
ctx.fill(style.getWindingRule());
ctx.shadowColor = 'rgba(0,0,0,0)';
}
if (hasStroke) {
if (dashLength) {
// We cannot use the path created by drawSegments above

5
src/style/Style.js
View file

@ -252,6 +252,11 @@ var Style = Base.extend(new function() {
return !!this.getStrokeColor() && this.getStrokeWidth() > 0;
},
// DOCS: Style#hasShadow()
hasShadow: function() {
return !!this.getShadowColor() && this.getShadowBlur() > 0;
},
// Overrides
getLeading: function getLeading() {

10
src/text/PointText.js
View file

@ -84,13 +84,19 @@ var PointText = TextItem.extend(/** @lends PointText# */{
this._setStyles(ctx);
var style = this._style,
lines = this._lines,
leading = style.getLeading();
leading = style.getLeading(),
shadowColor = ctx.shadowColor;
ctx.font = style.getFontStyle();
ctx.textAlign = style.getJustification();
for (var i = 0, l = lines.length; i < l; i++) {
// See Path._draw() for explanation about ctx.shadowColor
ctx.shadowColor = shadowColor;
var line = lines[i];
if (style.hasFill())
if (style.hasFill()) {
ctx.fillText(line, 0, 0);
ctx.shadowColor = 'rgba(0,0,0,0)';
}
if (style.hasStroke())
ctx.strokeText(line, 0, 0);
ctx.translate(0, leading);