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

justify align for Text and TextPath

Browse Source
This commit is contained in:
Anton Lavrenov
2016-12-08 09:08:44 -05:00
parent c001901833
commit 9586d9316d
7 changed files with 116 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -295,6 +295,43 @@ suite('Text', function(){
assert.equal(text.getLineHeight(), 20);
});
// ======================================================
test('text multi line with justify align', function() {
var stage = addStage();
var layer = new Konva.Layer();
var rect = new Konva.Rect({
x: 10,
y: 10,
width: 380,
height: 300,
fill: 'yellow'
});
var text = new Konva.Text({
x: 10,
y: 10,
text: 'HEADING\n\n All the world\'s a stage, merely players. They have their exits and their entrances; And one man in his time plays many parts.',
fontSize: 14,
fontFamily: 'Calibri',
fontStyle: 'normal',
fill: '#555',
width: 380,
align: 'justify',
letterSpacing: 5,
draggable: true
});
rect.height(text.getHeight());
layer.add(rect).add(text);
stage.add(layer);
var trace = 'fillStyle=#555;fillText( ,0,0);translate(9,0);fillStyle=#555;fillText(i,0,0);translate(9,0);fillStyle=#555;fillText(n,0,0);translate(12,0);translate(1,0);fillStyle=#555;fillText( ,0,0);translate(9,0);fillStyle=#555;fillText(h,0,0);translate(12,0);fillStyle=#555;fillText(i,0,0);translate(9,0);fillStyle=#555;fillText(s,0,0);translate(10,0);translate(1,0);fillStyle=#555;fillText( ,0,0);translate(9,0);restore();translate(0,14);save();fillStyle=#555;fillText(t,0,0);translate(9,0);fillStyle=#555;fillText(i,0,0);translate(9,0);fillStyle=#555;fillText(m,0,0);translate(16,0);fillStyle=#555;fillText(e,0,0);translate(11,0);fillStyle=#555;fillText( ,0,0);translate(9,0);fillStyle=#555;fillText(p,0,0);translate(12,0);fillStyle=#555;fillText(l,0,0);translate(9,0);fillStyle=#555;fillText(a,0,0);translate(11,0);fillStyle=#555;fillText(y,0,0);translate(12,0);fillStyle=#555;fillText(s,0,0);translate(10,0);fillStyle=#555;fillText( ,0,0);translate(9,0);fillStyle=#555;fillText(m,0,0);translate(16,0);fillStyle=#555;fillText(a,0,0);translate(11,0);fillStyle=#555;fillText(n,0,0);translate(12,0);fillStyle=#555;fillText(y,0,0);translate(12,0);fillStyle=#555;fillText( ,0,0);translate(9,0);fillStyle=#555;fillText(p,0,0);translate(12,0);fillStyle=#555;fillText(a,0,0);translate(11,0);fillStyle=#555;fillText(r,0,0);translate(10,0);fillStyle=#555;fillText(t,0,0);translate(9,0);fillStyle=#555;fillText(s,0,0);translate(10,0);fillStyle=#555;fillText(.,0,0);translate(9,0);restore();translate(0,14);restore();restore();';
assert.equal(layer.getContext().getTrace(), trace);
});
// ======================================================
test('text multi line with shadows', function() {
var stage = addStage();