mirror of
https://github.com/konvajs/konva.git
synced 2025-09-19 10:47:59 +08:00
migrated more plugin tests, and continued working on context tracer
This commit is contained in:
Eric Rowell
79
test/unit/plugins/Label-test.js
Normal file
79
test/unit/plugins/Label-test.js
Normal file
@@ -0,0 +1,79 @@
|
||||
suite('Label', function() {
|
||||
// ======================================================
|
||||
test('add label', function() {
|
||||
var stage = buildStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var label = new Kinetic.Label({
|
||||
x: 100,
|
||||
y: 100,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
// add a tag to the label
|
||||
label.add(new Kinetic.Tag({
|
||||
fill: '#bbb',
|
||||
stroke: '#333',
|
||||
shadowColor: 'black',
|
||||
shadowBlur: 10,
|
||||
shadowOffset: [10, 10],
|
||||
shadowOpacity: 0.2,
|
||||
lineJoin: 'round',
|
||||
pointerDirection: 'up',
|
||||
pointerWidth: 20,
|
||||
pointerHeight: 20,
|
||||
cornerRadius: 5
|
||||
}));
|
||||
|
||||
// add text to the label
|
||||
label.add(new Kinetic.Text({
|
||||
text: '',
|
||||
fontSize: 50,
|
||||
//fontFamily: 'Calibri',
|
||||
//fontStyle: 'normal',
|
||||
lineHeight: 1.2,
|
||||
//padding: 10,
|
||||
fill: 'green'
|
||||
}));
|
||||
|
||||
layer.add(label);
|
||||
stage.add(layer);
|
||||
|
||||
|
||||
var beforeTextWidth = label.getText().getWidth();
|
||||
|
||||
label.getText().setFontSize(100);
|
||||
|
||||
var afterTextWidth = label.getText().getWidth();
|
||||
|
||||
label.getText().setFontSize(50);
|
||||
|
||||
label.getText().setText('Hello big world');
|
||||
|
||||
layer.draw();
|
||||
|
||||
|
||||
assert.equal(label.getType(), 'Group');
|
||||
assert.equal(label.getClassName(), 'Label');
|
||||
|
||||
var json = label.toJSON();
|
||||
//console.log(json);
|
||||
|
||||
var trace = layer.getContext().getTrace();
|
||||
//console.log(trace);
|
||||
assert.equal(trace, 'clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,100,120);beginPath();moveTo(0,0);lineTo(-10,0);lineTo(0,-20);lineTo(10,0);lineTo(0,0);lineTo(0,60);lineTo(0,60);closePath();save();globalAlpha=0.2;shadowColor=black;shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;fillStyle=#bbb;fill();restore();fillStyle=#bbb;fill();lineWidth=2;strokeStyle=#333;stroke();restore();save();transform(1,0,0,1,100,120);font=normal 50px Calibri;textBaseline=middle;textAlign=left;save();translate(0,0);translate(0,25);save();fillStyle=green;fillText(,0,0);restore();translate(0,60);restore();restore();clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,-51.5,120);beginPath();moveTo(0,0);lineTo(141.5,0);lineTo(151.5,-20);lineTo(161.5,0);lineTo(303,0);lineTo(303,60);lineTo(0,60);closePath();save();globalAlpha=0.2;shadowColor=black;shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;fillStyle=#bbb;fill();restore();fillStyle=#bbb;fill();lineWidth=2;strokeStyle=#333;stroke();restore();save();transform(1,0,0,1,-51.5,120);font=normal 50px Calibri;textBaseline=middle;textAlign=left;save();translate(0,0);translate(0,25);save();fillStyle=green;fillText(Hello big world,0,0);restore();translate(0,60);restore();restore()');
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('create label from json', function() {
|
||||
var stage = buildStage();
|
||||
|
||||
var json = '{"attrs":{"x":100,"y":100,"draggable":true},"className":"Label","children":[{"attrs":{"fill":"#bbb","stroke":"#333","shadowColor":"black","shadowBlur":10,"shadowOffsetX":10,"shadowOffsetY":10,"shadowOpacity":0.2,"lineJoin":"round","pointerDirection":"up","pointerWidth":20,"pointerHeight":20,"cornerRadius":5,"x":-151.5,"y":20,"width":303,"height":60},"className":"Tag"},{"attrs":{"text":"Hello big world","fontSize":50,"lineHeight":1.2,"fill":"green","width":"auto","height":"auto","x":-151.5,"y":20},"className":"Text"}]}';
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var label = Kinetic.Node.create(json);
|
||||
|
||||
layer.add(label);
|
||||
stage.add(layer);
|
||||
});
|
||||
});
|
||||
90
test/unit/plugins/RegularPolygon-test.js
Normal file
90
test/unit/plugins/RegularPolygon-test.js
Normal file
@@ -0,0 +1,90 @@
|
||||
suite('RegularPolygon', function() {
|
||||
// ======================================================
|
||||
test('add regular polygon triangle', function() {
|
||||
var stage = buildStage();
|
||||
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var poly = new Kinetic.RegularPolygon({
|
||||
x: 200,
|
||||
y: 100,
|
||||
sides: 3,
|
||||
radius: 50,
|
||||
fill: 'green',
|
||||
stroke: 'blue',
|
||||
strokeWidth: 5,
|
||||
name: 'foobar',
|
||||
offset: {
|
||||
x: 0,
|
||||
y: -50
|
||||
}
|
||||
});
|
||||
|
||||
layer.add(poly);
|
||||
stage.add(layer);
|
||||
|
||||
assert.equal(poly.getClassName(), 'RegularPolygon');
|
||||
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('add regular polygon square', function() {
|
||||
var stage = buildStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var poly = new Kinetic.RegularPolygon({
|
||||
x: 200,
|
||||
y: 100,
|
||||
sides: 4,
|
||||
radius: 50,
|
||||
fill: 'green',
|
||||
stroke: 'blue',
|
||||
strokeWidth: 5,
|
||||
name: 'foobar'
|
||||
});
|
||||
|
||||
layer.add(poly);
|
||||
stage.add(layer);
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('add regular polygon pentagon', function() {
|
||||
var stage = buildStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var poly = new Kinetic.RegularPolygon({
|
||||
x: 200,
|
||||
y: 100,
|
||||
sides: 5,
|
||||
radius: 50,
|
||||
fill: 'green',
|
||||
stroke: 'blue',
|
||||
strokeWidth: 5,
|
||||
name: 'foobar'
|
||||
});
|
||||
|
||||
layer.add(poly);
|
||||
stage.add(layer);
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('add regular polygon octogon', function() {
|
||||
var stage = buildStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var poly = new Kinetic.RegularPolygon({
|
||||
x: 200,
|
||||
y: 100,
|
||||
sides: 8,
|
||||
radius: 50,
|
||||
fill: 'green',
|
||||
stroke: 'blue',
|
||||
strokeWidth: 5,
|
||||
name: 'foobar'
|
||||
});
|
||||
|
||||
layer.add(poly);
|
||||
stage.add(layer);
|
||||
});
|
||||
|
||||
});
|
||||
75
test/unit/plugins/Star-test.js
Normal file
75
test/unit/plugins/Star-test.js
Normal file
@@ -0,0 +1,75 @@
|
||||
suite('Star', function() {
|
||||
// ======================================================
|
||||
test('add five point star', function() {
|
||||
var stage = buildStage();
|
||||
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var star = new Kinetic.Star({
|
||||
x: 200,
|
||||
y: 100,
|
||||
numPoints: 5,
|
||||
innerRadius: 40,
|
||||
outerRadius: 70,
|
||||
fill: 'green',
|
||||
stroke: 'blue',
|
||||
strokeWidth: 5,
|
||||
name: 'foobar',
|
||||
offset: {
|
||||
x: 0,
|
||||
y: -70
|
||||
},
|
||||
scale: {
|
||||
x: 0.5,
|
||||
y: 0.5
|
||||
}
|
||||
});
|
||||
|
||||
layer.add(star);
|
||||
stage.add(layer);
|
||||
|
||||
assert.equal(star.getClassName(), 'Star');
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('add star with line join and shadow', function() {
|
||||
var stage = buildStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var rect = new Kinetic.Rect({
|
||||
x: 250,
|
||||
y: 75,
|
||||
width: 100,
|
||||
height: 100,
|
||||
fill: 'red'
|
||||
});
|
||||
|
||||
var star = new Kinetic.Star({
|
||||
x: 200,
|
||||
y: 100,
|
||||
numPoints: 5,
|
||||
innerRadius: 40,
|
||||
outerRadius: 70,
|
||||
fill: 'green',
|
||||
stroke: 'blue',
|
||||
strokeWidth: 5,
|
||||
lineJoin: "round",
|
||||
shadowColor: 'black',
|
||||
shadowBlur: 10,
|
||||
shadowOffset: [20, 20],
|
||||
shadowOpacity: 0.5,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(rect);
|
||||
layer.add(star);
|
||||
|
||||
stage.add(layer);
|
||||
|
||||
assert.equal(star.getLineJoin(), 'round');
|
||||
star.setLineJoin('bevel');
|
||||
assert.equal(star.getLineJoin(), 'bevel');
|
||||
|
||||
star.setLineJoin('round');
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user