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

little fixes

Browse Source
This commit is contained in:
Anton Lavrenov
2023-03-31 19:50:05 -05:00
parent c759ec43be
commit 3d5696bed9
2 changed files with 42 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/shapes/TextPath.ts
View File

@@ -137,17 +137,15 @@ export class TextPath extends Shape<TextPathConfig> {
}
// if possible use native browser method, otherwise use KonvaJS implementation
if (typeof window !== 'undefined' && this.attrs.data && this.path) {
try {
return this.path.getPointAtLength(length);
} catch (e) {
console.warn(e);
// try using KonvaJS implementation as a backup
return Path.getPointAtLengthOfDataArray(length, this.dataArray);
if (this.path) {
// add one extra pixel, because there may be small miscalculations
if (length <= this.path.getTotalLength() + 1) {
this.path.getPointAtLength(length);
} else {
return null;
}
} else {
return Path.getPointAtLengthOfDataArray(length, this.dataArray);
}
return Path.getPointAtLengthOfDataArray(length, this.dataArray);
}
_readDataAttribute() {
@@ -307,6 +305,7 @@ export class TextPath extends Shape<TextPathConfig> {
}
const charEndPoint = this._getPointAtLength(offsetToGlyph + glyphWidth);
if (!charEndPoint) return;
const width = Path.getLineLength(
charStartPoint.x,

35
test/unit/TextPath-test.ts
View File

@@ -51,6 +51,39 @@ describe('TextPath', function () {
);
});
it('Draw more characters then there are path', function () {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var c = 'M 10,10 60,10';
var path = new Konva.Path({
stroke: 'red',
strokeWidth: 1,
data: c,
});
layer.add(path);
var textpath = new Konva.TextPath({
fill: 'orange',
fontSize: 24,
fontFamily: 'Arial',
text: "The quick brown fox jumped over the lazy dog's back",
data: c,
});
layer.add(textpath);
layer.draw();
var trace = layer.getContext().getTrace();
assert.equal(
trace,
'clearRect(0,0,578,200);clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();moveTo(10,10);lineTo(60,10);lineWidth=1;strokeStyle=red;stroke();restore();save();transform(1,0,0,1,0,0);font=normal normal 24px Arial;textBaseline=middle;textAlign=left;save();save();translate(10,10);rotate(0);fillStyle=orange;fillText(T,0,0);restore();save();translate(24.66,10);rotate(0);fillStyle=orange;fillText(h,0,0);restore();save();translate(38.008,10);rotate(0);fillStyle=orange;fillText(e,0,0);restore();save();translate(51.355,10);rotate(0);fillStyle=orange;fillText( ,0,0);restore();restore();restore();'
);
});
// ======================================================
it('Find Next Segment when Arc is in Path', function () {
var stage = addStage();
@@ -728,7 +761,7 @@ describe('TextPath', function () {
assert.equal(rect.height, 0, 'check height');
});
it('check bad calculations', function () {
it.only('check bad calculations', function () {
var stage = addStage();
stage.draggable(true);