lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-10-15 12:34:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added a shared cached dummy canvas context that may be used by Kinetic.Text methods.

Browse Source 
This greatly improves performances when creating lots of Kinetic.Text nodes, especially on mobile devices.
This commit is contained in:
Louis Jolibois
2013-03-14 19:34:35 +01:00
parent 5c590bb88f
commit 5ca21992de
1 changed files with 12 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/shapes/Text.js
View File

@@ -21,7 +21,10 @@
ATTR_CHANGE_LIST = ['fontFamily', 'fontSize', 'fontStyle', 'padding', 'align', 'lineHeight', 'text', 'width', 'height'], ATTR_CHANGE_LIST = ['fontFamily', 'fontSize', 'fontStyle', 'padding', 'align', 'lineHeight', 'text', 'width', 'height'],
// cached variables // cached variables
attrChangeListLen = ATTR_CHANGE_LIST.length; attrChangeListLen = ATTR_CHANGE_LIST.length,
// shared dummy canvas context
dummyContext = null;
/** /**
* Text constructor * Text constructor
@@ -66,7 +69,9 @@
lineHeight: 1 lineHeight: 1
}); });
this.dummyCanvas = document.createElement(CANVAS); if (!dummyContext) {
dummyContext = document.createElement(CANVAS).getContext(CONTEXT_2D);
}
// call super constructor // call super constructor
Kinetic.Shape.call(this, config); Kinetic.Shape.call(this, config);
@@ -177,16 +182,14 @@
return this.textHeight; return this.textHeight;
}, },
_getTextSize: function(text) { _getTextSize: function(text) {
var dummyCanvas = this.dummyCanvas, var fontSize = this.getFontSize(),
context = dummyCanvas.getContext(CONTEXT_2D),
fontSize = this.getFontSize(),
metrics; metrics;
context.save(); dummyContext.save();
context.font = this.getFontStyle() + SPACE + fontSize + PX_SPACE + this.getFontFamily(); dummyContext.font = this.getFontStyle() + SPACE + fontSize + PX_SPACE + this.getFontFamily();
metrics = context.measureText(text); metrics = dummyContext.measureText(text);
context.restore(); dummyContext.restore();
return { return {
width: metrics.width, width: metrics.width,
height: parseInt(fontSize, 10) height: parseInt(fontSize, 10)