From c43752dc3eb6761340a9b8a2495f033341fc9ee8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BCrg=20Lehni?= Date: Tue, 29 Oct 2013 20:05:39 +0100 Subject: [PATCH] Use #hasFill() and #hasStroke() more broadly and avoid drawing strokes when strokeWidth is set to 0. --- src/item/Item.js | 32 +++++++++++++++----------------- src/item/Shape.js | 12 ++++++------ src/path/CompoundPath.js | 4 ++-- src/path/Path.js | 16 ++++++++-------- src/style/Style.js | 12 ++++++++++++ src/text/PointText.js | 4 ++-- 6 files changed, 45 insertions(+), 35 deletions(-) diff --git a/src/item/Item.js b/src/item/Item.js index 8f47b3dd..a4d48b36 100644 --- a/src/item/Item.js +++ b/src/item/Item.js @@ -413,12 +413,11 @@ var Item = Base.extend(Callback, /** @lends Item# */{ }, hasFill: function() { - return !!this.getStyle().getFillColor(); + return this.getStyle().hasFill(); }, hasStroke: function() { - var style = this.getStyle(); - return !!style.getStrokeColor() && style.getStrokeWidth() > 0; + return this.getStyle().hasStroke(); } }, Base.each(['locked', 'visible', 'blendMode', 'opacity', 'guide'], // Produce getter/setters for properties. We need setters because we want to @@ -3104,29 +3103,28 @@ var Item = Base.extend(Callback, /** @lends Item# */{ // items without children, where styles would be merged. var style = this._style, matrix = this._matrix, - width = style.getStrokeWidth(), - join = style.getStrokeJoin(), - cap = style.getStrokeCap(), - limit = style.getMiterLimit(), + strokeWidth = style.getStrokeWidth(), fillColor = style.getFillColor(), strokeColor = style.getStrokeColor(), shadowColor = style.getShadowColor(); - if (width != null) - ctx.lineWidth = width; - if (join) - ctx.lineJoin = join; - if (cap) - 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, matrix); - if (strokeColor) { + if (strokeColor && strokeWidth > 0) { ctx.strokeStyle = strokeColor.toCanvasStyle(ctx, matrix); - var dashArray = style.getDashArray(), + 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); diff --git a/src/item/Shape.js b/src/item/Shape.js index 52c75cec..c3d3dcef 100644 --- a/src/item/Shape.js +++ b/src/item/Shape.js @@ -152,10 +152,10 @@ var Shape = Item.extend(/** @lends Shape# */{ _draw: function(ctx, param) { var style = this._style, - fillColor = style.getFillColor(), - strokeColor = style.getStrokeColor(), + hasFill = style.hasFill(), + hasStroke = style.hasStroke(), clip = param.clip; - if (fillColor || strokeColor || clip) { + if (hasFill || hasStroke || clip) { var radius = this._radius, shape = this._shape; ctx.beginPath(); @@ -202,11 +202,11 @@ var Shape = Item.extend(/** @lends Shape# */{ } ctx.closePath(); } - if (!clip && (fillColor || strokeColor)) { + if (!clip && (hasFill || hasStroke)) { this._setStyles(ctx); - if (fillColor) + if (hasFill) ctx.fill(style.getWindingRule()); - if (strokeColor) + if (hasStroke) ctx.stroke(); } }, diff --git a/src/path/CompoundPath.js b/src/path/CompoundPath.js index 87029c9e..690cf8b7 100644 --- a/src/path/CompoundPath.js +++ b/src/path/CompoundPath.js @@ -225,9 +225,9 @@ var CompoundPath = PathItem.extend(/** @lends CompoundPath# */{ if (!param.clip) { this._setStyles(ctx); var style = this._style; - if (style.getFillColor()) + if (style.hasFill()) ctx.fill(style.getWindingRule()); - if (style.getStrokeColor()) + if (style.hasStroke()) ctx.stroke(); } } diff --git a/src/path/Path.js b/src/path/Path.js index aa27556b..606b1b23 100644 --- a/src/path/Path.js +++ b/src/path/Path.js @@ -1999,11 +1999,11 @@ var Path = PathItem.extend(/** @lends Path# */{ ctx.beginPath(); var style = this.getStyle(), - fillColor = style.getFillColor(), - strokeColor = style.getStrokeColor(), + hasFill = style.hasFill(), + hasStroke = style.hasStroke(), dashArray = style.getDashArray(), // dashLength is only set if we can't draw dashes natively - dashLength = !paper.support.nativeDash && strokeColor + dashLength = !paper.support.nativeDash && hasStroke && dashArray && dashArray.length; function getOffset(i) { @@ -2014,19 +2014,19 @@ var Path = PathItem.extend(/** @lends Path# */{ // Prepare the canvas path if we have any situation that requires it // to be defined. - if (fillColor || strokeColor && !dashLength || compound || clip) + if (hasFill || hasStroke && !dashLength || compound || clip) drawSegments(ctx, this); if (this._closed) ctx.closePath(); - if (!clip && !compound && (fillColor || strokeColor)) { + if (!clip && !compound && (hasFill || hasStroke)) { // 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 (fillColor) + if (hasFill) ctx.fill(style.getWindingRule()); - if (strokeColor) { + if (hasStroke) { if (dashLength) { // We cannot use the path created by drawSegments above // Use CurveFlatteners to draw dashed paths: @@ -2517,7 +2517,7 @@ statics: { } // TODO: Find a way to reuse 'bounds' cache instead? - if (!style.getStrokeColor() || !style.getStrokeWidth()) + if (!style.hasStroke()) return Path.getBounds(segments, closed, style, matrix); var length = segments.length - (closed ? 0 : 1), radius = style.getStrokeWidth() / 2, diff --git a/src/style/Style.js b/src/style/Style.js index 05b836f6..d4d3f4ad 100644 --- a/src/style/Style.js +++ b/src/style/Style.js @@ -242,6 +242,18 @@ var Style = Base.extend(new function() { || false; }, + // DOCS: Style#hasFill() + hasFill: function() { + return !!this.getFillColor(); + }, + + // DOCS: Style#hasStroke() + hasStroke: function() { + return !!this.getStrokeColor() && this.getStrokeWidth() > 0; + }, + + // Overrides + getLeading: function getLeading() { // Override leading to return fontSize * 1.2 by default. var leading = getLeading.base.call(this); diff --git a/src/text/PointText.js b/src/text/PointText.js index ccfb6ec0..27ed92e8 100644 --- a/src/text/PointText.js +++ b/src/text/PointText.js @@ -89,9 +89,9 @@ var PointText = TextItem.extend(/** @lends PointText# */{ ctx.textAlign = style.getJustification(); for (var i = 0, l = lines.length; i < l; i++) { var line = lines[i]; - if (style.getFillColor()) + if (style.hasFill()) ctx.fillText(line, 0, 0); - if (style.getStrokeColor()) + if (style.hasStroke()) ctx.strokeText(line, 0, 0); ctx.translate(0, leading); }