From 938b37a07c83616a56c5673f9dc31425e2426a35 Mon Sep 17 00:00:00 2001 From: Jason Follas Date: Fri, 30 Aug 2013 11:23:46 -0400 Subject: [PATCH] Unit tests added for issue #249. Fixed rendering of TextPath along vertical lines. Added unit tests for SVG-as-images. --- src/Shape.js | 2 +- src/plugins/Path.js | 7 +- src/plugins/TextPath.js | 1 + tests/assets/Ghostscript_Tiger.svg | 725 +++++++++++++++++++++++++ tests/js/unit/plugins/textPathTests.js | 92 ++++ tests/js/unit/shapes/imageTests.js | 73 ++- 6 files changed, 895 insertions(+), 5 deletions(-) create mode 100644 tests/assets/Ghostscript_Tiger.svg diff --git a/src/Shape.js b/src/Shape.js index c759f6ae..ecc5dc25 100644 --- a/src/Shape.js +++ b/src/Shape.js @@ -214,7 +214,7 @@ context = canvas.getContext(); if(drawFunc && this.isVisible()) { - context.save(); + context.save(); canvas._applyOpacity(this); canvas._applyLineJoin(this); canvas._applyAncestorTransforms(this); diff --git a/src/plugins/Path.js b/src/plugins/Path.js index 41205b1e..85a8bc6c 100644 --- a/src/plugins/Path.js +++ b/src/plugins/Path.js @@ -103,7 +103,12 @@ var rise = m * run; var pt; - if((fromY - P1y) / ((fromX - P1x) + 0.00000001) === m) { + if (P2x === P1x) { // vertical line + pt = { + x: fromX, + y: fromY + rise + }; + } else if((fromY - P1y) / ((fromX - P1x) + 0.00000001) === m) { pt = { x: fromX + run, y: fromY + rise diff --git a/src/plugins/TextPath.js b/src/plugins/TextPath.js index 153c49e7..93614bea 100644 --- a/src/plugins/TextPath.js +++ b/src/plugins/TextPath.js @@ -227,6 +227,7 @@ currentT -= Math.PI / 360.0 * dTheta / Math.abs(dTheta); // Credit for bug fix: @therth https://github.com/ericdrowell/KineticJS/issues/249 + // Old code failed to render text along arc of this path: "M 50 50 a 150 50 0 0 1 250 50 l 50 0" if(dTheta < 0 && currentT < end || dTheta >= 0 && currentT > end) { currentT = end; needNewSegment = true; diff --git a/tests/assets/Ghostscript_Tiger.svg b/tests/assets/Ghostscript_Tiger.svg new file mode 100644 index 00000000..671e556f --- /dev/null +++ b/tests/assets/Ghostscript_Tiger.svg @@ -0,0 +1,725 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tests/js/unit/plugins/textPathTests.js b/tests/js/unit/plugins/textPathTests.js index af0fd6ce..f0aa40f7 100644 --- a/tests/js/unit/plugins/textPathTests.js +++ b/tests/js/unit/plugins/textPathTests.js @@ -36,6 +36,98 @@ Test.Modules['TEXT PATH'] = { test(textpath.getClassName() === 'TextPath', 'getClassName should be TextPath'); }, + 'Find Next Segment when Arc is in Path': function(containerId) { + var stage = new Kinetic.Stage({ + container: containerId, + width: 1024, + height: 480, + throttle: 80, + scale: 1, + x: 50, + y: 10 + }); + var layer = new Kinetic.Layer(); + + var c = "M 50 50 a 150 50 0 0 1 250 50 l 50 0"; + var path = new Kinetic.Path({ + stroke: 'red', + strokeWidth: 1, + data: c + }); + + layer.add(path); + + var textpath = new Kinetic.TextPath({ + fill: 'black', + fontSize: '10', + text: 'All 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.', + data: c + }); + + layer.add(textpath); + stage.add(layer); + }, + 'Render Text Along Vertical Line': function(containerId) { + var stage = new Kinetic.Stage({ + container: containerId, + width: 1024, + height: 480, + throttle: 80, + scale: 1, + x: 50, + y: 10 + }); + var layer = new Kinetic.Layer(); + + // Top Down + var c = "M 50,10 50,150"; + + var path = new Kinetic.Path({ + stroke: 'red', + strokeWidth: 1, + data: c + }); + + layer.add(path); + + var textpath = new Kinetic.TextPath({ + stroke: 'black', + strokeWidth: 1, + fill: 'orange', + fontSize: '18', + fontFamily: 'Arial', + text: 'The quick brown fox jumped over the lazy dog\'s back', + data: c + }); + + layer.add(textpath); + + + // Bottom up + c = "M 150,150 150,10"; + + path = new Kinetic.Path({ + stroke: 'red', + strokeWidth: 1, + data: c + }); + + layer.add(path); + + textpath = new Kinetic.TextPath({ + stroke: 'black', + strokeWidth: 1, + fill: 'orange', + fontSize: '18', + fontFamily: 'Arial', + text: 'The quick brown fox jumped over the lazy dog\'s back', + data: c + }); + + layer.add(textpath); + stage.add(layer); + + }, 'Render Text Along two connected Bezier': function(containerId) { var stage = new Kinetic.Stage({ container: containerId, diff --git a/tests/js/unit/shapes/imageTests.js b/tests/js/unit/shapes/imageTests.js index a5f87256..311c22f4 100644 --- a/tests/js/unit/shapes/imageTests.js +++ b/tests/js/unit/shapes/imageTests.js @@ -205,9 +205,9 @@ Test.Modules.IMAGE = { image: imageObj, draggable: true, shadowColor: 'black', - shadowBlur: 10, - shadowOffset: [20, 20], - shadowOpacity: 0.2 + shadowBlur: 10, + shadowOffset: [20, 20], + shadowOpacity: 0.2 }); // override color key with black @@ -226,5 +226,72 @@ Test.Modules.IMAGE = { 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'; + } };