From 34cb84f6162614b8bcb36e10af48f35b5eac5fde Mon Sep 17 00:00:00 2001 From: Anton Lavrenov Date: Tue, 25 Oct 2016 07:26:59 -0600 Subject: [PATCH] text shadow test --- src/Shape.js | 2 +- src/shapes/Text.js | 10 ++++ test/lib/blanket.js | 10 ++-- test/test.html | 100 ++++++++++++++++++++++++++++++++++ test/unit/Container-test.js | 59 ++++++++++---------- test/unit/Shape-test.js | 28 ++++++++++ test/unit/shapes/Text-test.js | 33 +++++++++++ 7 files changed, 208 insertions(+), 34 deletions(-) create mode 100644 test/test.html diff --git a/src/Shape.js b/src/Shape.js index 4c516fc9..4de5d9a0 100644 --- a/src/Shape.js +++ b/src/Shape.js @@ -504,7 +504,7 @@ Konva.Factory.addGetterSetter(Konva.Shape, 'perfectDrawEnabled', true); /** - * get/set perfectDrawEnabled. If a shape has fill, stroke and opacity you may set `perfectDrawEnabled` to improve performance. + * get/set perfectDrawEnabled. If a shape has fill, stroke and opacity you may set `perfectDrawEnabled` to false to improve performance. * See http://konvajs.github.io/docs/performance/Disable_Perfect_Draw.html for more information. * Default value is true * @name perfectDrawEnabled diff --git a/src/shapes/Text.js b/src/shapes/Text.js index 3b64817d..d3dc5088 100644 --- a/src/shapes/Text.js +++ b/src/shapes/Text.js @@ -1,6 +1,8 @@ /*eslint-disable max-depth */ (function() { + 'use strict'; + var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1; // constants var AUTO = 'auto', //CANVAS = 'canvas', @@ -159,6 +161,14 @@ context.closePath(); context.fillStrokeShape(this); }, + // _useBufferCanvas: function(caching) { + // var useIt = Konva.Shape.prototype._useBufferCanvas.call(this, caching); + // if (useIt) { + // return true; + // } + // return false; + // // return isFirefox && this.hasFill() && this.hasShadow(); + // }, setText: function(text) { var str = Konva.Util._isString(text) ? text : (text || '').toString(); this._setAttr(TEXT, str); diff --git a/test/lib/blanket.js b/test/lib/blanket.js index 61d17b71..646f6bf8 100644 --- a/test/lib/blanket.js +++ b/test/lib/blanket.js @@ -4712,7 +4712,7 @@ blanket.defaultReporter = function(coverage){ totals.passedBranches += passedBranches; totals.totalBranches += totalBranches; - // if "data-cover-modulepattern" was provided, + // if "data-cover-modulepattern" was provided, // track totals per module name as well as globally if (modulePatternRegex) { var moduleName = file.match(modulePatternRegex)[1]; @@ -4753,7 +4753,7 @@ blanket.defaultReporter = function(coverage){ bodyContent += output; } - // create temporary function for use by the global totals reporter, + // create temporary function for use by the global totals reporter, // as well as the per-module totals reporter var createAggregateTotal = function(numSt, numCov, numBranch, numCovBr, moduleName) { @@ -4771,8 +4771,8 @@ blanket.defaultReporter = function(coverage){ bodyContent += totalsOutput; }; - // if "data-cover-modulepattern" was provided, - // output the per-module totals alongside the global totals + // if "data-cover-modulepattern" was provided, + // output the per-module totals alongside the global totals if (modulePatternRegex) { for (var thisModuleName in totals.moduleTotalStatements) { if (totals.moduleTotalStatements.hasOwnProperty(thisModuleName)) { @@ -5288,4 +5288,4 @@ blanket.defaultReporter = function(coverage){ mocha.run = oldRun; } }); -})(); \ No newline at end of file +})(); diff --git a/test/test.html b/test/test.html new file mode 100644 index 00000000..78cc6f7f --- /dev/null +++ b/test/test.html @@ -0,0 +1,100 @@ + + + + + + +
+
+ +
+ + + + + + diff --git a/test/unit/Container-test.js b/test/unit/Container-test.js index 5514fbc3..2995fe37 100644 --- a/test/unit/Container-test.js +++ b/test/unit/Container-test.js @@ -1699,43 +1699,45 @@ suite('Container', function() { radius: 30, fill: 'red' }); - + group.add(circle); layer.add(group.clip({x:25,y:25,width:50,height:50})); stage.add(layer); - + layer.cache(); stage.draw(); - + var data = layer.getContext().getImageData(24,50,1,1).data; var isTransparent = data[3] == 0; assert.equal(isTransparent, true, 'tested pixel (24,50) should be transparent: ' +data[0]+"_"+data[1]+"_"+data[2]+"_"+data[3]); - + data = layer.getContext().getImageData(50,24,1,1).data; isTransparent = data[3] == 0; assert.equal(isTransparent, true, 'tested pixel (50,24) should be transparent: ' +data[0]+"_"+data[1]+"_"+data[2]+"_"+data[3]); - - data = layer.getContext().getImageData(76,50,1,1).data; + + data = layer.getHitCanvas().getContext().getImageData(76,50,1,1).data; isTransparent = data[3] == 0; + assert.equal(isTransparent, true, 'tested pixel (76,50) should be transparent: ' +data[0]+"_"+data[1]+"_"+data[2]+"_"+data[3]); - - data = layer.getContext().getImageData(50,76,1,1).data; + + data = layer.getHitCanvas().getContext().getImageData(50,76,1,1).data; isTransparent = data[3] == 0; assert.equal(isTransparent, true, 'tested pixel (50,76) should be transparent: ' +data[0]+"_"+data[1]+"_"+data[2]+"_"+data[3]); - - data = layer.getContext().getImageData(26,50,1,1).data; + + var ratio = layer.getCanvas().getPixelRatio(); + data = layer.getContext().getImageData(26 * ratio,50 * ratio,1,1).data; var isRed = data[0] == 255 && data[1] == 0 && data[2] == 0 && data[3] == 255; assert.equal(isRed, true, 'tested pixel (26,50) should be red: ' +data[0]+"_"+data[1]+"_"+data[2]+"_"+data[3]); - data = layer.getContext().getImageData(50,26,1,1).data; + data = layer.getContext().getImageData(50 * ratio,26 * ratio,1,1).data; isRed = data[0] == 255 && data[1] == 0 && data[2] == 0 && data[3] == 255; assert.equal(isRed, true, 'tested pixel (50,26) should be red: ' +data[0]+"_"+data[1]+"_"+data[2]+"_"+data[3]); - data = layer.getContext().getImageData(74,50,1,1).data; + data = layer.getContext().getImageData(74 * ratio,50 * ratio,1,1).data; isRed = data[0] == 255 && data[1] == 0 && data[2] == 0 && data[3] == 255; assert.equal(isRed, true, 'tested pixel (74,50) should be red: ' +data[0]+"_"+data[1]+"_"+data[2]+"_"+data[3]); - data = layer.getContext().getImageData(50,74,1,1).data; + data = layer.getContext().getImageData(50 * ratio,74 * ratio,1,1).data; isRed = data[0] == 255 && data[1] == 0 && data[2] == 0 && data[3] == 255; assert.equal(isRed, true, 'tested pixel (50,74) should be red: ' +data[0]+"_"+data[1]+"_"+data[2]+"_"+data[3]); }); @@ -1750,44 +1752,45 @@ suite('Container', function() { radius: 30, fill: 'red' }); - + group.add(circle); layer.add(group.clip({x:25,y:25,width:50,height:50})); stage.add(layer); - + layer.cache(); stage.scale({x:2, y:2}); stage.draw(); - - var data = layer.getContext().getImageData(48,100,1,1).data; + + var data = layer.getHitCanvas().getContext().getImageData(48,100,1,1).data; var isTransparent = data[3] == 0; assert.equal(isTransparent, true, 'tested pixel (48,100) should be transparent: ' +data[0]+"_"+data[1]+"_"+data[2]+"_"+data[3]); - - data = layer.getContext().getImageData(100,48,1,1).data; + + data = layer.getHitCanvas().getContext().getImageData(100,48,1,1).data; isTransparent = data[3] == 0; assert.equal(isTransparent, true, 'tested pixel (100,48) should be transparent: ' +data[0]+"_"+data[1]+"_"+data[2]+"_"+data[3]); - - data = layer.getContext().getImageData(152,100,1,1).data; + + data = layer.getHitCanvas().getContext().getImageData(152,100,1,1).data; isTransparent = data[3] == 0; assert.equal(isTransparent, true, 'tested pixel (152,100) should be transparent: ' +data[0]+"_"+data[1]+"_"+data[2]+"_"+data[3]); - - data = layer.getContext().getImageData(100,152,1,1).data; + + data = layer.getHitCanvas().getContext().getImageData(100,152,1,1).data; isTransparent = data[3] == 0; assert.equal(isTransparent, true, 'tested pixel (100,152) should be transparent: ' +data[0]+"_"+data[1]+"_"+data[2]+"_"+data[3]); - - data = layer.getContext().getImageData(52,100,1,1).data; + + var ratio = layer.getCanvas().getPixelRatio(); + data = layer.getContext().getImageData(52 * ratio,100 * ratio,1,1).data; var isRed = data[0] == 255 && data[1] == 0 && data[2] == 0 && data[3] == 255; assert.equal(isRed, true, 'tested pixel (52,100) should be red: ' +data[0]+"_"+data[1]+"_"+data[2]+"_"+data[3]); - data = layer.getContext().getImageData(100,52,1,1).data; + data = layer.getContext().getImageData(100 * ratio,52 * ratio,1,1).data; isRed = data[0] == 255 && data[1] == 0 && data[2] == 0 && data[3] == 255; assert.equal(isRed, true, 'tested pixel (100,52) should be red: ' +data[0]+"_"+data[1]+"_"+data[2]+"_"+data[3]); - data = layer.getContext().getImageData(148,100,1,1).data; + data = layer.getContext().getImageData(148 * ratio,100 * ratio,1,1).data; isRed = data[0] == 255 && data[1] == 0 && data[2] == 0 && data[3] == 255; assert.equal(isRed, true, 'tested pixel (148,100) should be red: ' +data[0]+"_"+data[1]+"_"+data[2]+"_"+data[3]); - data = layer.getContext().getImageData(100,148,1,1).data; + data = layer.getContext().getImageData(100 * ratio,148 * ratio,1,1).data; isRed = data[0] == 255 && data[1] == 0 && data[2] == 0 && data[3] == 255; assert.equal(isRed, true, 'tested pixel (100,148) should be red: ' +data[0]+"_"+data[1]+"_"+data[2]+"_"+data[3]); }); diff --git a/test/unit/Shape-test.js b/test/unit/Shape-test.js index 518af6ad..3ba583bd 100644 --- a/test/unit/Shape-test.js +++ b/test/unit/Shape-test.js @@ -1148,4 +1148,32 @@ suite('Shape', function() { }); + test('shadow should respect pixel ratio', function() { + var stage = addStage(); + var layer1 = new Konva.Layer(); + var shape = new Konva.Rect({ + width: 50, + height: 50, + fill: 'black', + shadowColor: 'green', + shadowOffsetX: 10, + shadowOffsetY: 10, + opacity: 0.5 + }); + + layer1.add(shape); + stage.add(layer1); + + var layer2 = layer1.clone(); + + console.log(layer2.children.length); + layer2.getCanvas().setPixelRatio(1); + layer1.scaleX(0.5); layer1.scaleY(0.5); + stage.add(layer2); + + compareLayers(layer2, layer1, 10); + + }); + + }); diff --git a/test/unit/shapes/Text-test.js b/test/unit/shapes/Text-test.js index 563ca634..04e7bd0a 100644 --- a/test/unit/shapes/Text-test.js +++ b/test/unit/shapes/Text-test.js @@ -82,6 +82,39 @@ suite('Text', function(){ assert.equal(text.getClassName(),'Text', 'getClassName should be Text'); }); + test.only('text with fill and shadow', function() { + var stage = addStage(); + var layer = new Konva.Layer(); + + var text = new Konva.Text({ + x: 10, + y: 10, + text: 'Hello World!', + fontSize: 50, + fill: 'black', + shadowColor: 'darkgrey', + shadowOffsetX: 20, + shadowOffsetY: 20, + shadowBlur: 0 + }); + + + layer.add(text); + stage.add(layer); + + var canvas = createCanvas(); + var context = canvas.getContext('2d'); + context.textBaseline = 'middle'; + context.font = "normal normal 50px Arial"; + context.fillStyle = 'darkgrey'; + context.fillText('Hello World!', 20, 20 + 25); + context.fillStyle = 'black'; + context.fillText('Hello World!', 10, 10 + 25); + + + compareLayerAndCanvas(layer, canvas, 250); + }); + // ====================================================== test('add text with letter spacing', function() { var stage = addStage();