lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-05 20:48:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

align support for Konva.TextPath

Browse Source
This commit is contained in:
Anton Lavrenov 2016-10-28 15:30:36 -06:00
parent d090e3662e
commit 0d11bff316
7 changed files with 154 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -7,6 +7,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
## Added
- new properties for `Konva.Text`: `letterSpacing`
- new event `contentContextmenu` for `Konva.Stage`
- `align` support for `Konva.TextPath`
### Changed
- changing a size of `Konva.Stage` will update it in async way (via `batchDraw`).

66
konva.js
View File

@ -3,7 +3,7 @@
* Konva JavaScript Framework v1.2.2
* http://konvajs.github.io/
* Licensed under the MIT or GPL Version 2 licenses.
* Date: Tue Oct 25 2016
* Date: Fri Oct 28 2016
*
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - 2015 by Anton Lavrenov (Konva)
@ -5800,7 +5800,7 @@
dirX = -1;
break;
default:
Konva.Util.error('Unknwo emboss direction: ' + direction);
Konva.Util.error('Unknown emboss direction: ' + direction);
}
do {
@ -15064,7 +15064,7 @@
});
// update text data for certain attr changes
this.on('textChange.konva letterSpacingChange.konva', that._setTextData);
this.on('textChange.konva alignChange.konva letterSpacingChange.konva', that._setTextData);
that._setTextData();
this.sceneFunc(this._sceneFunc);
this.hitFunc(this._hitFunc);
@ -15167,14 +15167,41 @@
this.textWidth = size.width;
this.textHeight = size.height;
var textFullWidth = this.textWidth + (this.attrs.text.length - 1) * letterSpacing;
this.glyphInfo = [];
var fullPathWidth = 0;
for(var l = 0; l < that.dataArray.length; l++) {
if(that.dataArray[l].pathLength > 0) {
fullPathWidth += that.dataArray[l].pathLength;
}
}
var offset = 0;
if (this.align() === 'center') {
offset = Math.max(0, fullPathWidth / 2 - textFullWidth / 2);
}
if (this.align() === 'right') {
offset = Math.max(0, fullPathWidth - textFullWidth);
}
var charArr = this.getText().split('');
var p0, p1, pathCmd;
var pIndex = -1;
var currentT = 0;
// var sumLength = 0;
// for(var j = 0; j < that.dataArray.length; j++) {
// if(that.dataArray[j].pathLength > 0) {
//
// if (sumLength + that.dataArray[j].pathLength > offset) {}
// fullPathWidth += that.dataArray[j].pathLength;
// }
// }
var getNextPathSegment = function() {
currentT = 0;
@ -15196,6 +15223,7 @@
return {};
};
var findSegmentToFitCharacter = function(c) {
var glyphWidth = that._getTextSize(c).width + letterSpacing;
@ -15310,6 +15338,19 @@
}
}
};
// fake search for offset, this is very bad approach
// TODO: find other way to add offset from start (for align)
var testChar = 'C';
var glyphWidth = that._getTextSize(testChar).width + letterSpacing;
for (var k = 0; k < (offset / glyphWidth); k++) {
findSegmentToFitCharacter(testChar);
if(p0 === undefined || p1 === undefined) {
break;
}
p0 = p1;
}
for(var i = 0; i < charArr.length; i++) {
// Find p1 such that line segment between p0 and p1 is approx. width of glyph
@ -15421,6 +15462,25 @@
* @memberof Konva.TextPath.prototype
* @param {String} fontStyle
*/
Konva.Factory.addGetterSetter(Konva.TextPath, 'align', 'left');
/**
* get/set horizontal align of text. Can be 'left', 'center', or 'right'
* @name align
* @method
* @memberof Konva.Text.prototype
* @param {String} align
* @returns {String}
* @example
* // get text align
* var align = text.align();
*
* // center text
* text.align('center');
*
* // align text to right
* text.align('right');
*/
Konva.Factory.addGetterSetter(Konva.TextPath, 'letterSpacing', 0);

6
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
src/filters/Emboss.js
View File

@ -68,7 +68,7 @@
dirX = -1;
break;
default:
Konva.Util.error('Unknwo emboss direction: ' + direction);
Konva.Util.error('Unknown emboss direction: ' + direction);
}
do {

62
src/shapes/TextPath.js
View File

@ -66,7 +66,7 @@
});
// update text data for certain attr changes
this.on('textChange.konva letterSpacingChange.konva', that._setTextData);
this.on('textChange.konva alignChange.konva letterSpacingChange.konva', that._setTextData);
that._setTextData();
this.sceneFunc(this._sceneFunc);
this.hitFunc(this._hitFunc);
@ -169,14 +169,41 @@
this.textWidth = size.width;
this.textHeight = size.height;
var textFullWidth = this.textWidth + (this.attrs.text.length - 1) * letterSpacing;
this.glyphInfo = [];
var fullPathWidth = 0;
for(var l = 0; l < that.dataArray.length; l++) {
if(that.dataArray[l].pathLength > 0) {
fullPathWidth += that.dataArray[l].pathLength;
}
}
var offset = 0;
if (this.align() === 'center') {
offset = Math.max(0, fullPathWidth / 2 - textFullWidth / 2);
}
if (this.align() === 'right') {
offset = Math.max(0, fullPathWidth - textFullWidth);
}
var charArr = this.getText().split('');
var p0, p1, pathCmd;
var pIndex = -1;
var currentT = 0;
// var sumLength = 0;
// for(var j = 0; j < that.dataArray.length; j++) {
// if(that.dataArray[j].pathLength > 0) {
//
// if (sumLength + that.dataArray[j].pathLength > offset) {}
// fullPathWidth += that.dataArray[j].pathLength;
// }
// }
var getNextPathSegment = function() {
currentT = 0;
@ -198,6 +225,7 @@
return {};
};
var findSegmentToFitCharacter = function(c) {
var glyphWidth = that._getTextSize(c).width + letterSpacing;
@ -312,6 +340,19 @@
}
}
};
// fake search for offset, this is very bad approach
// TODO: find other way to add offset from start (for align)
var testChar = 'C';
var glyphWidth = that._getTextSize(testChar).width + letterSpacing;
for (var k = 0; k < (offset / glyphWidth); k++) {
findSegmentToFitCharacter(testChar);
if(p0 === undefined || p1 === undefined) {
break;
}
p0 = p1;
}
for(var i = 0; i < charArr.length; i++) {
// Find p1 such that line segment between p0 and p1 is approx. width of glyph
@ -423,6 +464,25 @@
* @memberof Konva.TextPath.prototype
* @param {String} fontStyle
*/
Konva.Factory.addGetterSetter(Konva.TextPath, 'align', 'left');
/**
* get/set horizontal align of text. Can be 'left', 'center', or 'right'
* @name align
* @method
* @memberof Konva.Text.prototype
* @param {String} align
* @returns {String}
* @example
* // get text align
* var align = text.align();
*
* // center text
* text.align('center');
*
* // align text to right
* text.align('right');
*/
Konva.Factory.addGetterSetter(Konva.TextPath, 'letterSpacing', 0);

2
test/unit/shapes/Label-test.js
View File

@ -217,7 +217,7 @@ suite('Label', function() {
cloneAndCompareLayer(layer, 254);
});
it.only('tag should list text size changes', function() {
it('tag should list text size changes', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);

24
test/unit/shapes/TextPath-test.js
View File

@ -240,4 +240,28 @@ suite('TextPath', function() {
cloneAndCompareLayer(layer,50);
showHit(layer);
});
test('Text path with align', function() {
var stage = addStage();
var layer = new Konva.Layer();
var c = "M10,10 C0,0 10,150 100,100 S300,150 400,50";
var textpath = new Konva.TextPath({
stroke: 'black',
strokeWidth: 1,
fill: 'orange',
fontSize: 10,
fontFamily: 'Arial',
letterSpacing: 5,
text: 'All the world\'s a stage.',
align: 'center',
data: c
});
// TODO: add test case
layer.add(textpath);
stage.add(layer);
});
});