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

fix path calculations

Browse Source
This commit is contained in:
Anton Lavrenov 2019-10-11 09:14:53 -05:00
parent d6c6d87b73
commit 7de82e5823
4 changed files with 91 additions and 1336 deletions

3
CHANGELOG.md
View File

@ -5,6 +5,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
## Not released:
* TS fixes
* Better calculations for `TextPath` with align = right.
## 4.0.14 - 2019-10-11
* TS fixes

1385
konva.js
View File

File diff suppressed because it is too large Load Diff

8
src/shapes/TextPath.ts
View File

@ -441,11 +441,13 @@ export class TextPath extends Shape<TextPathConfig> {
}
};
// fake search for offset, this is very bad approach
// find other way to add offset from start (for align)
// fake search for offset, this is the best approach
var testChar = 'C';
var glyphWidth = that._getTextSize(testChar).width + letterSpacing;
for (var k = 0; k < offset / glyphWidth; k++) {
var lettersInOffset = offset / glyphWidth - 1;
// the idea is simple
// try to draw testChar until we fill offset
for (var k = 0; k < lettersInOffset; k++) {
findSegmentToFitCharacter(testChar);
if (p0 === undefined || p1 === undefined) {
break;

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

@ -315,6 +315,37 @@ suite('TextPath', function() {
assert.equal(layer.getContext().getTrace(true), trace);
});
test.only('Text path with align right', function() {
var stage = addStage();
var layer = new Konva.Layer();
var c = 'M10,10 300, 10';
var path = new Konva.Path({
stroke: 'red',
data: c
});
layer.add(path);
var textpath = new Konva.TextPath({
fill: 'black',
fontSize: 10,
fontFamily: 'Arial',
text: "All the world's a stage.",
align: 'right',
data: c
});
layer.add(textpath);
stage.add(layer);
var trace =
"restore();save();translate(228.335,10);rotate(0);fillStyle=black;fillText(w,0,0);restore();save();translate(235.557,10);rotate(0);fillStyle=black;fillText(o,0,0);restore();save();translate(241.118,10);rotate(0);fillStyle=black;fillText(r,0,0);restore();save();translate(244.448,10);rotate(0);fillStyle=black;fillText(l,0,0);restore();save();translate(246.67,10);rotate(0);fillStyle=black;fillText(d,0,0);restore();save();translate(252.231,10);rotate(0);fillStyle=black;fillText(',0,0);restore();save();translate(254.141,10);rotate(0);fillStyle=black;fillText(s,0,0);restore();save();translate(259.141,10);rotate(0);fillStyle=black;fillText( ,0,0);restore();save();translate(261.919,10);rotate(0);fillStyle=black;fillText(a,0,0);restore();save();translate(267.48,10);rotate(0);fillStyle=black;fillText( ,0,0);restore();save();translate(270.259,10);rotate(0);fillStyle=black;fillText(s,0,0);restore();save();translate(275.259,10);rotate(0);fillStyle=black;fillText(t,0,0);restore();save();translate(278.037,10);rotate(0);fillStyle=black;fillText(a,0,0);restore();save();translate(283.599,10);rotate(0);fillStyle=black;fillText(g,0,0);restore();save();translate(289.16,10);rotate(0);fillStyle=black;fillText(e,0,0);restore();save();translate(294.722,10);rotate(0);fillStyle=black;fillText(.,0,0);restore();restore();restore();";
assert.equal(layer.getContext().getTrace(), trace);
});
test('Text path with justify align', function() {
var stage = addStage();
var layer = new Konva.Layer();