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

Better wrap algorithm for Konva.Text

Browse Source
This commit is contained in:
Anton Lavrenov
2018-04-30 10:40:49 +08:00
parent c7b9e9a385
commit 2ac7e692f6
5 changed files with 52 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@@ -10,6 +10,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
* Cursor fixes for `Konva.Transformer`
* Fixed lineHeight behavior for `Konva.Text`
* Some performance optimizations for `Konva.Text`
* Better wrap algorithm for `Konva.Text`
## [2.0.3][2018-04-21]

17
konva.js
View File

@@ -2,7 +2,7 @@
* Konva JavaScript Framework v2.0.3
* http://konvajs.github.io/
* Licensed under the MIT
* Date: Tue Apr 24 2018
* Date: Mon Apr 30 2018
*
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -14923,9 +14923,18 @@
// a fitting substring was found
if (wrapAtWord) {
// try to find a space or dash where wrapping could be done
var wrapIndex =
Math.max(match.lastIndexOf(SPACE), match.lastIndexOf(DASH)) +
1;
var wrapIndex;
var nextChar = line[match.length];
var nextIsSpaceOrDash = nextChar === SPACE || nextChar === DASH;
if (nextIsSpaceOrDash && matchWidth <= maxWidth) {
wrapIndex = match.length;
} else {
wrapIndex =
Math.max(
match.lastIndexOf(SPACE),
match.lastIndexOf(DASH)
) + 1;
}
if (wrapIndex > 0) {
// re-cut the substring found at the space/dash position
low = wrapIndex;

8
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

15
src/shapes/Text.js
View File

@@ -387,9 +387,18 @@
// a fitting substring was found
if (wrapAtWord) {
// try to find a space or dash where wrapping could be done
var wrapIndex =
Math.max(match.lastIndexOf(SPACE), match.lastIndexOf(DASH)) +
1;
var wrapIndex;
var nextChar = line[match.length];
var nextIsSpaceOrDash = nextChar === SPACE || nextChar === DASH;
if (nextIsSpaceOrDash && matchWidth <= maxWidth) {
wrapIndex = match.length;
} else {
wrapIndex =
Math.max(
match.lastIndexOf(SPACE),
match.lastIndexOf(DASH)
) + 1;
}
if (wrapIndex > 0) {
// re-cut the substring found at the space/dash position
low = wrapIndex;

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

@@ -744,8 +744,28 @@ suite('Text', function() {
var trace =
'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);font=normal normal 40px Arial;textBaseline=middle;textAlign=left;translate(0,60);save();fillStyle=black;fillText(Some good text,0,0);restore();restore();';
console.log(layer.getContext().getTrace());
console.log(trace);
assert.equal(layer.getContext().getTrace(), trace);
});
test('check wrapping', function() {
var stage = addStage();
var layer = new Konva.Layer();
var text = new Konva.Text({
fontSize: 40,
text: 'Hello, this is some good text',
width: 185,
draggable: true
});
layer.add(text);
stage.add(layer);
var lines = text.textArr;
// first line should fit "Hello, this"
// I faced this issue in large app
// we should draw as much text in one line, as possible
// so Konva.Text + textarea editing works better
assert.equal(lines[0].text, 'Hello, this');
});
});