lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-01-22 03:11:53 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

new property for Konva.Text and Konva.TextPath: textDecoration

Browse Source
This commit is contained in:
Anton Lavrenov
2016-12-07 16:46:59 -05:00
parent 43fa56a381
commit 115002aaf6
8 changed files with 201 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -330,6 +330,33 @@ suite('Text', function(){
});
// ======================================================
test('text multi line with textDecoration and spacing', function() {
var stage = addStage();
var layer = new Konva.Layer();
var text = new Konva.Text({
x: 10,
y: 10,
text: 'hello\nworld',
fontSize: 15,
fill: 'red',
letterSpacing: 5,
textDecoration: 'underline'
});
layer.add(text);
stage.add(layer);
var trace = 'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);font=normal normal 15px Arial;textBaseline=middle;textAlign=left;save();translate(0,7.5);save();save();moveTo(0,8);lineTo(52,8);stroke();restore();fillStyle=red;fillText(h,0,0);translate(13,0);fillStyle=red;fillText(e,0,0);translate(13,0);fillStyle=red;fillText(l,0,0);translate(8,0);fillStyle=red;fillText(l,0,0);translate(8,0);fillStyle=red;fillText(o,0,0);translate(13,0);restore();translate(0,15);save();save();moveTo(0,8);lineTo(56,8);stroke();restore();fillStyle=red;fillText(w,0,0);translate(16,0);fillStyle=red;fillText(o,0,0);translate(13,0);fillStyle=red;fillText(r,0,0);translate(10,0);fillStyle=red;fillText(l,0,0);translate(8,0);fillStyle=red;fillText(d,0,0);translate(13,0);restore();translate(0,15);restore();restore();';
assert.equal(layer.getContext().getTrace(), trace);
});
// ======================================================
test('change font size should update text data', function() {
var stage = addStage();

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

@@ -145,6 +145,8 @@ suite('TextPath', function() {
});
// ======================================================
test('Render Text Along Elliptical Arc', function() {
var stage = addStage();
@@ -265,6 +267,31 @@ suite('TextPath', function() {
stage.add(layer);
});
test('Text path with underline', function() {
var stage = addStage();
var layer = new Konva.Layer();
var c = "M10,10 C0,0 10,150 100,100 S300,150 400,50";
var textpath = new Konva.TextPath({
fill: 'orange',
fontSize: 10,
fontFamily: 'Arial',
letterSpacing: 5,
text: 'All the worlds a stage.',
textDecoration: 'underline',
data: c
});
layer.add(textpath);
stage.add(layer);
var trace = 'rotate();fillStyle;fillText();lineTo();restore();save();translate();rotate();fillStyle;fillText();lineTo();restore();save();translate();rotate();fillStyle;fillText();lineTo();restore();save();translate();rotate();fillStyle;fillText();lineTo();restore();save();translate();rotate();fillStyle;fillText();lineTo();restore();save();translate();rotate();fillStyle;fillText();lineTo();restore();save();translate();rotate();fillStyle;fillText();lineTo();restore();save();translate();rotate();fillStyle;fillText();lineTo();restore();save();translate();rotate();fillStyle;fillText();lineTo();restore();save();translate();rotate();fillStyle;fillText();lineTo();restore();save();translate();rotate();fillStyle;fillText();lineTo();restore();save();translate();rotate();fillStyle;fillText();lineTo();restore();save();translate();rotate();fillStyle;fillText();lineTo();restore();save();translate();rotate();fillStyle;fillText();lineTo();restore();stroke();restore();restore();';
assert.equal(layer.getContext().getTrace(true), trace);
});
test('Text with baseline', function() {
var stage = addStage();