mirror of
https://github.com/konvajs/konva.git
synced 2026-01-18 19:51:21 +08:00
migrated text tests. added more context wrapper methods and properties
This commit is contained in:
Eric Rowell
@@ -1,287 +0,0 @@
|
||||
Test.Modules.Text = {
|
||||
'add text with shadows': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var rect = new Kinetic.Rect({
|
||||
x: stage.getWidth() / 2,
|
||||
y: stage.getHeight() / 2,
|
||||
stroke: '#555',
|
||||
strokeWidth: 5,
|
||||
fill: '#ddd',
|
||||
width: 400,
|
||||
height: 100,
|
||||
shadowColor: 'black',
|
||||
shadowBlur: 1,
|
||||
shadowOffset: [10, 10],
|
||||
shadowOpacity: 0.2,
|
||||
cornerRadius: 10
|
||||
});
|
||||
|
||||
var text = new Kinetic.Text({
|
||||
x: stage.getWidth() / 2,
|
||||
y: stage.getHeight() / 2,
|
||||
text: 'Hello World!',
|
||||
fontSize: 50,
|
||||
fontFamily: 'Calibri',
|
||||
fontStyle: 'normal',
|
||||
fill: '#888',
|
||||
stroke: '#333',
|
||||
align: 'right',
|
||||
lineHeight: 1.2,
|
||||
width: 400,
|
||||
height: 100,
|
||||
padding: 10,
|
||||
shadowColor: 'red',
|
||||
shadowBlur: 1,
|
||||
shadowOffset: [10, 10],
|
||||
shadowOpacity: 0.2
|
||||
});
|
||||
|
||||
var group = new Kinetic.Group({
|
||||
draggable: true
|
||||
});
|
||||
|
||||
// center text box
|
||||
rect.setOffset(text.getWidth() / 2, text.getHeight() / 2);
|
||||
text.setOffset(text.getWidth() / 2, text.getHeight() / 2);
|
||||
|
||||
group.add(rect);
|
||||
group.add(text);
|
||||
layer.add(group);
|
||||
stage.add(layer);
|
||||
|
||||
test(text.getClassName() === 'Text', 'getClassName should be Text');
|
||||
},
|
||||
'text getters and setters': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var text = new Kinetic.Text({
|
||||
x: stage.getWidth() / 2,
|
||||
y: stage.getHeight() / 2,
|
||||
text: 'Hello World!',
|
||||
fontSize: 50,
|
||||
fontFamily: 'Calibri',
|
||||
fontStyle: 'normal',
|
||||
fill: '#888',
|
||||
stroke: '#333',
|
||||
align: 'right',
|
||||
lineHeight: 1.2,
|
||||
width: 400,
|
||||
height: 100,
|
||||
padding: 10,
|
||||
shadowColor: 'black',
|
||||
shadowBlur: 1,
|
||||
shadowOffset: [10, 10],
|
||||
shadowOpacity: 0.2,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
// center text box
|
||||
text.setOffset(text.getWidth() / 2, text.getHeight() / 2);
|
||||
|
||||
layer.add(text);
|
||||
stage.add(layer);
|
||||
|
||||
/*
|
||||
* test getters and setters
|
||||
*/
|
||||
|
||||
test(text.getX() === stage.getWidth() / 2, 'text box x should be in center of stage');
|
||||
test(text.getY() === stage.getHeight() / 2, 'text box y should be in center of stage');
|
||||
test(text.getText() === 'Hello World!', 'text should be Hello World!');
|
||||
test(text.getFontSize() == 50, 'font size should 50');
|
||||
test(text.getFontFamily() == 'Calibri', 'font family should be Calibri');
|
||||
test(text.getFontStyle() == 'normal', 'font style should be normal');
|
||||
test(text.getFill() == '#888', 'text fill should be #888');
|
||||
test(text.getStroke() == '#333', 'text fill should be #333');
|
||||
test(text.getAlign() === 'right', 'text should be aligned right');
|
||||
test(text.getLineHeight() === 1.2, 'line height should be 1.2');
|
||||
test(text.getWidth() === 400, 'width should be 400');
|
||||
test(text.getHeight() === 100, 'height should be 100');
|
||||
test(text.getPadding() === 10, 'padding should be 10');
|
||||
test(text.getShadowColor() === 'black', 'text box shadow color should be black');
|
||||
test(text.getDraggable() === true, 'text should be draggable');
|
||||
test(text.getWidth() === 400, 'box width should be 400');
|
||||
test(text.getHeight() === 100, 'box height should be 100');
|
||||
test(text.getTextWidth() > 0, 'text width should be greater than 0');
|
||||
test(text.getTextHeight() > 0, 'text height should be greater than 0');
|
||||
|
||||
text.setX(1);
|
||||
text.setY(2);
|
||||
text.setText('bye world!');
|
||||
text.setFontSize(10);
|
||||
text.setFontFamily('Arial');
|
||||
text.setFontStyle('bold');
|
||||
text.setFill('green');
|
||||
text.setStroke('yellow');
|
||||
text.setAlign('left');
|
||||
text.setWidth(300);
|
||||
text.setHeight(75);
|
||||
text.setPadding(20);
|
||||
text.setShadowColor('green');
|
||||
text.setDraggable(false);
|
||||
|
||||
test(text.getX() === 1, 'text box x should be 1');
|
||||
test(text.getY() === 2, 'text box y should be 2');
|
||||
test(text.getText() === 'bye world!', 'text should be bye world!');
|
||||
test(text.getFontSize() == 10, 'font size should 10');
|
||||
test(text.getFontFamily() == 'Arial', 'font family should be Arial');
|
||||
test(text.getFontStyle() == 'bold', 'font style should be bold');
|
||||
test(text.getFill() == 'green', 'text fill should be green');
|
||||
test(text.getStroke() == 'yellow', 'text fill should be yellow');
|
||||
test(text.getAlign() === 'left', 'text should be aligned left');
|
||||
test(text.getWidth() === 300, 'width should be 300');
|
||||
test(text.getHeight() === 75, 'height should be 75');
|
||||
test(text.getPadding() === 20, 'padding should be 20');
|
||||
test(text.getShadowColor() === 'green', 'text box shadow color should be green');
|
||||
test(text.getDraggable() === false, 'text draggable should be false');
|
||||
|
||||
// test set text to integer
|
||||
text.setText(5);
|
||||
|
||||
//document.body.appendChild(layer.bufferCanvas.element)
|
||||
|
||||
//layer.setListening(false);
|
||||
layer.drawHit();
|
||||
|
||||
},
|
||||
'text multi line': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var rect = new Kinetic.Rect({
|
||||
x: 10,
|
||||
y: 10,
|
||||
width: 380,
|
||||
height: 300,
|
||||
fill: 'red'
|
||||
});
|
||||
|
||||
var text = new Kinetic.Text({
|
||||
x: 10,
|
||||
y: 10,
|
||||
text: 'HEADING\n\nAll the world\'s a stage, merely players. They have their exits and their entrances; And one man in his time plays many parts.',
|
||||
//text: 'HEADING\n\nThis is a really cool paragraph. \n And this is a footer.',
|
||||
fontSize: 24,
|
||||
fontFamily: 'Calibri',
|
||||
fontStyle: 'normal',
|
||||
fill: '#555',
|
||||
//width: 20,
|
||||
width: 380,
|
||||
//width: 200,
|
||||
padding: 10,
|
||||
align: 'center',
|
||||
draggable: true,
|
||||
wrap: 'WORD'
|
||||
});
|
||||
|
||||
// center text box
|
||||
//text.setOffset(text.getBoxWidth() / 2, text.getBoxHeight() / 2);
|
||||
|
||||
layer.add(rect).add(text);
|
||||
stage.add(layer);
|
||||
|
||||
test(text.getLineHeight() === 1, 'text line height should be defaulted to 1');
|
||||
|
||||
/*
|
||||
text.transitionTo({
|
||||
width: 50,
|
||||
duration: 20
|
||||
});
|
||||
|
||||
rect.transitionTo({
|
||||
width: 50,
|
||||
duration: 20
|
||||
});
|
||||
*/
|
||||
|
||||
|
||||
},
|
||||
'text multi line with shadows': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var text = new Kinetic.Text({
|
||||
x: 10,
|
||||
y: 10,
|
||||
//stroke: '#555',
|
||||
//strokeWidth: 5,
|
||||
text: 'HEADING\n\nAll the world\'s a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.',
|
||||
//text: 'HEADING\n\nThis is a really cool paragraph. \n And this is a footer.',
|
||||
fontSize: 16,
|
||||
fontFamily: 'Calibri',
|
||||
fontStyle: 'normal',
|
||||
fill: '#555',
|
||||
//width: 20,
|
||||
width: 380,
|
||||
//width: 200,
|
||||
padding: 20,
|
||||
align: 'center',
|
||||
shadowColor: 'red',
|
||||
shadowBlur: 1,
|
||||
shadowOffset: [10, 10],
|
||||
shadowOpacity: 0.5,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(text);
|
||||
stage.add(layer);
|
||||
|
||||
},
|
||||
'change font size should update text data': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var text = new Kinetic.Text({
|
||||
x: 10,
|
||||
y: 10,
|
||||
text: 'Some awesome text',
|
||||
fontSize: 16,
|
||||
fontFamily: 'Calibri',
|
||||
fontStyle: 'normal',
|
||||
fill: '#555',
|
||||
align: 'center',
|
||||
padding: 5,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
var width = text.getWidth();
|
||||
var height = text.getHeight();
|
||||
|
||||
|
||||
|
||||
layer.add(text);
|
||||
stage.add(layer);
|
||||
|
||||
text.setFontSize(30);
|
||||
layer.draw();
|
||||
|
||||
//console.log(text.getHeight() + ',' + height);
|
||||
|
||||
test(text.getWidth() > width, 'text box width should have increased.');
|
||||
test(text.getHeight() > height, 'text box height should have increased.');
|
||||
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user