lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-19 02:37:59 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

label offset is now adjusted whenever the text is updated

Browse Source
This commit is contained in:
Eric Rowell
2013-03-17 22:01:52 -07:00
parent e43c2fbeb4
commit 4036aa5fc7
2 changed files with 26 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/plugins/Label.js
View File

@@ -1,10 +1,15 @@
(function() { (function() {
// constants // constants
var NONE = 'none', var ATTR_CHANGE_LIST = ['fontFamily', 'fontSize', 'fontStyle', 'padding', 'lineHeight', 'text'],
CHANGE_KINETIC = 'Change.kinetic',
NONE = 'none',
UP = 'up', UP = 'up',
RIGHT = 'right', RIGHT = 'right',
DOWN = 'down', DOWN = 'down',
LEFT = 'left'; LEFT = 'left',
// cached variables
attrChangeListLen = ATTR_CHANGE_LIST.length;
/** /**
* Label constructor.  Blobs are defined by an array of points and * Label constructor.  Blobs are defined by an array of points and
@@ -32,16 +37,27 @@
Kinetic.Plugins.Label.prototype = { Kinetic.Plugins.Label.prototype = {
_initLabel: function(config) { _initLabel: function(config) {
var that = this,
text = null;
this.innerGroup = new Kinetic.Group(); this.innerGroup = new Kinetic.Group();
this.createAttrs(); this.createAttrs();
Kinetic.Group.call(this, config); Kinetic.Group.call(this, config);
this.setText(new Kinetic.Text(config.text)); text = new Kinetic.Text(config.text);
this.setText(text);
this.setRect(new Kinetic.Plugins.LabelRect(config.rect)); this.setRect(new Kinetic.Plugins.LabelRect(config.rect));
this.innerGroup.add(this.getRect()); this.innerGroup.add(this.getRect());
this.innerGroup.add(this.getText()); this.innerGroup.add(text);
this.add(this.innerGroup); this.add(this.innerGroup);
this._setGroupOffset(); this._setGroupOffset();
// update text data for certain attr changes
for(var n = 0; n < attrChangeListLen; n++) {
text.on(ATTR_CHANGE_LIST[n] + CHANGE_KINETIC, function() {
that._setGroupOffset();
});
}
}, },
getWidth: function() { getWidth: function() {
return this.getText().getWidth(); return this.getText().getWidth();

8
tests/js/unit/plugins/labelTests.js
View File

@@ -12,7 +12,7 @@ Test.Modules.LABEL = {
y: 100, y: 100,
draggable: true, draggable: true,
text: { text: {
text: 'Hello World!', text: '',
fontSize: 50, fontSize: 50,
//fontFamily: 'Calibri', //fontFamily: 'Calibri',
//fontStyle: 'normal', //fontStyle: 'normal',
@@ -28,7 +28,7 @@ Test.Modules.LABEL = {
shadowOffset: [10, 10], shadowOffset: [10, 10],
shadowOpacity: 0.2, shadowOpacity: 0.2,
lineJoin: 'round', lineJoin: 'round',
//pointerDirection: 'down', pointerDirection: 'up',
pointerWidth: 20, pointerWidth: 20,
pointerHeight: 20, pointerHeight: 20,
cornerRadius: 5 cornerRadius: 5
@@ -44,9 +44,11 @@ Test.Modules.LABEL = {
var afterTextWidth = label.getText().getWidth(); var afterTextWidth = label.getText().getWidth();
test(afterTextWidth > beforeTextWidth, 'label text width should have grown'); //test(afterTextWidth > beforeTextWidth, 'label text width should have grown');
label.getText().setFontSize(50); label.getText().setFontSize(50);
label.getText().setText('Hello big world');
layer.draw(); layer.draw();
} }