Implement Canvas Path caching again using Context#currentPath.

This commit is contained in:
Jürg Lehni 2013-12-06 12:49:46 +01:00
parent ece14f0151
commit 92590b160c
3 changed files with 36 additions and 10 deletions

View file

@ -3236,6 +3236,11 @@ var Item = Base.extend(Callback, /** @lends Item# */{
transforms = param.transforms,
parentMatrix = transforms[transforms.length - 1],
globalMatrix = parentMatrix.clone().concatenate(this._matrix);
// If this item is not invertible, do not draw it, since it would cause
// empty ctx.currentPath and mess up caching. It might also generally be
// a good idea to not draw in such cirucmstances.
if (!globalMatrix.isInvertible())
return;
// Only keep track of transformation if told so. See Project#draw()
if (trackTransforms)
transforms.push(this._globalMatrix = globalMatrix);

View file

@ -57,6 +57,13 @@ var CompoundPath = PathItem.extend(/** @lends CompoundPath# */{
this.addChildren(Array.isArray(arg) ? arg : arguments);
},
_changed: function _changed(flags) {
_changed.base.call(this, flags);
// Delete cached native Path
if (flags & (/*#=*/ ChangeFlag.HIERARCHY | /*#=*/ ChangeFlag.GEOMETRY))
delete this._currentPath;
},
insertChildren: function insertChildren(index, items, _preserve) {
// Pass on 'path' for _type, to make sure that only paths are added as
// children.
@ -219,10 +226,15 @@ var CompoundPath = PathItem.extend(/** @lends CompoundPath# */{
if (children.length === 0)
return;
ctx.beginPath();
param = param.extend({ compound: true });
for (var i = 0, l = children.length; i < l; i++)
children[i].draw(ctx, param);
if (this._currentPath) {
ctx.currentPath = this._currentPath;
} else {
ctx.beginPath();
param = param.extend({ compound: true });
for (var i = 0, l = children.length; i < l; i++)
children[i].draw(ctx, param);
this._currentPath = ctx.currentPath;
}
if (!param.clip) {
this._setStyles(ctx);

View file

@ -115,6 +115,8 @@ var Path = PathItem.extend(/** @lends Path# */{
_changed: function _changed(flags) {
_changed.base.call(this, flags);
if (flags & /*#=*/ ChangeFlag.GEOMETRY) {
// Delete cached native Path
delete (this._compound ? this._parent : this)._currentPath;
delete this._length;
// Clockwise state becomes undefined as soon as geometry changes.
delete this._clockwise;
@ -2003,7 +2005,8 @@ var Path = PathItem.extend(/** @lends Path# */{
return {
_draw: function(ctx, param) {
var clip = param.clip,
compound = param.compound;
// Also mark this Path as _compound so _changed() knows about it
compound = this._compound = param.compound;
if (!compound)
ctx.beginPath();
@ -2021,12 +2024,18 @@ var Path = PathItem.extend(/** @lends Path# */{
return dashArray[((i % dashLength) + dashLength) % dashLength];
}
// Prepare the canvas path if we have any situation that
// requires it to be defined.
if (hasFill || hasStroke && !dashLength || compound || clip)
if (this._currentPath) {
ctx.currentPath = this._currentPath;
} else if (hasFill || hasStroke && !dashLength || compound || clip){
// Prepare the canvas path if we have any situation that
// requires it to be defined.
drawSegments(ctx, this);
if (this._closed)
ctx.closePath();
if (this._closed)
ctx.closePath();
// CompoundPath collects its own _currentPath
if (!compound)
this._currentPath = ctx.currentPath;
}
if (!clip && !compound && (hasFill || hasStroke)) {
// If the path is part of a compound path or doesn't have a fill