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

Implement caching of drawn Canvas Path objects for better performance.

Browse source 
Already supported on recent Chrome and Safari.
This commit is contained in:
Jürg Lehni 2013-11-04 11:46:20 +01:00
parent f07f4ac977
commit 5630b7e415
2 changed files with 42 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/path/CompoundPath.js
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.
@ -218,10 +225,17 @@ var CompoundPath = PathItem.extend(/** @lends CompoundPath# */{
// Return early if the compound path doesn't have any children:
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);
var style = this._style;

37
src/path/Path.js
View file

@ -115,14 +115,15 @@ 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;
// Curves are no longer valid
if (this._curves) {
for (var i = 0, l = this._curves.length; i < l; i++) {
for (var i = 0, l = this._curves.length; i < l; i++)
this._curves[i]._changed(/*#=*/ Change.GEOMETRY);
}
}
} else if (flags & /*#=*/ ChangeFlag.STROKE) {
// TODO: We could preserve the purely geometric bounds that are not
@ -1997,7 +1998,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();
@ -2015,29 +2017,38 @@ 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)
drawSegments(ctx, this);
if (this._closed)
ctx.closePath();
// CompoundPath collects its own _currentPath
if (!compound && this._currentPath) {
ctx.currentPath = this._currentPath;
} else {
// Prepare the canvas path if we have any situation that
// requires it to be defined.
if (hasFill || hasStroke && !dashLength || compound || clip)
drawSegments(ctx, this);
if (this._closed)
ctx.closePath();
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
// or stroke, there is no need to continue.
this._setStyles(ctx);
// If shadowColor is defined, clear it after fill, so it won't
// be applied to both fill and stroke. If the path is only
// stroked, we don't have to clear it.
if (hasFill) {
ctx.fill(style.getWindingRule());
// If shadowColor is defined, clear it after fill, so it
// won't be applied to both fill and stroke. If the path is
// only stroked, we don't have to clear it.
ctx.shadowColor = 'rgba(0,0,0,0)';
}
if (hasStroke) {
if (dashLength) {
// We cannot use the path created by drawSegments above
// Use CurveFlatteners to draw dashed paths:
// NOTE: We don't cache this path in another currentPath
// since browsers that support currentPath also support
// native dashes.
ctx.beginPath();
var flattener = new PathFlattener(this),
length = flattener.length,