lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-01-23 21:34:50 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

new property for Konva.Text and Konva.TextPath: textDecoration

Browse Source
This commit is contained in:
Anton Lavrenov
2016-12-07 16:46:59 -05:00
parent 43fa56a381
commit 115002aaf6
8 changed files with 201 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/shapes/Text.js
View File

@@ -105,6 +105,8 @@
textArrLen = textArr.length,
totalWidth = this.getWidth(),
letterSpacing = this.getLetterSpacing(),
textDecoration = this.textDecoration(),
fill = this.fill(),
n;
context.setAttr('font', this._getContextFont());
@@ -120,6 +122,7 @@
}
// draw text lines
for(n = 0; n < textArrLen; n++) {
var obj = textArr[n],
@@ -135,12 +138,21 @@
context.translate((totalWidth - width - p * 2) / 2, 0);
}
if (textDecoration === 'underline') {
context.save();
context.moveTo(0, Math.round(lineHeightPx / 2));
context.lineTo(Math.round(width), Math.round(lineHeightPx / 2));
// context
context.strokeStyle = fill;
context.stroke();
context.restore();
}
if (letterSpacing !== 0) {
for(var li = 0; li < text.length; li++) {
var letter = text[li];
this.partialText = letter;
context.fillStrokeShape(this);
context.translate(this._getTextSize(letter).width + letterSpacing, 0);
context.translate(Math.round(this._getTextSize(letter).width) + letterSpacing, 0);
}
} else {
this.partialText = text;
@@ -528,5 +540,22 @@
* text.text('Hello world!');
*/
Konva.Factory.addGetterSetter(Konva.Text, 'textDecoration', null);
/**
* get/set text decoration of a text. Can be '' or 'underline'
* @name textDecoration
* @method
* @memberof Konva.Text.prototype
* @param {String} textDecoration
* @returns {String}
* @example
* // get text decoration
* var textDecoration = text.textDecoration();
*
* // center text
* text.textDecoration('underline');
*/
Konva.Collection.mapMethods(Konva.Text);
})();

39
src/shapes/TextPath.js
View File

@@ -77,6 +77,10 @@
context.setAttr('textAlign', 'left');
context.save();
var textDecoration = this.textDecoration();
var fill = this.fill();
var fontSize = this.fontSize();
var glyphInfo = this.glyphInfo;
for(var i = 0; i < glyphInfo.length; i++) {
context.save();
@@ -88,10 +92,21 @@
this.partialText = glyphInfo[i].text;
context.fillStrokeShape(this);
if (textDecoration === 'underline') {
// context.beginPath();
// context.strokeStyle = fill;
if (i === 0) {
context.moveTo(0, fontSize / 2);
}
context.lineTo(fontSize, fontSize / 2);
// context.stroke();
}
context.restore();
//// To assist with debugging visually, uncomment following
// context.beginPath();
//
// if (i % 2)
// context.strokeStyle = 'cyan';
// else
@@ -101,6 +116,11 @@
// context.lineTo(p1.x, p1.y);
// context.stroke();
}
if (textDecoration === 'underline') {
context.strokeStyle = fill;
context.stroke();
}
context.restore();
},
_hitFunc: function(context) {
@@ -542,5 +562,22 @@
* @memberof Konva.TextPath.prototype
*/
Konva.Factory.addGetterSetter(Konva.TextPath, 'textDecoration', null);
/**
* get/set text decoration of a text. Can be '' or 'underline'
* @name textDecoration
* @method
* @memberof Konva.Text.prototype
* @param {String} textDecoration
* @returns {String}
* @example
* // get text decoration
* var textDecoration = text.textDecoration();
*
* // center text
* text.textDecoration('underline');
*/
Konva.Collection.mapMethods(Konva.TextPath);
})();