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

More work on Path#draw().

Browse source
This commit is contained in:
Jürg Lehni 2011-06-04 15:28:06 +01:00
parent 45a04891ee
commit e5290c3f47
3 changed files with 60 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/item/Group.js
View file

@ -104,6 +104,7 @@ var Group = this.Group = Item.extend({
draw: function(ctx, param) { draw: function(ctx, param) {
for (var i = 0, l = this._children.length; i < l; i++) { for (var i = 0, l = this._children.length; i < l; i++) {
Item.draw(this._children[i], ctx, param); Item.draw(this._children[i], ctx, param);
// TODO: Shouldn't clipping paths not be filled / stroked?
if (this._clipped && i == 0) if (this._clipped && i == 0)
ctx.clip(); ctx.clip();
} }

6
src/item/Raster.js
View file

@ -246,10 +246,8 @@ var Raster = this.Raster = Item.extend({
ctx.scale(width / bounds.width, height / bounds.height); ctx.scale(width / bounds.width, height / bounds.height);
ctx.translate(-bounds.x, -bounds.y); ctx.translate(-bounds.x, -bounds.y);
// If a path was passed, draw it as a clipping mask: // If a path was passed, draw it as a clipping mask:
if (path) { if (path)
path.draw(ctx, { ignoreStyle: true }); path.draw(ctx, { clip: true });
ctx.clip();
}
// Now draw the image clipped into it. // Now draw the image clipped into it.
this.matrix.applyToContext(ctx); this.matrix.applyToContext(ctx);
ctx.drawImage(this._canvas || this._image, ctx.drawImage(this._canvas || this._image,

31
src/path/Path.js
View file

@ -716,12 +716,8 @@ var Path = this.Path = PathItem.extend({
} }
} }
return { function drawSegments(ctx, segments) {
draw: function(ctx, param) { var length = segments.length,
if (!param.compound)
ctx.beginPath();
var segments = this._segments,
length = segments.length,
handleOut, outX, outY; handleOut, outX, outY;
function drawSegment(i) { function drawSegment(i) {
@ -750,20 +746,32 @@ var Path = this.Path = PathItem.extend({
// Close path by drawing first segment again // Close path by drawing first segment again
if (this._closed && length > 1) if (this._closed && length > 1)
drawSegment(0); drawSegment(0);
}
return {
draw: function(ctx, param) {
if (!param.compound)
ctx.beginPath();
var fillColor = this.getFillColor(),
strokeColor = this.getStrokeColor();
if (param.compound || param.selection || param.clip || fillColor || strokeColor) {
drawSegments(ctx, this._segments);
}
// If we are drawing the selection of a path, stroke it and draw // If we are drawing the selection of a path, stroke it and draw
// its handles: // its handles:
if (param.selection) { if (param.selection) {
ctx.stroke(); ctx.stroke();
drawHandles(ctx, this._segments); 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 // If the path is part of a compound path or doesn't have a fill
// or stroke, there is no need to continue. // 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(); ctx.save();
this._setStyles(ctx);
// If the path only defines a strokeColor or a fillColor, // If the path only defines a strokeColor or a fillColor,
// draw it directly with the globalAlpha set, otherwise // draw it directly with the globalAlpha set, otherwise
// we will do it later when we composite the temporary // we will do it later when we composite the temporary
@ -781,7 +789,6 @@ var Path = this.Path = PathItem.extend({
ctx.restore(); ctx.restore();
} }
} }
}
}; };
}, new function() { // Inject methods that require scoped privates }, new function() { // Inject methods that require scoped privates