mirror of
https://github.com/konvajs/konva.git
synced 2025-10-15 12:34:52 +08:00
added image unit tests. Added stage factory function to mocha runner
This commit is contained in:
Eric Rowell
@@ -7,27 +7,58 @@
|
||||
#mocha .test {
|
||||
overflow: auto;
|
||||
}
|
||||
h2.kinetic-title {
|
||||
font-family: Calibri;
|
||||
font-size: 16px;
|
||||
color: #555;
|
||||
border-top: 2px solid #999;
|
||||
padding-left: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="mocha"></div>
|
||||
|
||||
<!-- used for KineticJS container -->
|
||||
<div id="container"></div>
|
||||
<div id="kinetic-container"></div>
|
||||
|
||||
<script src="../node_modules/mocha/mocha.js"></script>
|
||||
<script src="../node_modules/chai/chai.js"></script>
|
||||
<script src="../dist/kinetic-dev.js"></script>
|
||||
<script>
|
||||
mocha.ui('tdd');
|
||||
var assert = chai.assert;
|
||||
var assert = chai.assert,
|
||||
kineticContainer = document.getElementById('kinetic-container');
|
||||
|
||||
Kinetic.enableTrace = true;
|
||||
|
||||
function buildStage() {
|
||||
var container = document.createElement('div'),
|
||||
stage = new Kinetic.Stage({
|
||||
container: container,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
|
||||
kineticContainer.appendChild(container);
|
||||
|
||||
return stage;
|
||||
}
|
||||
|
||||
beforeEach(function(){
|
||||
console.log(this)
|
||||
var title = document.createElement('h2'),
|
||||
test = this.currentTest;
|
||||
|
||||
title.innerHTML = test.parent.title + ' - ' + test.title;
|
||||
title.className = 'kinetic-title';
|
||||
kineticContainer.appendChild(title);
|
||||
});
|
||||
</script>
|
||||
<script src="unit/Util-test.js"></script>
|
||||
|
||||
<script src="unit/Rect-test.js"></script>
|
||||
<script src="unit/Circle-test.js"></script>
|
||||
<script src="unit/Image-test.js"></script>
|
||||
<script src="unit/Line-test.js"></script>
|
||||
<script src="unit/Text-test.js"></script>
|
||||
<script src="unit/Blob-test.js"></script>
|
||||
<script src="unit/Ellipse-test.js"></script>
|
||||
|
||||
@@ -1,11 +1,7 @@
|
||||
suite('Blob', function(){
|
||||
// ======================================================
|
||||
test('add blobs', function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var stage = buildStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var blob1 = new Kinetic.Blob({
|
||||
@@ -69,11 +65,7 @@ suite('Blob', function(){
|
||||
|
||||
// ======================================================
|
||||
test('add blob and define tension first', function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var stage = buildStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
|
||||
@@ -108,11 +100,7 @@ suite('Blob', function(){
|
||||
|
||||
// ======================================================
|
||||
test('check for kinetic event handlers', function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var stage = buildStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var blob = new Kinetic.Blob({
|
||||
|
||||
@@ -2,11 +2,7 @@ suite('Circle', function(){
|
||||
// ======================================================
|
||||
|
||||
test('add circle to stage', function(){
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var stage = buildStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
var group = new Kinetic.Group();
|
||||
var circle = new Kinetic.Circle({
|
||||
@@ -49,11 +45,7 @@ suite('Circle', function(){
|
||||
test('add circle with pattern fill', function(done) {
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var stage = buildStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
var group = new Kinetic.Group();
|
||||
var circle = new Kinetic.Circle({
|
||||
@@ -96,11 +88,7 @@ suite('Circle', function(){
|
||||
|
||||
// ======================================================
|
||||
test('add circle with radial gradient fill', function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var stage = buildStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
var group = new Kinetic.Group();
|
||||
var circle = new Kinetic.Circle({
|
||||
@@ -136,11 +124,7 @@ suite('Circle', function(){
|
||||
|
||||
// ======================================================
|
||||
test('add shape with linear gradient fill', function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var stage = buildStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
var group = new Kinetic.Group();
|
||||
var circle = new Kinetic.Circle({
|
||||
@@ -166,11 +150,7 @@ suite('Circle', function(){
|
||||
|
||||
// ======================================================
|
||||
test('set opacity after instantiation', function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var stage = buildStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
var group = new Kinetic.Group();
|
||||
var circle = new Kinetic.Circle({
|
||||
@@ -193,11 +173,7 @@ suite('Circle', function(){
|
||||
|
||||
// ======================================================
|
||||
test('set fill after instantiation', function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var stage = buildStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
var circle = new Kinetic.Circle({
|
||||
x: stage.getWidth() / 2,
|
||||
|
||||
@@ -2,11 +2,7 @@ suite('Ellipse', function(){
|
||||
|
||||
// ======================================================
|
||||
test('add ellipse', function(){
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var stage = buildStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
var ellipse = new Kinetic.Ellipse({
|
||||
x: stage.getWidth() / 2,
|
||||
|
||||
300
test/unit/Image-test.js
Normal file
300
test/unit/Image-test.js
Normal file
@@ -0,0 +1,300 @@
|
||||
suite('Image', function(){
|
||||
|
||||
// ======================================================
|
||||
test('add image', function(done) {
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
var stage = buildStage();
|
||||
|
||||
var layer = new Kinetic.Layer();
|
||||
darth = new Kinetic.Image({
|
||||
x: 200,
|
||||
y: 60,
|
||||
image: imageObj,
|
||||
width: 100,
|
||||
height: 100,
|
||||
offset: [50, 30],
|
||||
crop: [135, 7, 167, 134],
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(darth);
|
||||
stage.add(layer);
|
||||
|
||||
darth.setHeight(200);
|
||||
layer.draw();
|
||||
|
||||
darth.setHeight(100);
|
||||
layer.draw();
|
||||
|
||||
assert.equal(darth.getX(), 200);
|
||||
assert.equal(darth.getY(), 60);
|
||||
assert.equal(darth.getWidth(), 100);
|
||||
assert.equal(darth.getHeight(), 100);
|
||||
assert.equal(darth.getOffset().x, 50);
|
||||
assert.equal(darth.getOffset().y, 30);
|
||||
assert.equal(Kinetic.Util._isElement(darth.getImage()), true);
|
||||
|
||||
var crop = null;
|
||||
crop = darth.getCrop();
|
||||
assert.equal(crop.x, 135);
|
||||
assert.equal(crop.y, 7);
|
||||
assert.equal(crop.width, 167);
|
||||
assert.equal(crop.height, 134);
|
||||
|
||||
darth.setCrop(0, 1, 2, 3);
|
||||
crop = darth.getCrop();
|
||||
assert.equal(crop.x, 0);
|
||||
assert.equal(crop.y, 1);
|
||||
assert.equal(crop.width, 2);
|
||||
assert.equal(crop.height, 3);
|
||||
|
||||
darth.setCrop([4, 5, 6, 7]);
|
||||
crop = darth.getCrop();
|
||||
assert.equal(crop.x, 4);
|
||||
assert.equal(crop.y, 5);
|
||||
assert.equal(crop.width, 6);
|
||||
assert.equal(crop.height, 7);
|
||||
|
||||
darth.setCrop({
|
||||
x: 8,
|
||||
y: 9,
|
||||
width: 10,
|
||||
height: 11
|
||||
});
|
||||
crop = darth.getCrop();
|
||||
assert.equal(crop.x, 8);
|
||||
assert.equal(crop.y, 9);
|
||||
assert.equal(crop.width, 10);
|
||||
assert.equal(crop.height, 11);
|
||||
|
||||
darth.setCrop({
|
||||
x: 12
|
||||
});
|
||||
crop = darth.getCrop();
|
||||
assert.equal(crop.x, 12);
|
||||
assert.equal(crop.y, 9);
|
||||
assert.equal(crop.width, 10);
|
||||
assert.equal(crop.height, 11);
|
||||
|
||||
darth.setCrop({
|
||||
y: 13
|
||||
});
|
||||
crop = darth.getCrop();
|
||||
assert.equal(crop.x, 12);
|
||||
assert.equal(crop.y, 13);
|
||||
assert.equal(crop.width, 10);
|
||||
assert.equal(crop.height, 11);
|
||||
|
||||
darth.setCrop({
|
||||
width: 14
|
||||
});
|
||||
crop = darth.getCrop();
|
||||
assert.equal(crop.x, 12);
|
||||
assert.equal(crop.y, 13);
|
||||
assert.equal(crop.width, 14);
|
||||
assert.equal(crop.height, 11);
|
||||
|
||||
darth.setCrop({
|
||||
height: 15
|
||||
});
|
||||
crop = darth.getCrop();
|
||||
assert.equal(crop.x, 12);
|
||||
assert.equal(crop.y, 13);
|
||||
assert.equal(crop.width, 14);
|
||||
assert.equal(crop.height, 15);
|
||||
|
||||
darth.setAttrs({
|
||||
x: 200,
|
||||
y: 60,
|
||||
image: imageObj,
|
||||
width: 100,
|
||||
height: 100,
|
||||
offset: [50, 30],
|
||||
crop: [135, 7, 167, 134],
|
||||
draggable: true
|
||||
});
|
||||
|
||||
//document.body.appendChild(layer.bufferCanvas.element)
|
||||
|
||||
assert.equal(darth.getClassName(), 'Image');
|
||||
|
||||
done();
|
||||
|
||||
};
|
||||
imageObj.src = 'assets/darth-vader.jpg';
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('crop and scale image', function(done) {
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
var stage = buildStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
darth = new Kinetic.Image({
|
||||
x: 200,
|
||||
y: 75,
|
||||
image: imageObj,
|
||||
width: 107,
|
||||
height: 75,
|
||||
crop: [186, 211, 106, 74],
|
||||
draggable: true,
|
||||
scale: [0.5, 0.5]
|
||||
});
|
||||
|
||||
layer.add(darth);
|
||||
stage.add(layer);
|
||||
|
||||
|
||||
assert.equal(darth.getCrop().x, 186);
|
||||
assert.equal(darth.getCrop().y, 211);
|
||||
assert.equal(darth.getCrop().width, 106);
|
||||
assert.equal(darth.getCrop().height, 74);
|
||||
|
||||
assert.equal(darth.getCropX(), 186);
|
||||
assert.equal(darth.getCropY(), 211);
|
||||
assert.equal(darth.getCropWidth(), 106);
|
||||
assert.equal(darth.getCropHeight(), 74);
|
||||
|
||||
darth.setCrop([1, 2, 3, 4]);
|
||||
|
||||
assert.equal(darth.getCrop().x, 1);
|
||||
assert.equal(darth.getCrop().y, 2);
|
||||
assert.equal(darth.getCrop().width, 3);
|
||||
assert.equal(darth.getCrop().height, 4);
|
||||
|
||||
assert.equal(darth.getCropX(), 1);
|
||||
assert.equal(darth.getCropY(), 2);
|
||||
assert.equal(darth.getCropWidth(), 3);
|
||||
assert.equal(darth.getCropHeight(), 4);
|
||||
|
||||
darth.setCropX(5);
|
||||
darth.setCropY(6);
|
||||
darth.setCropWidth(7);
|
||||
darth.setCropHeight(8);
|
||||
|
||||
assert.equal(darth.getCrop().x, 5);
|
||||
assert.equal(darth.getCrop().y, 6);
|
||||
assert.equal(darth.getCrop().width, 7);
|
||||
assert.equal(darth.getCrop().height, 8);
|
||||
|
||||
assert.equal(darth.getCropX(), 5);
|
||||
assert.equal(darth.getCropY(), 6);
|
||||
assert.equal(darth.getCropWidth(), 7);
|
||||
assert.equal(darth.getCropHeight(), 8);
|
||||
|
||||
done();
|
||||
|
||||
};
|
||||
imageObj.src = 'assets/darth-vader.jpg';
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
// TODO: skipping for now because I need to setup a node server for this one
|
||||
test.skip('create image hit region', function(done) {
|
||||
var imageObj = new Image();
|
||||
|
||||
var stage = buildStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
imageObj.onload = function() {
|
||||
|
||||
var lion = new Kinetic.Image({
|
||||
x: 200,
|
||||
y: 40,
|
||||
image: imageObj,
|
||||
draggable: true,
|
||||
shadowColor: 'black',
|
||||
shadowBlur: 10,
|
||||
shadowOffset: [20, 20],
|
||||
shadowOpacity: 0.2
|
||||
});
|
||||
|
||||
// override color key with black
|
||||
lion.colorKey = '000000';
|
||||
|
||||
layer.add(lion);
|
||||
|
||||
lion.createImageHitRegion(function() {
|
||||
stage.add(layer);
|
||||
layer.drawHit();
|
||||
|
||||
var hitDataUrl = layer.hitCanvas.toDataURL();
|
||||
|
||||
done();
|
||||
|
||||
});
|
||||
};
|
||||
imageObj.src = 'assets/lion.png';
|
||||
|
||||
showHit(layer);
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('image with svg source', function(done) {
|
||||
var imageObj = new Image();
|
||||
|
||||
var stage = buildStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
imageObj.onload = function() {
|
||||
|
||||
var tiger = new Kinetic.Image({
|
||||
x: 0,
|
||||
y: 0,
|
||||
image: imageObj,
|
||||
draggable: true,
|
||||
scale: 0.25
|
||||
});
|
||||
|
||||
layer.add(tiger);
|
||||
stage.add(layer);
|
||||
|
||||
done();
|
||||
};
|
||||
imageObj.src = 'assets/Ghostscript_Tiger.svg';
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('opacity test for image with svg source', function(done) {
|
||||
var imageObj = new Image();
|
||||
|
||||
var stage = buildStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
layer.add(new Kinetic.Line({
|
||||
points: [0,0,578,200],
|
||||
stroke: 'black',
|
||||
strokeWidth: 5
|
||||
}));
|
||||
|
||||
imageObj.onload = function() {
|
||||
|
||||
var tiger = new Kinetic.Image({
|
||||
x: 0,
|
||||
y: 0,
|
||||
image: imageObj,
|
||||
draggable: true,
|
||||
scale: 0.25,
|
||||
opacity: 0.5
|
||||
});
|
||||
|
||||
layer.add(tiger);
|
||||
|
||||
layer.add(new Kinetic.Line({
|
||||
points: [578,0,0,200],
|
||||
stroke: 'blue',
|
||||
strokeWidth: 5
|
||||
}));
|
||||
|
||||
stage.add(layer);
|
||||
|
||||
done();
|
||||
|
||||
};
|
||||
imageObj.style.opacity = 0.5;
|
||||
imageObj.src = 'assets/Ghostscript_Tiger.svg';
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
129
test/unit/Line-test.js
Normal file
129
test/unit/Line-test.js
Normal file
@@ -0,0 +1,129 @@
|
||||
suite('Line', function() {
|
||||
// ======================================================
|
||||
test('add line', function() {
|
||||
var stage = buildStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var points = [{
|
||||
x: 73,
|
||||
y: 160
|
||||
}, {
|
||||
x: 340,
|
||||
y: 23
|
||||
}
|
||||
/*, {
|
||||
x: 500,
|
||||
y: 109
|
||||
}*/
|
||||
];
|
||||
|
||||
var line = new Kinetic.Line({
|
||||
points: points,
|
||||
stroke: 'blue',
|
||||
strokeWidth: 20,
|
||||
lineCap: 'round',
|
||||
lineJoin: 'round',
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(line);
|
||||
stage.add(layer);
|
||||
|
||||
line.setPoints([1, 2, 3, 4]);
|
||||
assert.equal(line.getPoints()[0].x, 1);
|
||||
|
||||
line.setPoints([{
|
||||
x: 5,
|
||||
y: 6
|
||||
}, {
|
||||
x: 7,
|
||||
y: 8
|
||||
}]);
|
||||
assert.equal(line.getPoints()[0].x, 5);
|
||||
|
||||
line.setPoints([73, 160, 340, 23]);
|
||||
assert.equal(line.getPoints()[0].x, 73);
|
||||
|
||||
assert.equal(line.getClassName(), 'Line');
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('test default ponts array for two lines', function() {
|
||||
var stage = buildStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var line = new Kinetic.Line({
|
||||
stroke: 'blue',
|
||||
strokeWidth: 20,
|
||||
lineCap: 'round',
|
||||
lineJoin: 'round',
|
||||
draggable: true
|
||||
});
|
||||
|
||||
var redLine = new Kinetic.Line({
|
||||
x: 50,
|
||||
stroke: 'red',
|
||||
strokeWidth: 20,
|
||||
lineCap: 'round',
|
||||
lineJoin: 'round',
|
||||
draggable: true
|
||||
});
|
||||
|
||||
line.setPoints([0,1,2,3]);
|
||||
redLine.setPoints([4,5,6,7]);
|
||||
|
||||
layer.add(line).add(redLine);
|
||||
stage.add(layer);
|
||||
|
||||
assert.equal(line.getPoints()[0].x, 0);
|
||||
assert.equal(redLine.getPoints()[0].x, 4);
|
||||
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('add dashed line', function() {
|
||||
var stage = buildStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
/*
|
||||
var points = [{
|
||||
x: 73,
|
||||
y: 160
|
||||
}, {
|
||||
x: 340,
|
||||
y: 23
|
||||
}, {
|
||||
x: 500,
|
||||
y: 109
|
||||
}, {
|
||||
x: 500,
|
||||
y: 180
|
||||
}];
|
||||
*/
|
||||
|
||||
var line = new Kinetic.Line({
|
||||
points: [73, 160, 340, 23, 500, 109, 500, 180],
|
||||
stroke: 'blue',
|
||||
|
||||
strokeWidth: 10,
|
||||
lineCap: 'round',
|
||||
lineJoin: 'round',
|
||||
draggable: true,
|
||||
dashArray: [30, 10, 0, 10, 10, 20],
|
||||
shadowColor: '#aaa',
|
||||
shadowBlur: 10,
|
||||
shadowOffset: [20, 20]
|
||||
//opacity: 0.2
|
||||
});
|
||||
|
||||
layer.add(line);
|
||||
stage.add(layer);
|
||||
|
||||
assert.equal(line.getDashArray().length, 6);
|
||||
line.setDashArray([10, 10]);
|
||||
assert.equal(line.getDashArray().length, 2);
|
||||
|
||||
assert.equal(line.getPoints().length, 4);
|
||||
|
||||
});
|
||||
});
|
||||
@@ -1,12 +1,8 @@
|
||||
suite('Rect', function(){
|
||||
// ======================================================
|
||||
|
||||
// ======================================================
|
||||
test('add rect to stage', function(){
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var stage = buildStage();
|
||||
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
@@ -32,13 +28,8 @@ suite('Rect', function(){
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
|
||||
test('add rect with shadow, rotation, corner radius, and opacity', function(){
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var stage = buildStage();
|
||||
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
@@ -78,11 +69,7 @@ suite('Rect', function(){
|
||||
|
||||
// ======================================================
|
||||
test('draw rect', function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var stage = buildStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
var rect = new Kinetic.Rect({
|
||||
x: 200,
|
||||
@@ -108,11 +95,7 @@ suite('Rect', function(){
|
||||
|
||||
// ======================================================
|
||||
test('add fill stroke rect', function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var stage = buildStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
var rect = new Kinetic.Rect({
|
||||
x: 200,
|
||||
@@ -130,11 +113,7 @@ suite('Rect', function(){
|
||||
|
||||
// ======================================================
|
||||
test('add stroke rect', function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var stage = buildStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
var rect = new Kinetic.Rect({
|
||||
x: 200,
|
||||
@@ -151,11 +130,7 @@ suite('Rect', function(){
|
||||
|
||||
// ======================================================
|
||||
test('use default stroke (stroke color should be black)', function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var stage = buildStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
var rect = new Kinetic.Rect({
|
||||
x: 200,
|
||||
@@ -171,11 +146,7 @@ suite('Rect', function(){
|
||||
|
||||
// ======================================================
|
||||
test('use default stroke width (stroke width should be 2)', function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var stage = buildStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
var rect = new Kinetic.Rect({
|
||||
x: 200,
|
||||
|
||||
@@ -1,11 +1,7 @@
|
||||
suite('Text', function(){
|
||||
// ======================================================
|
||||
test('add text with shadows', function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var stage = buildStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var rect = new Kinetic.Rect({
|
||||
@@ -61,11 +57,7 @@ suite('Text', function(){
|
||||
|
||||
// ======================================================
|
||||
test('text getters and setters', function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var stage = buildStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var text = new Kinetic.Text({
|
||||
@@ -161,11 +153,7 @@ suite('Text', function(){
|
||||
|
||||
// ======================================================
|
||||
test('text multi line', function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var stage = buildStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var rect = new Kinetic.Rect({
|
||||
@@ -219,11 +207,7 @@ suite('Text', function(){
|
||||
|
||||
// ======================================================
|
||||
test('text multi line with shadows', function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var stage = buildStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var text = new Kinetic.Text({
|
||||
@@ -258,11 +242,7 @@ suite('Text', function(){
|
||||
|
||||
// ======================================================
|
||||
test('change font size should update text data', function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var stage = buildStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var text = new Kinetic.Text({
|
||||
|
||||
@@ -1,297 +0,0 @@
|
||||
Test.Modules.IMAGE = {
|
||||
'add image': function(containerId) {
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
darth = new Kinetic.Image({
|
||||
x: 200,
|
||||
y: 60,
|
||||
image: imageObj,
|
||||
width: 100,
|
||||
height: 100,
|
||||
offset: [50, 30],
|
||||
crop: [135, 7, 167, 134],
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(darth);
|
||||
stage.add(layer);
|
||||
|
||||
darth.setHeight(200);
|
||||
layer.draw();
|
||||
|
||||
darth.setHeight(100);
|
||||
layer.draw();
|
||||
|
||||
test(darth.getX() === 200, 'x should be 200');
|
||||
test(darth.getY() === 60, 'y should be 60');
|
||||
test(darth.getWidth() === 100, 'width should be 100');
|
||||
test(darth.getHeight() === 100, 'height should be 100');
|
||||
test(darth.getOffset().x === 50, 'center offset x should be 50');
|
||||
test(darth.getOffset().y === 30, 'center offset y should be 30');
|
||||
test(Kinetic.Util._isElement(darth.getImage()), 'darth image should be an element');
|
||||
|
||||
var crop = null;
|
||||
crop = darth.getCrop();
|
||||
test(crop.x === 135, 'crop x should be 135');
|
||||
test(crop.y === 7, 'crop y should be 7');
|
||||
test(crop.width === 167, 'crop width should be 167');
|
||||
test(crop.height === 134, 'crop height should be134');
|
||||
|
||||
darth.setCrop(0, 1, 2, 3);
|
||||
crop = darth.getCrop();
|
||||
test(crop.x === 0, 'crop x should be 0');
|
||||
test(crop.y === 1, 'crop y should be 1');
|
||||
test(crop.width === 2, 'crop width should be2');
|
||||
test(crop.height === 3, 'crop height should be 3');
|
||||
|
||||
darth.setCrop([4, 5, 6, 7]);
|
||||
crop = darth.getCrop();
|
||||
test(crop.x === 4, 'crop x should be 4');
|
||||
test(crop.y === 5, 'crop y should be 5');
|
||||
test(crop.width === 6, 'crop width should be 6');
|
||||
test(crop.height === 7, 'crop height should be 7');
|
||||
|
||||
darth.setCrop({
|
||||
x: 8,
|
||||
y: 9,
|
||||
width: 10,
|
||||
height: 11
|
||||
});
|
||||
crop = darth.getCrop();
|
||||
test(crop.x === 8, 'crop x should be 8');
|
||||
test(crop.y === 9, 'crop y should be 9');
|
||||
test(crop.width === 10, 'crop width should be 10');
|
||||
test(crop.height === 11, 'crop height should be 11');
|
||||
|
||||
darth.setCrop({
|
||||
x: 12
|
||||
});
|
||||
crop = darth.getCrop();
|
||||
test(crop.x === 12, 'crop x should be 12');
|
||||
test(crop.y === 9, 'crop y should be 9');
|
||||
test(crop.width === 10, 'crop width should be 10');
|
||||
test(crop.height === 11, 'crop height should be 11');
|
||||
|
||||
darth.setCrop({
|
||||
y: 13
|
||||
});
|
||||
crop = darth.getCrop();
|
||||
test(crop.x === 12, 'crop x should be 12');
|
||||
test(crop.y === 13, 'crop y should be 13');
|
||||
test(crop.width === 10, 'crop width should be 10');
|
||||
test(crop.height === 11, 'crop height should be 11');
|
||||
|
||||
darth.setCrop({
|
||||
width: 14
|
||||
});
|
||||
crop = darth.getCrop();
|
||||
test(crop.x === 12, 'crop x should be 12');
|
||||
test(crop.y === 13, 'crop y should be 13');
|
||||
test(crop.width === 14, 'crop width should be 14');
|
||||
test(crop.height === 11, 'crop height should be 11');
|
||||
|
||||
darth.setCrop({
|
||||
height: 15
|
||||
});
|
||||
crop = darth.getCrop();
|
||||
test(crop.x === 12, 'crop x should be 12');
|
||||
test(crop.y === 13, 'crop y should be 13');
|
||||
test(crop.width === 14, 'crop width should be 14');
|
||||
test(crop.height === 15, 'crop height should be 15');
|
||||
|
||||
darth.setAttrs({
|
||||
x: 200,
|
||||
y: 60,
|
||||
image: imageObj,
|
||||
width: 100,
|
||||
height: 100,
|
||||
offset: [50, 30],
|
||||
crop: [135, 7, 167, 134],
|
||||
draggable: true
|
||||
});
|
||||
|
||||
//document.body.appendChild(layer.bufferCanvas.element)
|
||||
|
||||
test(darth.getClassName() === 'Image', 'getClassName should be Image');
|
||||
|
||||
};
|
||||
imageObj.src = '../assets/darth-vader.jpg';
|
||||
},
|
||||
'crop and scale image': function(containerId) {
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
darth = new Kinetic.Image({
|
||||
x: 200,
|
||||
y: 75,
|
||||
image: imageObj,
|
||||
width: 107,
|
||||
height: 75,
|
||||
crop: [186, 211, 106, 74],
|
||||
draggable: true,
|
||||
scale: [0.5, 0.5]
|
||||
});
|
||||
|
||||
layer.add(darth);
|
||||
stage.add(layer);
|
||||
|
||||
|
||||
test(darth.getCrop().x === 186, 'crop x should be 186');
|
||||
test(darth.getCrop().y === 211, 'crop y should be 211');
|
||||
test(darth.getCrop().width === 106, 'crop width should be 106');
|
||||
test(darth.getCrop().height === 74, 'crop height should be 74');
|
||||
|
||||
test(darth.getCropX() === 186, 'crop x should be 186');
|
||||
test(darth.getCropY() === 211, 'crop y should be 211');
|
||||
test(darth.getCropWidth() === 106, 'crop width should be 106');
|
||||
test(darth.getCropHeight() === 74, 'crop height should be 74');
|
||||
|
||||
darth.setCrop([1, 2, 3, 4]);
|
||||
|
||||
test(darth.getCrop().x === 1, 'crop x should be 1');
|
||||
test(darth.getCrop().y === 2, 'crop y should be 2');
|
||||
test(darth.getCrop().width === 3, 'crop width should be 3');
|
||||
test(darth.getCrop().height === 4, 'crop height should be 4');
|
||||
|
||||
test(darth.getCropX() === 1, 'crop x should be 1');
|
||||
test(darth.getCropY() === 2, 'crop y should be 2');
|
||||
test(darth.getCropWidth() === 3, 'crop width should be 3');
|
||||
test(darth.getCropHeight() === 4, 'crop height should be 4');
|
||||
|
||||
darth.setCropX(5);
|
||||
darth.setCropY(6);
|
||||
darth.setCropWidth(7);
|
||||
darth.setCropHeight(8);
|
||||
|
||||
test(darth.getCrop().x === 5, 'crop x should be 5');
|
||||
test(darth.getCrop().y === 6, 'crop y should be 6');
|
||||
test(darth.getCrop().width === 7, 'crop width should be 7');
|
||||
test(darth.getCrop().height === 8, 'crop height should be 8');
|
||||
|
||||
test(darth.getCropX() === 5, 'crop x should be 5');
|
||||
test(darth.getCropY() === 6, 'crop y should be 6');
|
||||
test(darth.getCropWidth() === 7, 'crop width should be 7');
|
||||
test(darth.getCropHeight() === 8, 'crop height should be 8');
|
||||
|
||||
};
|
||||
imageObj.src = '../assets/darth-vader.jpg';
|
||||
},
|
||||
'create image hit region': function(containerId) {
|
||||
var imageObj = new Image();
|
||||
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
imageObj.onload = function() {
|
||||
|
||||
var lion = new Kinetic.Image({
|
||||
x: 200,
|
||||
y: 40,
|
||||
image: imageObj,
|
||||
draggable: true,
|
||||
shadowColor: 'black',
|
||||
shadowBlur: 10,
|
||||
shadowOffset: [20, 20],
|
||||
shadowOpacity: 0.2
|
||||
});
|
||||
|
||||
// override color key with black
|
||||
lion.colorKey = '000000';
|
||||
|
||||
layer.add(lion);
|
||||
|
||||
lion.createImageHitRegion(function() {
|
||||
stage.add(layer);
|
||||
layer.drawHit();
|
||||
|
||||
var hitDataUrl = layer.hitCanvas.toDataURL();
|
||||
|
||||
});
|
||||
};
|
||||
imageObj.src = '../assets/lion.png';
|
||||
|
||||
showHit(layer);
|
||||
},
|
||||
'image with svg source': function(containerId) {
|
||||
var imageObj = new Image();
|
||||
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
imageObj.onload = function() {
|
||||
|
||||
var tiger = new Kinetic.Image({
|
||||
x: 0,
|
||||
y: 0,
|
||||
image: imageObj,
|
||||
draggable: true,
|
||||
scale: 0.25
|
||||
});
|
||||
|
||||
layer.add(tiger);
|
||||
stage.add(layer);
|
||||
};
|
||||
imageObj.src = '../assets/Ghostscript_Tiger.svg';
|
||||
},
|
||||
'opacity test for image with svg source': function(containerId) {
|
||||
var imageObj = new Image();
|
||||
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
layer.add(new Kinetic.Line({
|
||||
points: [0,0,578,200],
|
||||
stroke: 'black',
|
||||
strokeWidth: 5
|
||||
}));
|
||||
|
||||
imageObj.onload = function() {
|
||||
|
||||
var tiger = new Kinetic.Image({
|
||||
x: 0,
|
||||
y: 0,
|
||||
image: imageObj,
|
||||
draggable: true,
|
||||
scale: 0.25,
|
||||
opacity: 0.5
|
||||
});
|
||||
|
||||
layer.add(tiger);
|
||||
|
||||
layer.add(new Kinetic.Line({
|
||||
points: [578,0,0,200],
|
||||
stroke: 'blue',
|
||||
strokeWidth: 5
|
||||
}));
|
||||
|
||||
stage.add(layer);
|
||||
|
||||
};
|
||||
imageObj.style.opacity = 0.5;
|
||||
imageObj.src = '../assets/Ghostscript_Tiger.svg';
|
||||
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user