From e5290c3f47665e806e092195903dbc6dc9aa2c23 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BCrg=20Lehni?= <juerg@scratchdisk.com>
Date: Sat, 4 Jun 2011 15:28:06 +0100
Subject: [PATCH] More work on Path#draw().

---
 src/item/Group.js  |   1 +
 src/item/Raster.js |   6 +--
 src/path/Path.js   | 107 ++++++++++++++++++++++++---------------------
 3 files changed, 60 insertions(+), 54 deletions(-)

diff --git a/src/item/Group.js b/src/item/Group.js
index ae689d9c..eb16ba08 100644
--- a/src/item/Group.js
+++ b/src/item/Group.js
@@ -104,6 +104,7 @@ var Group = this.Group = Item.extend({
 	draw: function(ctx, param) {
 		for (var i = 0, l = this._children.length; i < l; i++) {
 			Item.draw(this._children[i], ctx, param);
+			// TODO: Shouldn't clipping paths not be filled / stroked?
 			if (this._clipped && i == 0)
 				ctx.clip();
 		}
diff --git a/src/item/Raster.js b/src/item/Raster.js
index bb8cc9f7..08e723d6 100644
--- a/src/item/Raster.js
+++ b/src/item/Raster.js
@@ -246,10 +246,8 @@ var Raster = this.Raster = Item.extend({
 		ctx.scale(width / bounds.width, height / bounds.height);
 		ctx.translate(-bounds.x, -bounds.y);
 		// If a path was passed, draw it as a clipping mask:
-		if (path) {
-			path.draw(ctx, { ignoreStyle: true });
-			ctx.clip();
-		}
+		if (path)
+			path.draw(ctx, { clip: true });
 		// Now draw the image clipped into it.
 		this.matrix.applyToContext(ctx);
 		ctx.drawImage(this._canvas || this._image,
diff --git a/src/path/Path.js b/src/path/Path.js
index ce6f200f..6304e777 100644
--- a/src/path/Path.js
+++ b/src/path/Path.js
@@ -715,71 +715,78 @@ var Path = this.Path = PathItem.extend({
 			ctx.fill();
 		}
 	}
-	
+
+	function drawSegments(ctx, segments) {
+		var length = segments.length,
+			handleOut, outX, outY;
+
+		function drawSegment(i) {
+			var segment = segments[i],
+				point = segment._point,
+				x = point._x,
+				y = point._y,
+				handleIn = segment._handleIn;
+			if (!handleOut) {
+				ctx.moveTo(x, y);
+			} else {
+				if (handleIn.isZero() && handleOut.isZero()) {
+					ctx.lineTo(x, y);
+				} else {
+					ctx.bezierCurveTo(outX, outY,
+							handleIn._x + x, handleIn._y + y, x, y);
+				}
+			}
+			handleOut = segment._handleOut;
+			outX = handleOut._x + x;
+			outY = handleOut._y + y;
+		}
+
+		for (var i = 0; i < length; i++)
+			drawSegment(i);
+		// Close path by drawing first segment again
+		if (this._closed && length > 1)
+			drawSegment(0);
+	}
+
 	return {
 		draw: function(ctx, param) {
 			if (!param.compound)
 				ctx.beginPath();
-			var segments = this._segments,
-				length = segments.length,
-				handleOut, outX, outY;
 
-			function drawSegment(i) {
-				var segment = segments[i],
-					point = segment._point,
-					x = point._x,
-					y = point._y,
-					handleIn = segment._handleIn;
-				if (!handleOut) {
-					ctx.moveTo(x, y);
-				} else {
-					if (handleIn.isZero() && handleOut.isZero()) {
-						ctx.lineTo(x, y);
-					} else {
-						ctx.bezierCurveTo(outX, outY,
-								handleIn._x + x, handleIn._y + y, x, y);
-					}
-				}
-				handleOut = segment._handleOut;
-				outX = handleOut._x + x;
-				outY = handleOut._y + y;
+			var fillColor = this.getFillColor(),
+				strokeColor = this.getStrokeColor();
+
+			if (param.compound || param.selection || param.clip || fillColor || strokeColor) {
+				drawSegments(ctx, this._segments);
 			}
 
-			for (var i = 0; i < length; i++)
-				drawSegment(i);
-			// Close path by drawing first segment again
-			if (this._closed && length > 1)
-				drawSegment(0);
-
 			// If we are drawing the selection of a path, stroke it and draw
 			// its handles:
 			if (param.selection) {
 				ctx.stroke();
 				drawHandles(ctx, this._segments);
-			} else if (!param.ignoreStyle) {
+			} else if (param.clip) {
+				ctx.clip();
+			} else if (!param.compound && (fillColor || strokeColor)) {
 				// If the path is part of a compound path or doesn't have a fill
 				// or stroke, there is no need to continue.
-				var fillColor = this.getFillColor(),
-					strokeColor = this.getStrokeColor();
-				if (!param.compound && (fillColor || strokeColor)) {
-					this._setStyles(ctx);
-					ctx.save();
-					// If the path only defines a strokeColor or a fillColor,
-					// draw it directly with the globalAlpha set, otherwise
-					// we will do it later when we composite the temporary
-					// canvas.
-					if (!fillColor || !strokeColor)
-						ctx.globalAlpha = this.opacity;
-					if (fillColor) {
-						ctx.fillStyle = fillColor.getCanvasStyle(ctx);
-						ctx.fill();
-					}
-					if (strokeColor) {
-						ctx.strokeStyle = strokeColor.getCanvasStyle(ctx);
-						ctx.stroke();
-					}
-					ctx.restore();
+				ctx.save();
+				this._setStyles(ctx);
+				// If the path only defines a strokeColor or a fillColor,
+				// draw it directly with the globalAlpha set, otherwise
+				// we will do it later when we composite the temporary
+				// canvas.
+				if (!fillColor || !strokeColor)
+					ctx.globalAlpha = this.opacity;
+				if (fillColor) {
+					ctx.fillStyle = fillColor.getCanvasStyle(ctx);
+					ctx.fill();
 				}
+				if (strokeColor) {
+					ctx.strokeStyle = strokeColor.getCanvasStyle(ctx);
+					ctx.stroke();
+				}
+				ctx.restore();
 			}
 		}
 	};