lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-01-23 05:14:58 +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();

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

@@ -267,6 +267,36 @@ suite('TextPath', function() {
stage.add(layer);
});
test('Text path with justify align', 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({
stroke: 'black',
strokeWidth: 1,
fill: 'orange',
fontSize: 10,
fontFamily: 'Arial',
letterSpacing: 5,
text: 'All the worlds a stage.',
align: 'justify',
data: c
});
// TODO: add test case
layer.add(textpath);
stage.add(layer);
// console.log(layer.getContext().getTrace(true));
var trace = 'rotate();fillStyle;fillText();lineWidth;strokeStyle;strokeText();restore();save();translate();rotate();fillStyle;fillText();lineWidth;strokeStyle;strokeText();restore();save();translate();rotate();fillStyle;fillText();lineWidth;strokeStyle;strokeText();restore();save();translate();rotate();fillStyle;fillText();lineWidth;strokeStyle;strokeText();restore();save();translate();rotate();fillStyle;fillText();lineWidth;strokeStyle;strokeText();restore();save();translate();rotate();fillStyle;fillText();lineWidth;strokeStyle;strokeText();restore();save();translate();rotate();fillStyle;fillText();lineWidth;strokeStyle;strokeText();restore();save();translate();rotate();fillStyle;fillText();lineWidth;strokeStyle;strokeText();restore();save();translate();rotate();fillStyle;fillText();lineWidth;strokeStyle;strokeText();restore();save();translate();rotate();fillStyle;fillText();lineWidth;strokeStyle;strokeText();restore();save();translate();rotate();fillStyle;fillText();lineWidth;strokeStyle;strokeText();restore();restore();restore();';
assert.equal(layer.getContext().getTrace(true), trace);
});
test('Text path with underline', function() {
var stage = addStage();
var layer = new Konva.Layer();