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

Move handling of clipping outside of draw function, so canvas context can correctly be saved and restored for clipping paths too.

Browse source
This commit is contained in:
Jürg Lehni 2013-04-09 19:08:41 -07:00
parent 90cc10cc4b
commit b55d89acda
4 changed files with 14 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/item/Group.js
View file

@ -167,9 +167,9 @@ var Group = this.Group = Item.extend(/** @lends Group# */{
draw: function(ctx, param) { draw: function(ctx, param) {
var clipItem = this._getClipItem(); var clipItem = this._getClipItem();
if (clipItem) { if (clipItem) {
param.clipping = true; param.clip = true;
Item.draw(clipItem, ctx, param); Item.draw(clipItem, ctx, param);
delete param.clipping; delete param.clip;
} }
for (var i = 0, l = this._children.length; i < l; i++) { for (var i = 0, l = this._children.length; i < l; i++) {
var item = this._children[i]; var item = this._children[i];

19
src/item/Item.js
View file

@ -2821,25 +2821,22 @@ var Item = this.Item = Base.extend(Callback, {
ctx = CanvasProvider.getContext( ctx = CanvasProvider.getContext(
bounds.getSize().ceil().add(Size.create(1, 1))); bounds.getSize().ceil().add(Size.create(1, 1)));
} }
if (!param.clipping) ctx.save();
ctx.save();
// Translate the context so the topLeft of the item is at (0, 0) // Translate the context so the topLeft of the item is at (0, 0)
// on the temporary canvas. // on the temporary canvas.
if (parentCtx) if (parentCtx)
ctx.translate(-itemOffset.x, -itemOffset.y); ctx.translate(-itemOffset.x, -itemOffset.y);
// Keep calculating the current global matrix, by keeping a history // Keep calculating the current global matrix, by keeping a history
// and pushing / popping as we go along. // and pushing / popping as we go along.
var transforms = param.transforms, var transforms = param.transforms;
global = transforms[transforms.length - 1].clone().concatenate( transforms.push(item._globalMatrix = transforms[transforms.length-1]
item._matrix); .clone().concatenate(item._matrix));
param.transforms.push(item._globalMatrix = global);
item._matrix.applyToContext(ctx); item._matrix.applyToContext(ctx);
item.draw(ctx, param); item.draw(ctx, param);
if (!param.clipping) { transforms.pop();
param.transforms.pop(); ctx.restore();
ctx.restore(); if (param.clip)
ctx.clip();
}
// If a temporary canvas was created before, composite it onto the // If a temporary canvas was created before, composite it onto the
// parent canvas: // parent canvas:
if (parentCtx) { if (parentCtx) {

4
src/path/CompoundPath.js
View file

@ -204,9 +204,7 @@ var CompoundPath = this.CompoundPath = PathItem.extend(/** @lends CompoundPath#
for (var i = 0, l = children.length; i < l; i++) for (var i = 0, l = children.length; i < l; i++)
Item.draw(children[i], ctx, param); Item.draw(children[i], ctx, param);
param.compound = false; param.compound = false;
if (param.clip || this._clipMask) { if (!param.clip) {
ctx.clip();
} else {
this._setStyles(ctx); this._setStyles(ctx);
if (style._fillColor) if (style._fillColor)
ctx.fill(); ctx.fill();

9
src/path/Path.js
View file

@ -1841,21 +1841,18 @@ var Path = this.Path = PathItem.extend(/** @lends Path# */{
strokeColor = style._strokeColor, strokeColor = style._strokeColor,
dashArray = style._dashArray, dashArray = style._dashArray,
drawDash = !paper.support.nativeDash && strokeColor drawDash = !paper.support.nativeDash && strokeColor
&& dashArray && dashArray.length, && dashArray && dashArray.length;
clip = param.clip || this._clipMask;
// Prepare the canvas path if we have any situation that requires it // Prepare the canvas path if we have any situation that requires it
// to be defined. // to be defined.
if (param.compound || clip || fillColor || strokeColor if (param.compound || param.clip || fillColor || strokeColor
&& !drawDash) && !drawDash)
drawSegments(ctx, this); drawSegments(ctx, this);
if (this._closed) if (this._closed)
ctx.closePath(); ctx.closePath();
if (clip) { if (!param.clip && !param.compound && (fillColor || strokeColor)) {
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.
this._setStyles(ctx); this._setStyles(ctx);