scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-05 20:32:00 -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) {
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();
}

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.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,

107
src/path/Path.js
View file

@ -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();
}
}
};