diff --git a/src/Layer.js b/src/Layer.js index bf342502..b0b52179 100644 --- a/src/Layer.js +++ b/src/Layer.js @@ -51,7 +51,6 @@ return null; }, drawScene: function(canvas) { - debugger; canvas = canvas || this.getCanvas(); this._fire(BEFORE_DRAW, { diff --git a/src/plugins/Path.js b/src/plugins/Path.js index 49c292fb..5c66dd77 100644 --- a/src/plugins/Path.js +++ b/src/plugins/Path.js @@ -106,7 +106,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 6a7f45e5..287fab20 100644 --- a/src/plugins/TextPath.js +++ b/src/plugins/TextPath.js @@ -228,6 +228,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'; + } };