mirror of
https://github.com/konvajs/konva.git
synced 2025-06-28 11:42:17 +08:00
justify fix for space in line
This commit is contained in:
Anton Lavrenov
parent
9586d9316d
commit
b51ae24e33
21
konva.js
21
konva.js
@ -13139,8 +13139,8 @@
|
||||
for(var li = 0; li < text.length; li++) {
|
||||
var letter = text[li];
|
||||
// skip justify for the last line
|
||||
if ((letter === ' ') && (n !== textArrLen - 1)) {
|
||||
context.translate(Math.ceil((totalWidth - width) / spacesNumber), 0);
|
||||
if ((letter === ' ') && (n !== textArrLen - 1) && align === JUSTIFY) {
|
||||
context.translate(((totalWidth - width) / spacesNumber), 0);
|
||||
}
|
||||
this.partialText = letter;
|
||||
context.fillStrokeShape(this);
|
||||
@ -13244,7 +13244,11 @@
|
||||
this.getFontSize() + PX_SPACE +
|
||||
this.getFontFamily();
|
||||
},
|
||||
_addTextLine: function (line, width) {
|
||||
_addTextLine: function (line) {
|
||||
if (this.align() === JUSTIFY) {
|
||||
line = line.trim();
|
||||
}
|
||||
var width = this._getTextWidth(line);
|
||||
return this.textArr.push({text: line, width: width});
|
||||
},
|
||||
_getTextWidth: function (text) {
|
||||
@ -13274,8 +13278,9 @@
|
||||
dummyContext.save();
|
||||
dummyContext.font = this._getContextFont();
|
||||
for (var i = 0, max = lines.length; i < max; ++i) {
|
||||
var line = lines[i],
|
||||
lineWidth = this._getTextWidth(line);
|
||||
var line = lines[i];
|
||||
|
||||
var lineWidth = this._getTextWidth(line);
|
||||
if (fixedWidth && lineWidth > maxWidth) {
|
||||
/*
|
||||
* if width is fixed and line does not fit entirely
|
||||
@ -13318,7 +13323,7 @@
|
||||
matchWidth = this._getTextWidth(match);
|
||||
}
|
||||
}
|
||||
this._addTextLine(match, matchWidth);
|
||||
this._addTextLine(match);
|
||||
textWidth = Math.max(textWidth, matchWidth);
|
||||
currentHeightPx += lineHeightPx;
|
||||
if (!shouldWrap ||
|
||||
@ -13335,7 +13340,7 @@
|
||||
lineWidth = this._getTextWidth(line);
|
||||
if (lineWidth <= maxWidth) {
|
||||
// if it does, add the line and break out of the loop
|
||||
this._addTextLine(line, lineWidth);
|
||||
this._addTextLine(line);
|
||||
currentHeightPx += lineHeightPx;
|
||||
textWidth = Math.max(textWidth, lineWidth);
|
||||
break;
|
||||
@ -13348,7 +13353,7 @@
|
||||
}
|
||||
} else {
|
||||
// element width is automatically adjusted to max line width
|
||||
this._addTextLine(line, lineWidth);
|
||||
this._addTextLine(line);
|
||||
currentHeightPx += lineHeightPx;
|
||||
textWidth = Math.max(textWidth, lineWidth);
|
||||
}
|
||||
|
||||
8
konva.min.js
vendored
8
konva.min.js
vendored
File diff suppressed because one or more lines are too long
@ -159,8 +159,8 @@
|
||||
for(var li = 0; li < text.length; li++) {
|
||||
var letter = text[li];
|
||||
// skip justify for the last line
|
||||
if ((letter === ' ') && (n !== textArrLen - 1)) {
|
||||
context.translate(Math.ceil((totalWidth - width) / spacesNumber), 0);
|
||||
if ((letter === ' ') && (n !== textArrLen - 1) && align === JUSTIFY) {
|
||||
context.translate(((totalWidth - width) / spacesNumber), 0);
|
||||
}
|
||||
this.partialText = letter;
|
||||
context.fillStrokeShape(this);
|
||||
@ -264,7 +264,11 @@
|
||||
this.getFontSize() + PX_SPACE +
|
||||
this.getFontFamily();
|
||||
},
|
||||
_addTextLine: function (line, width) {
|
||||
_addTextLine: function (line) {
|
||||
if (this.align() === JUSTIFY) {
|
||||
line = line.trim();
|
||||
}
|
||||
var width = this._getTextWidth(line);
|
||||
return this.textArr.push({text: line, width: width});
|
||||
},
|
||||
_getTextWidth: function (text) {
|
||||
@ -294,8 +298,9 @@
|
||||
dummyContext.save();
|
||||
dummyContext.font = this._getContextFont();
|
||||
for (var i = 0, max = lines.length; i < max; ++i) {
|
||||
var line = lines[i],
|
||||
lineWidth = this._getTextWidth(line);
|
||||
var line = lines[i];
|
||||
|
||||
var lineWidth = this._getTextWidth(line);
|
||||
if (fixedWidth && lineWidth > maxWidth) {
|
||||
/*
|
||||
* if width is fixed and line does not fit entirely
|
||||
@ -338,7 +343,7 @@
|
||||
matchWidth = this._getTextWidth(match);
|
||||
}
|
||||
}
|
||||
this._addTextLine(match, matchWidth);
|
||||
this._addTextLine(match);
|
||||
textWidth = Math.max(textWidth, matchWidth);
|
||||
currentHeightPx += lineHeightPx;
|
||||
if (!shouldWrap ||
|
||||
@ -355,7 +360,7 @@
|
||||
lineWidth = this._getTextWidth(line);
|
||||
if (lineWidth <= maxWidth) {
|
||||
// if it does, add the line and break out of the loop
|
||||
this._addTextLine(line, lineWidth);
|
||||
this._addTextLine(line);
|
||||
currentHeightPx += lineHeightPx;
|
||||
textWidth = Math.max(textWidth, lineWidth);
|
||||
break;
|
||||
@ -368,7 +373,7 @@
|
||||
}
|
||||
} else {
|
||||
// element width is automatically adjusted to max line width
|
||||
this._addTextLine(line, lineWidth);
|
||||
this._addTextLine(line);
|
||||
currentHeightPx += lineHeightPx;
|
||||
textWidth = Math.max(textWidth, lineWidth);
|
||||
}
|
||||
|
||||
@ -325,11 +325,30 @@ suite('Text', function(){
|
||||
|
||||
rect.height(text.getHeight());
|
||||
layer.add(rect).add(text);
|
||||
|
||||
|
||||
// var text2 = new Konva.Text({
|
||||
// x: 10,
|
||||
// y: 110,
|
||||
// text: 'HEADING\n\n All the world\'s a stage, merely players. They have their exits and their entrances; And one man in his time plays many parts.',
|
||||
// fontSize: 14,
|
||||
// fontFamily: 'Calibri',
|
||||
// fontStyle: 'normal',
|
||||
// fill: '#555',
|
||||
// width: 380,
|
||||
// letterSpacing: 5,
|
||||
// draggable: true
|
||||
// });
|
||||
|
||||
// layer.add(rect).add(text2);
|
||||
|
||||
stage.add(layer);
|
||||
|
||||
var trace = 'fillStyle=#555;fillText( ,0,0);translate(9,0);fillStyle=#555;fillText(i,0,0);translate(9,0);fillStyle=#555;fillText(n,0,0);translate(12,0);translate(1,0);fillStyle=#555;fillText( ,0,0);translate(9,0);fillStyle=#555;fillText(h,0,0);translate(12,0);fillStyle=#555;fillText(i,0,0);translate(9,0);fillStyle=#555;fillText(s,0,0);translate(10,0);translate(1,0);fillStyle=#555;fillText( ,0,0);translate(9,0);restore();translate(0,14);save();fillStyle=#555;fillText(t,0,0);translate(9,0);fillStyle=#555;fillText(i,0,0);translate(9,0);fillStyle=#555;fillText(m,0,0);translate(16,0);fillStyle=#555;fillText(e,0,0);translate(11,0);fillStyle=#555;fillText( ,0,0);translate(9,0);fillStyle=#555;fillText(p,0,0);translate(12,0);fillStyle=#555;fillText(l,0,0);translate(9,0);fillStyle=#555;fillText(a,0,0);translate(11,0);fillStyle=#555;fillText(y,0,0);translate(12,0);fillStyle=#555;fillText(s,0,0);translate(10,0);fillStyle=#555;fillText( ,0,0);translate(9,0);fillStyle=#555;fillText(m,0,0);translate(16,0);fillStyle=#555;fillText(a,0,0);translate(11,0);fillStyle=#555;fillText(n,0,0);translate(12,0);fillStyle=#555;fillText(y,0,0);translate(12,0);fillStyle=#555;fillText( ,0,0);translate(9,0);fillStyle=#555;fillText(p,0,0);translate(12,0);fillStyle=#555;fillText(a,0,0);translate(11,0);fillStyle=#555;fillText(r,0,0);translate(10,0);fillStyle=#555;fillText(t,0,0);translate(9,0);fillStyle=#555;fillText(s,0,0);translate(10,0);fillStyle=#555;fillText(.,0,0);translate(9,0);restore();translate(0,14);restore();restore();';
|
||||
|
||||
|
||||
assert.equal(layer.getContext().getTrace(), trace);
|
||||
var trace = 'fillStyle;fillText();translate();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();restore();translate();save();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();fillStyle;fillText();translate();restore();translate();restore();restore();';
|
||||
|
||||
assert.equal(layer.getContext().getTrace(true), trace);
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
|
||||
Loading…
Reference in New Issue
Block a user