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

fixed up new Text wrap edge cases. Will add a bunch of unit tests soon

Browse Source
This commit is contained in:
Eric Rowell 2012-06-30 19:43:52 -07:00
parent 6663b9e612
commit e279ea30b9
4 changed files with 58 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
dist/kinetic-core.js vendored
View File

@ -3948,6 +3948,7 @@ Kinetic.Text = function(config) {
var attr = attrs[n];
this.on(attr + 'Change', function(evt) {
if(!evt.shape) {
that._setTextData();
that._syncAttrs();
}
});
@ -3997,29 +3998,49 @@ Kinetic.Text.prototype = {
height: parseInt(this.attrs.fontSize, 10)
};
},
/**
* set text data. wrap logic and width and height setting occurs
* here
*/
_setTextData: function() {
var charArr = this.attrs.text.split('');
var arr = [];
var lastWord = '';
var row = 0;
this.textArr = [];
this.textWidth = 0;
this.textHeight = 0;
while(charArr.length > 0) {
this.textHeight = this._getTextSize(arr[0]).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;
while(charArr[0] !== undefined && (this.attrs.width === 'auto' || this._getTextSize(line + charArr[0]).width < this.attrs.width - this.attrs.padding)) {
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;
}
if(charArr.length > 0 && charArr[0] !== ' ' && charArr[0] !== '-') {
// remove last word from line
if(charArr.length > 0) {
line = line.substring(0, line.lastIndexOf(lastWord));
}
this.textWidth = Math.max(this.textWidth, this._getTextSize(line).width);
arr.push(line);
if(line.length > 0) {
arr.push(line);
}
row++;
}
this.textHeight = this._getTextSize(arr[0]).height;
this.textArr = arr;
},
/**
* sync attrs. whenever special attrs of the text shape are updated,
* this method is called to sync the Rect and Shape attrs
*/
_syncAttrs: function() {
this.boxShape.setAttrs({
width: this.getBoxWidth(),

2
dist/kinetic-core.min.js vendored
View File

File diff suppressed because one or more lines are too long

33
src/shapes/Text.js
View File

@ -79,6 +79,7 @@ Kinetic.Text = function(config) {
var attr = attrs[n];
this.on(attr + 'Change', function(evt) {
if(!evt.shape) {
that._setTextData();
that._syncAttrs();
}
});
@ -128,29 +129,49 @@ Kinetic.Text.prototype = {
height: parseInt(this.attrs.fontSize, 10)
};
},
/**
* set text data. wrap logic and width and height setting occurs
* here
*/
_setTextData: function() {
var charArr = this.attrs.text.split('');
var arr = [];
var lastWord = '';
var row = 0;
this.textArr = [];
this.textWidth = 0;
this.textHeight = 0;
while(charArr.length > 0) {
this.textHeight = this._getTextSize(arr[0]).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;
while(charArr[0] !== undefined && (this.attrs.width === 'auto' || this._getTextSize(line + charArr[0]).width < this.attrs.width - this.attrs.padding)) {
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;
}
if(charArr.length > 0 && charArr[0] !== ' ' && charArr[0] !== '-') {
// remove last word from line
if(charArr.length > 0) {
line = line.substring(0, line.lastIndexOf(lastWord));
}
this.textWidth = Math.max(this.textWidth, this._getTextSize(line).width);
arr.push(line);
if(line.length > 0) {
arr.push(line);
}
row++;
}
this.textHeight = this._getTextSize(arr[0]).height;
this.textArr = arr;
},
/**
* sync attrs. whenever special attrs of the text shape are updated,
* this method is called to sync the Rect and Shape attrs
*/
_syncAttrs: function() {
this.boxShape.setAttrs({
width: this.getBoxWidth(),

7
tests/js/unitTests.js
View File

@ -2935,7 +2935,7 @@ Test.prototype.tests = {
test(text.getDetectionType() === 'pixel', 'text detection type should be pixel');
},
'SHAPE - text multi line': function(containerId) {
'*SHAPE - text multi line': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@ -2949,12 +2949,12 @@ Test.prototype.tests = {
stroke: '#555',
strokeWidth: 5,
fill: '#ddd',
text: 'All the world \'s a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.',
text: 'All the world\'s a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.',
fontSize: 16,
fontFamily: 'Calibri',
fontStyle: 'normal',
textFill: '#555',
width: 385,
width: 380,
padding: 20,
shadow: {
color: 'black',
@ -2972,7 +2972,6 @@ Test.prototype.tests = {
layer.add(text);
stage.add(layer);
},
'SHAPE - get shape name': function(containerId) {
var stage = new Kinetic.Stage({