diff --git a/test/runner.html b/test/runner.html index 82086b32..ca9abebb 100644 --- a/test/runner.html +++ b/test/runner.html @@ -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; + }
- - -
+
+ + diff --git a/test/unit/Blob-test.js b/test/unit/Blob-test.js index d8de91e6..889c8bd0 100644 --- a/test/unit/Blob-test.js +++ b/test/unit/Blob-test.js @@ -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({ diff --git a/test/unit/Circle-test.js b/test/unit/Circle-test.js index 50cecf4e..9c785a62 100644 --- a/test/unit/Circle-test.js +++ b/test/unit/Circle-test.js @@ -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, diff --git a/test/unit/Ellipse-test.js b/test/unit/Ellipse-test.js index 9910337e..39342fd0 100644 --- a/test/unit/Ellipse-test.js +++ b/test/unit/Ellipse-test.js @@ -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, diff --git a/test/unit/Image-test.js b/test/unit/Image-test.js new file mode 100644 index 00000000..2a53980f --- /dev/null +++ b/test/unit/Image-test.js @@ -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'; + + }); + +}); \ No newline at end of file diff --git a/test/unit/Line-test.js b/test/unit/Line-test.js new file mode 100644 index 00000000..97e7c263 --- /dev/null +++ b/test/unit/Line-test.js @@ -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); + + }); +}); \ No newline at end of file diff --git a/test/unit/Rect-test.js b/test/unit/Rect-test.js index 6e4a2db7..6161cdc2 100644 --- a/test/unit/Rect-test.js +++ b/test/unit/Rect-test.js @@ -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, diff --git a/test/unit/Text-test.js b/test/unit/Text-test.js index 0a9eb9d1..ee095087 100644 --- a/test/unit/Text-test.js +++ b/test/unit/Text-test.js @@ -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({ diff --git a/tests/js/unit/shapes/imageTests.js b/tests/js/unit/shapes/imageTests.js deleted file mode 100644 index 311c22f4..00000000 --- a/tests/js/unit/shapes/imageTests.js +++ /dev/null @@ -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'; - - } -};