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

Better unicode support in Konva.Text and Konva.TextPath. Emoji should work better now 👍. fix #690

Browse Source
This commit is contained in:
Anton Lavrenov
2020-09-14 09:46:26 -05:00
parent 800df5b110
commit 4b69631782
11 changed files with 170 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
test/unit/Container-test.js
View File

@@ -21,6 +21,12 @@ suite('Container', function () {
layer.add(group);
group.add(circle);
layer.draw();
var trace = layer.getContext().getTrace();
assert.equal(
trace,
'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();rect(0,0,289,100);clip();transform(1,0,0,1,0,0);restore();clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();rect(0,0,289,100);clip();transform(1,0,0,1,0,0);save();transform(1,0,0,1,289,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();restore();'
);
});
// ======================================================
@@ -203,6 +209,12 @@ suite('Container', function () {
layer.add(group);
group.add(circle);
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,289,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();'
);
});
// ======================================================
@@ -223,6 +235,14 @@ suite('Container', function () {
group.add(circle);
stage.add(layer);
layer.add(group);
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,289,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();'
);
});
// ======================================================

6
test/unit/Node-test.js
View File

@@ -1813,6 +1813,12 @@ suite('Node', function () {
layer.add(circle);
stage.add(layer);
var trace = layer.getContext().getTrace();
assert.equal(
trace,
'clearRect(0,0,578,200);save();transform(1.879,0.684,-0.342,0.94,14.581,42.306);beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();'
);
});
// ======================================================

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

@@ -137,6 +137,31 @@ suite('Text', function () {
compareLayerAndCanvas(layer, canvas, 254);
});
test('check emoji with letterSpacing', function () {
var stage = addStage();
var layer = new Konva.Layer();
var text = new Konva.Text({
x: 10,
y: 10,
text: '😬',
fontSize: 50,
letterSpacing: 1,
});
layer.add(text);
stage.add(layer);
var canvas = createCanvas();
var context = canvas.getContext('2d');
context.textBaseline = 'middle';
context.font = 'normal normal 50px Arial';
context.fillStyle = 'darkgrey';
context.fillText('😬', 10, 10 + 25);
compareLayerAndCanvas(layer, canvas, 254);
});
test('text cache with fill and shadow', function () {
var stage = addStage();
var layer1 = new Konva.Layer();

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

@@ -315,6 +315,31 @@ suite('TextPath', function () {
assert.equal(layer.getContext().getTrace(true), trace);
});
test('Text path with emoji', function () {
var stage = addStage();
var layer = new Konva.Layer();
var c = 'M10,10 300, 10';
var textpath = new Konva.TextPath({
fill: 'black',
fontSize: 10,
fontFamily: 'Arial',
letterSpacing: 5,
text: '😬',
align: 'center',
data: c,
});
layer.add(textpath);
stage.add(layer);
var trace =
'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);font=normal normal 10px Arial;textBaseline=middle;textAlign=left;save();save();translate(144.438,10);rotate(0);fillStyle=black;fillText(😬,0,0);restore();restore();restore();';
assert.equal(layer.getContext().getTrace(), trace);
});
test.skip('Text path with center align - arc', function () {
var stage = addStage();
var layer = new Konva.Layer();