lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 15:23:44 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

implement letter spacing for Text Shape

Browse Source
This commit is contained in:
Anton Lavrenov 2016-09-20 16:31:30 -04:00
parent fe92be3ab4
commit 834c1362c6
5 changed files with 78 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -4,6 +4,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
## [Not released][Not released]
## Added
- new properties for `Konva.Text`: `letterSpacing`
## [1.2.2][2016-09-15]
### Fixed

31
konva.js
View File

@ -12893,7 +12893,7 @@
WORD = 'word',
CHAR = 'char',
NONE = 'none',
ATTR_CHANGE_LIST = ['fontFamily', 'fontSize', 'fontStyle', 'fontVariant', 'padding', 'align', 'lineHeight', 'text', 'width', 'height', 'wrap'],
ATTR_CHANGE_LIST = ['fontFamily', 'fontSize', 'fontStyle', 'fontVariant', 'padding', 'align', 'lineHeight', 'text', 'width', 'height', 'wrap', 'letterSpacing'],
// cached variables
attrChangeListLen = ATTR_CHANGE_LIST.length,
@ -13044,6 +13044,7 @@
textArr = this.textArr,
textArrLen = textArr.length,
totalWidth = this.getWidth(),
letterSpacing = this.getLetterSpacing(),
n;
context.setAttr('font', this._getContextFont());
@ -13074,9 +13075,18 @@
context.translate((totalWidth - width - p * 2) / 2, 0);
}
this.partialText = text;
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);
}
} else {
this.partialText = text;
context.fillStrokeShape(this);
context.fillStrokeShape(this);
}
context.restore();
context.translate(0, lineHeightPx);
}
@ -13166,7 +13176,10 @@
return this.textArr.push({text: line, width: width});
},
_getTextWidth: function (text) {
return dummyContext.measureText(text).width;
var latterSpacing = this.getLetterSpacing();
var length = text.length;
return dummyContext.measureText(text).width +
(length ? latterSpacing * (length - 1) : 0);
},
_setTextData: function () {
var lines = this.getText().split('\n'),
@ -13419,6 +13432,16 @@
* text.wrap('word');
*/
Konva.Factory.addGetterSetter(Konva.Text, 'letterSpacing', 0);
/**
* set letter spacing property. Default value is 0.
* @name letterSpacing
* @method
* @memberof Konva.TextPath.prototype
* @param {Number} letterSpacing
*/
Konva.Factory.addGetter(Konva.Text, 'text', EMPTY_STRING);
Konva.Factory.addOverloadedGetterSetter(Konva.Text, 'text');

4
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

31
src/shapes/Text.js
View File

@ -20,7 +20,7 @@
WORD = 'word',
CHAR = 'char',
NONE = 'none',
ATTR_CHANGE_LIST = ['fontFamily', 'fontSize', 'fontStyle', 'fontVariant', 'padding', 'align', 'lineHeight', 'text', 'width', 'height', 'wrap'],
ATTR_CHANGE_LIST = ['fontFamily', 'fontSize', 'fontStyle', 'fontVariant', 'padding', 'align', 'lineHeight', 'text', 'width', 'height', 'wrap', 'letterSpacing'],
// cached variables
attrChangeListLen = ATTR_CHANGE_LIST.length,
@ -102,6 +102,7 @@
textArr = this.textArr,
textArrLen = textArr.length,
totalWidth = this.getWidth(),
letterSpacing = this.getLetterSpacing(),
n;
context.setAttr('font', this._getContextFont());
@ -132,9 +133,18 @@
context.translate((totalWidth - width - p * 2) / 2, 0);
}
this.partialText = text;
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);
}
} else {
this.partialText = text;
context.fillStrokeShape(this);
context.fillStrokeShape(this);
}
context.restore();
context.translate(0, lineHeightPx);
}
@ -224,7 +234,10 @@
return this.textArr.push({text: line, width: width});
},
_getTextWidth: function (text) {
return dummyContext.measureText(text).width;
var latterSpacing = this.getLetterSpacing();
var length = text.length;
return dummyContext.measureText(text).width +
(length ? latterSpacing * (length - 1) : 0);
},
_setTextData: function () {
var lines = this.getText().split('\n'),
@ -477,6 +490,16 @@
* text.wrap('word');
*/
Konva.Factory.addGetterSetter(Konva.Text, 'letterSpacing', 0);
/**
* set letter spacing property. Default value is 0.
* @name letterSpacing
* @method
* @memberof Konva.TextPath.prototype
* @param {Number} letterSpacing
*/
Konva.Factory.addGetter(Konva.Text, 'text', EMPTY_STRING);
Konva.Factory.addOverloadedGetterSetter(Konva.Text, 'text');

18
test/unit/shapes/Text-test.js
View File

@ -82,6 +82,24 @@ suite('Text', function(){
assert.equal(text.getClassName(),'Text', 'getClassName should be Text');
});
// ======================================================
test('add text with letter spacing', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var text = new Konva.Text({
text: 'hello'
});
layer.add(text);
layer.draw();
var oldWidth = text.width();
text.letterSpacing(10);
assert.equal(text.width(), oldWidth + 40);
layer.draw();
});
// ======================================================
test('text getters and setters', function() {
var stage = addStage();