lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-10-15 04:14:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

rewrote text array algo in Text. added newline support. now handling edge case in which the text box width is smaller than a character width. if a line is not able to wrap via space or dash, the word itself is wrapped.

Browse Source
This commit is contained in:
Eric Rowell
2012-07-08 13:59:43 -07:00
parent 30fd5c1fa7
commit d0f37f7c88
5 changed files with 110 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/shapes/Text.js
View File

@@ -148,36 +148,63 @@ Kinetic.Text = Kinetic.Shape.extend({
_setTextData: function() {
var charArr = this.attrs.text.split('');
var arr = [];
var lastWord = '';
var row = 0;
this.textArr = [];
var addLine = true;
this.textWidth = 0;
this.textHeight = this._getTextSize(this.attrs.text).height;
var lineHeightPx = this.attrs.lineHeight * this.textHeight;
var addedToLine = true;
while(charArr.length > 0 && addedToLine && (this.attrs.height === 'auto' || lineHeightPx * (row + 1) < this.attrs.height - this.attrs.padding * 2)) {
addedToLine = false;
var line = lastWord;
lastWord = '';
while(charArr[0] !== undefined && (this.attrs.width === 'auto' || this._getTextSize(line + charArr[0]).width < this.attrs.width - this.attrs.padding * 2)) {
lastWord = charArr[0] === ' ' || charArr[0] === '-' ? '' : lastWord + charArr[0];
line += charArr.splice(0, 1);
addedToLine = true;
}
while(charArr.length > 0 && addLine && (this.attrs.height === 'auto' || lineHeightPx * (row + 1) < this.attrs.height - this.attrs.padding * 2)) {
var index = 0;
var line = undefined;
addLine = false;
// remove last word from line
if(charArr.length > 0) {
line = line.substring(0, line.lastIndexOf(lastWord));
}
while(index < charArr.length) {
if(charArr.indexOf('\n') === index) {
// remove newline char
charArr.splice(index, 1);
line = charArr.splice(0, index).join('');
break;
}
// if line exceeds inner box width
var lineArr = charArr.slice(0, index);
if(this.attrs.width !== 'auto' && this._getTextSize(lineArr.join('')).width > this.attrs.width - this.attrs.padding * 2) {
/*
* if a single character is too large to fit inside
* the text box width, then break out of the loop
* and stop processing
*/
if(index == 0) {
break;
}
var lastSpace = lineArr.lastIndexOf(' ');
var lastDash = lineArr.lastIndexOf('-');
var wrapIndex = Math.max(lastSpace, lastDash);
if(wrapIndex >= 0) {
line = charArr.splice(0, 1 + wrapIndex).join('');
break;
}
/*
* if not able to word wrap based on space or dash,
* go ahead and wrap in the middle of a word if needed
*/
line = charArr.splice(0, index).join('');
break;
}
index++;
// if the end is reached
if(index === charArr.length) {
line = charArr.splice(0, index).join('');
}
}
this.textWidth = Math.max(this.textWidth, this._getTextSize(line).width);
if(line.length > 0) {
if(line !== undefined) {
arr.push(line);
addLine = true;
}
row++;
}
this.textArr = arr;
}
});