lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-23 04:36:47 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

added arrow support for new label plugin

Browse Source
This commit is contained in:
Eric Rowell
2013-03-16 00:33:56 -07:00
parent 8e17729cea
commit bb57810c9a
2 changed files with 85 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/plugins/Label.js
View File

@@ -2,8 +2,11 @@
// constants
var ATTR_CHANGE_LIST = ['fontFamily', 'fontSize', 'fontStyle', 'padding', 'lineHeight', 'text'],
CHANGE_KINETIC = 'Change.kinetic',
TEXT = 'text',
RECT = 'rect';
NONE = 'none',
TOP = 'top',
RIGHT = 'right',
BOTTOM = 'bottom',
LEFT = 'left';
// cached variables
attrChangeListLen = ATTR_CHANGE_LIST.length;
@@ -13,15 +16,20 @@
* a tension
* @constructor
* @param {Object} config
* @param {String} [config.fontFamily] default is Calibri
* @param {Number} [config.fontSize] in pixels. Default is 12
* @param {String} [config.fontStyle] can be normal, bold, or italic. Default is normal
* @param {String} config.text
* @param {Number} [config.padding]
* @param {Number} [config.lineHeight] default is 1
* @param {String} [config.textFill]
* @param {String} [config.textStroke]
* @param {Number} [config.cornerRadius]
* @param {String} [config.arrow] can be none, top, right, bottom, or left. none is the default
* @param {Number} [config.arrowWidth]
* @param {Number} [config.arrowHeight]
* @param {Object} config.text
* @param {Object} config.rect
* @param {String} [config.text.fontFamily] default is Calibri
* @param {Number} [config.text.fontSize] in pixels. Default is 12
* @param {String} [config.text.fontStyle] can be normal, bold, or italic. Default is normal
* @param {String} config.text.text
* @param {String} [config.text.align] can be left, center, or right
* @param {Number} [config.text.padding]
* @param {Number} [config.text.width] default is auto
* @param {Number} [config.text.height] default is auto
* @param {Number} [config.rect.lineHeight] default is 1
* {{ShapeParams}}
* {{NodeParams}}
*/
@@ -37,23 +45,79 @@
this.createAttrs();
Kinetic.Group.call(this, config);
this.setText(new Kinetic.Text(config.text));
this.setRect(new Kinetic.Rect(config.rect));
text = this.getText();
this.setRect(new Kinetic.Polygon(config.rect));
this.add(this.getRect());
this.add(this.getText());
text = this.getText();
this._setPoints();
// update text data for certain attr changes
for(var n = 0; n < attrChangeListLen; n++) {
text.on(ATTR_CHANGE_LIST[n] + CHANGE_KINETIC, function() {
that.getRect().setSize(this.getSize());
that._setPoints();
});
}
},
_setPoints: function() {
var text = this.getText(),
width = text.getWidth(),
height = text.getHeight(),
points = [],
arrow = this.getArrow(),
arrowWidth = this.getArrowWidth(),
arrowHeight = this.getArrowHeight();
// top left corner
points.push(0);
points.push(0);
if (arrow === TOP) {
points.push((width - arrowWidth)/2, 0);
points.push(width/2, -1 * arrowHeight);
points.push((width + arrowWidth)/2, 0);
}
// top right
points.push(width);
points.push(0);
if (arrow === RIGHT) {
points.push(width, (height - arrowHeight)/2);
points.push(width + arrowWidth, height/2);
points.push(width, (height + arrowHeight)/2);
}
// bottom right
points.push(width);
points.push(height);
if (arrow === BOTTOM) {
points.push((width + arrowWidth)/2, height);
points.push(width/2, height + arrowHeight);
points.push((width - arrowWidth)/2, height);
}
// bottom left
points.push(0);
points.push(height);
if (arrow === LEFT) {
points.push(0, (height + arrowHeight)/2);
points.push(0 - arrowWidth, height/2);
points.push(0, (height - arrowHeight)/2);
}
this.getRect().setPoints(points);
}
};
Kinetic.Global.extend(Kinetic.Plugins.Label, Kinetic.Group);
Kinetic.Node.addGetterSetter(Kinetic.Plugins.Label, TEXT);
Kinetic.Node.addGetterSetter(Kinetic.Plugins.Label, RECT);
Kinetic.Node.addGetterSetter(Kinetic.Plugins.Label, 'text');
Kinetic.Node.addGetterSetter(Kinetic.Plugins.Label, 'rect');
Kinetic.Node.addGetterSetter(Kinetic.Plugins.Label, 'arrow', NONE);
Kinetic.Node.addGetterSetter(Kinetic.Plugins.Label, 'arrowWidth', 0);
Kinetic.Node.addGetterSetter(Kinetic.Plugins.Label, 'arrowHeight', 0);
})();