From c3511210f2c80b2cdaa52d43ff721832ddc94402 Mon Sep 17 00:00:00 2001 From: lavrton Date: Sat, 14 Feb 2015 22:12:54 +0700 Subject: [PATCH] cache + pixelRatio --- src/Canvas.js | 28 ++-- src/Context.js | 8 +- src/Layer.js | 8 +- src/Node.js | 10 +- src/Shape.js | 59 +++---- src/Stage.js | 2 +- src/shapes/Line.js | 8 +- test/functional/MouseEvents-test.js | 36 +++++ test/manual/manual-test.js | 36 +++++ test/performance/hit-ratio.html | 70 +++++++++ test/runner.js | 15 +- test/unit/Canvas-test.js | 8 +- test/unit/Node-cache-test.js | 191 +++++++++++++++++++++-- test/unit/Node-test.js | 5 +- test/unit/Stage-test.js | 8 +- test/unit/Tween-test.js | 1 - test/unit/filters/Blur-test.js | 1 + test/unit/plugins/Label-test.js | 2 +- test/unit/plugins/Path-test.js | 1 + test/unit/plugins/RegularPolygon-test.js | 2 +- test/unit/shapes/Blob-test.js | 3 +- test/unit/shapes/Circle-test.js | 2 +- test/unit/shapes/Text-test.js | 30 ++++ 23 files changed, 449 insertions(+), 85 deletions(-) create mode 100644 test/performance/hit-ratio.html diff --git a/src/Canvas.js b/src/Canvas.js index 7dd3fb14..de1604c5 100644 --- a/src/Canvas.js +++ b/src/Canvas.js @@ -87,8 +87,9 @@ * ratio for special situations, or, if you don't want the pixel ratio to be taken into account, you can set it to 1. */ setPixelRatio: function(pixelRatio) { + var previousRatio = this.pixelRatio; this.pixelRatio = pixelRatio; - this.setSize(this.getWidth(), this.getHeight()); + this.setSize(this.getWidth() / previousRatio, this.getHeight() / previousRatio); }, /** * set width @@ -100,6 +101,10 @@ // take into account pixel ratio this.width = this._canvas.width = width * this.pixelRatio; this._canvas.style.width = width + 'px'; + + var pixelRatio = this.pixelRatio, + _context = this.getContext()._context; + _context.scale(pixelRatio, pixelRatio); }, /** * set height @@ -111,6 +116,9 @@ // take into account pixel ratio this.height = this._canvas.height = height * this.pixelRatio; this._canvas.style.height = height + 'px'; + var pixelRatio = this.pixelRatio, + _context = this.getContext()._context; + _context.scale(pixelRatio, pixelRatio); }, /** * get width @@ -177,29 +185,13 @@ this.setSize(width, height); }; - Konva.SceneCanvas.prototype = { - setWidth: function(width) { - var pixelRatio = this.pixelRatio, - _context = this.getContext()._context; - - Konva.Canvas.prototype.setWidth.call(this, width); - _context.scale(pixelRatio, pixelRatio); - }, - setHeight: function(height) { - var pixelRatio = this.pixelRatio, - _context = this.getContext()._context; - - Konva.Canvas.prototype.setHeight.call(this, height); - _context.scale(pixelRatio, pixelRatio); - } - }; Konva.Util.extend(Konva.SceneCanvas, Konva.Canvas); Konva.HitCanvas = function(config) { var conf = config || {}; var width = conf.width || 0, height = conf.height || 0; - + Konva.Canvas.call(this, conf); this.context = new Konva.HitContext(this); this.setSize(width, height); diff --git a/src/Context.js b/src/Context.js index f5fc119c..0ffd9d05 100644 --- a/src/Context.js +++ b/src/Context.js @@ -201,7 +201,7 @@ this.clearRect(bounds.x || 0, bounds.y || 0, bounds.width || 0, bounds.height || 0); } else { - this.clearRect(0, 0, canvas.getWidth(), canvas.getHeight()); + this.clearRect(0, 0, canvas.getWidth() / canvas.pixelRatio, canvas.getHeight() / canvas.pixelRatio); } }, _applyLineCap: function(shape) { @@ -381,7 +381,11 @@ that[methodName] = function() { args = _simplifyArray(Array.prototype.slice.call(arguments, 0)); ret = origMethod.apply(that, arguments); - + + if (methodName === 'clearRect') { + args[2] = args[2] / that.canvas.getPixelRatio(); + args[3] = args[3] / that.canvas.getPixelRatio(); + } that._trace({ method: methodName, args: args diff --git a/src/Layer.js b/src/Layer.js index 23869e5b..804cae36 100644 --- a/src/Layer.js +++ b/src/Layer.js @@ -29,7 +29,9 @@ ____init: function(config) { this.nodeType = 'Layer'; this.canvas = new Konva.SceneCanvas(); - this.hitCanvas = new Konva.HitCanvas(); + this.hitCanvas = new Konva.HitCanvas({ + pixelRatio : 1 + }); // call super constructor Konva.BaseLayer.call(this, config); }, @@ -111,10 +113,10 @@ ]; }, _getIntersection: function(pos) { - var p = this.hitCanvas.context.getImageData(pos.x, pos.y, 1, 1).data, + var ratio = this.hitCanvas.pixelRatio; + var p = this.hitCanvas.context.getImageData(Math.round(pos.x * ratio), Math.round(pos.y * ratio), 1, 1).data, p3 = p[3], colorKey, shape; - // fully opaque pixel if(p3 === 255) { colorKey = Konva.Util._rgbToHex(p[0], p[1], p[2]); diff --git a/src/Node.js b/src/Node.js index b69efb43..8a6ca499 100644 --- a/src/Node.js +++ b/src/Node.js @@ -165,16 +165,15 @@ var cachedSceneCanvas = new Konva.SceneCanvas({ - pixelRatio: 1, width: width, height: height }), cachedFilterCanvas = new Konva.SceneCanvas({ - pixelRatio: 1, width: width, height: height }), cachedHitCanvas = new Konva.HitCanvas({ + pixelRatio : 1, width: width, height: height }), @@ -264,13 +263,16 @@ }, _drawCachedSceneCanvas: function(context) { context.save(); - + context._applyOpacity(this); context.translate( this._cache.canvas.x, this._cache.canvas.y ); - context.drawImage(this._getCachedSceneCanvas()._canvas, 0, 0); + var cacheCanvas = this._getCachedSceneCanvas(); + var ratio = context.canvas.pixelRatio; + + context.drawImage(cacheCanvas._canvas, 0, 0, cacheCanvas.width / ratio, cacheCanvas.height /ratio); context.restore(); }, _drawCachedHitCanvas: function(context) { diff --git a/src/Shape.js b/src/Shape.js index e70ae603..6d2768fa 100644 --- a/src/Shape.js +++ b/src/Shape.js @@ -142,8 +142,8 @@ Konva.Node.prototype.destroy.call(this); delete Konva.shapes[this.colorKey]; }, - _useBufferCanvas: function() { - return (this.perfectDrawEnabled() && (this.getAbsoluteOpacity() !== 1) && this.hasFill() && this.hasStroke() && this.getStage()) || + _useBufferCanvas: function(caching) { + return !caching && (this.perfectDrawEnabled() && (this.getAbsoluteOpacity() !== 1) && this.hasFill() && this.hasStroke() && this.getStage()) || (this.perfectDrawEnabled() && this.hasShadow() && (this.getAbsoluteOpacity() !== 1) && this.hasFill() && this.hasStroke() && this.getStage()); }, /** @@ -183,9 +183,17 @@ var width = preWidth + blurRadius * 2; var height = preHeight + blurRadius * 2; + + // if stroke, for example = 3 + // we need to set x to 1.5, but after Math.round it will be 2 + // as we have additional offset we need to increase width and height by 1 pixel + var roundingOffset = 0; + if (Math.round(strokeWidth / 2) !== strokeWidth / 2) { + roundingOffset = 1; + } var rect = { - width : width, - height : height, + width : width + roundingOffset, + height : height + roundingOffset, x : -Math.round(strokeWidth / 2 + blurRadius) + Math.min(shadowOffsetX, 0) + fillRect.x, y : -Math.round(strokeWidth / 2 + blurRadius) + Math.min(shadowOffsetY, 0) + fillRect.y }; @@ -214,7 +222,7 @@ else if (drawFunc) { context.save(); // if buffer canvas is needed - if (this._useBufferCanvas()) { + if (this._useBufferCanvas(caching)) { stage = this.getStage(); bufferCanvas = stage.bufferCanvas; bufferContext = bufferCanvas.getContext(); @@ -222,35 +230,24 @@ bufferContext.save(); bufferContext._applyLineJoin(this); // layer might be undefined if we are using cache before adding to layer - if (layer) { - layer._applyTransform(this, bufferContext, top); - } else { - var m = this.getAbsoluteTransform(top).getMatrix(); - context.transform(m[0], m[1], m[2], m[3], m[4], m[5]); + if (!caching) { + if (layer) { + layer._applyTransform(this, bufferContext, top); + } else { + var m = this.getAbsoluteTransform(top).getMatrix(); + context.transform(m[0], m[1], m[2], m[3], m[4], m[5]); + } } drawFunc.call(this, bufferContext); bufferContext.restore(); if (hasShadow && !canvas.hitCanvas) { -// if (this.getShadowBlur()) { -// context.save(); -//// bufferContext.clear(); -// var buffer2 = stage.bufferCanvas2; -// buffer2.getContext()._applyShadow(this); -// buffer2.getContext().drawImage(bufferCanvas._canvas); -// buffer2.getContext().fill(); -//// drawFunc.call(this, bufferContext); -//// context._applyOpacity(this); -// context.drawImage(buffer2._canvas, 0, 0); -// context.restore(); -// } else { context.save(); context._applyShadow(this); context._applyOpacity(this); context.drawImage(bufferCanvas._canvas, 0, 0); context.restore(); -// } } else { context._applyOpacity(this); context.drawImage(bufferCanvas._canvas, 0, 0); @@ -272,24 +269,30 @@ if (hasShadow && hasStroke && !canvas.hitCanvas) { context.save(); // apply shadow - context._applyOpacity(this); + if (!caching) { + context._applyOpacity(this); + } context._applyShadow(this); drawFunc.call(this, context); context.restore(); // if shape has stroke we need to redraw shape - // otherwise we will see shadow under stroke (and over fill) - // but I think is is unexpected behavior + // otherwise we will see a shadow under stroke (and over fill) + // but I think this is unexpected behavior if (this.hasFill() && this.getShadowForStrokeEnabled()) { drawFunc.call(this, context); } } else if (hasShadow && !canvas.hitCanvas) { context.save(); - context._applyOpacity(this); + if (!caching) { + context._applyOpacity(this); + } context._applyShadow(this); drawFunc.call(this, context); context.restore(); } else { - context._applyOpacity(this); + if (!caching) { + context._applyOpacity(this); + } drawFunc.call(this, context); } } diff --git a/src/Stage.js b/src/Stage.js index b77c40a4..c5fb17ea 100644 --- a/src/Stage.js +++ b/src/Stage.js @@ -473,7 +473,7 @@ } }, _mouseup: function(evt) { - + // workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event if (Konva.UA.ieMobile) { return this._touchend(evt); diff --git a/src/shapes/Line.js b/src/shapes/Line.js index 2c899653..20171462 100644 --- a/src/shapes/Line.js +++ b/src/shapes/Line.js @@ -168,10 +168,10 @@ maxY = Math.max(maxY, y); } return { - x : minX, - y : minY, - width : maxX - minX, - height : maxY - minY + x : Math.round(minX), + y : Math.round(minY), + width : Math.round(maxX - minX), + height : Math.round(maxY - minY) }; } }; diff --git a/test/functional/MouseEvents-test.js b/test/functional/MouseEvents-test.js index 4ee24c5c..68ef2020 100644 --- a/test/functional/MouseEvents-test.js +++ b/test/functional/MouseEvents-test.js @@ -1311,4 +1311,40 @@ suite('MouseEvents', function() { }, 20); }); + + test('change ratio for hit graph', function() { + var stage = addStage(); + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ + x : stage.width() / 2, + y : stage.height() / 2, + radius : 50, + stroke : 'black', + fill : 'red', + strokeWidth : 5, + draggable : true + }); + + layer.add(circle); + stage.add(layer); + + layer.getHitCanvas().setPixelRatio(0.5); + + layer.draw(); + var shape = layer.getIntersection({ + x : stage.width() / 2 - 55, + y : stage.height() / 2 - 55 + }); + assert.equal(!!shape, false, 'no shape here'); + shape = layer.getIntersection({ + x : stage.width() / 2 + 55, + y : stage.height() / 2 + 55 + }); + assert.equal(!!shape, false, 'no shape here'); + shape = layer.getIntersection({ + x : stage.width() / 2, + y : stage.height() / 2 + }); + assert.equal(shape, circle); + }); }); \ No newline at end of file diff --git a/test/manual/manual-test.js b/test/manual/manual-test.js index 109f5824..98591e92 100644 --- a/test/manual/manual-test.js +++ b/test/manual/manual-test.js @@ -265,6 +265,42 @@ suite('Manual', function() { layer.add(rect, text); stage.add(layer); + }); + test('change hit graph ratio', function() { + var stage = addStage(); + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ + x : stage.width() / 2, + y : stage.height() / 2, + radius : 50, + stroke : 'black', + fill : 'red', + strokeWidth : 5, + draggable : true + }); + + var text = new Konva.Text({ + text : "click on circle to decrease hit grpah retion" + }); + + layer.add(circle, text); + stage.add(layer); + showHit(layer); + + circle.on('mouseenter', function() { + document.body.style.cursor = 'pointer'; + }); + + circle.on('mouseleave', function() { + document.body.style.cursor = 'default'; + }); + + circle.on('click', function() { + var ratio = layer.getHitCanvas().getPixelRatio() * 0.8; + console.log('new ratio', ratio); + layer.getHitCanvas().setPixelRatio(ratio); + layer.draw(); + }); }); }); \ No newline at end of file diff --git a/test/performance/hit-ratio.html b/test/performance/hit-ratio.html new file mode 100644 index 00000000..b7eba341 --- /dev/null +++ b/test/performance/hit-ratio.html @@ -0,0 +1,70 @@ + + + + + + +
+ + + + + + \ No newline at end of file diff --git a/test/runner.js b/test/runner.js index c823b02e..5894376f 100644 --- a/test/runner.js +++ b/test/runner.js @@ -65,6 +65,7 @@ function init() { Konva.enableTrace = true; Konva.showWarnings = true; +//Konva.pixelRatio = 2; function addStats() { stats = new Stats(); @@ -103,8 +104,10 @@ function addStage() { function createCanvas() { var canvas = document.createElement('canvas'); - canvas.width = 578; - canvas.height = 200; + var ratio = (Konva.pixelRatio || window.devicePixelRatio); + canvas.width = 578 * ratio; + canvas.height = 200 * ratio; + canvas.getContext('2d').scale(ratio, ratio); return canvas; } @@ -212,4 +215,12 @@ beforeEach(function(){ Konva.DD.node = undefined; }); +Konva.UA.mobile = false; + +afterEach(function(){ +// Konva.stages.forEach(function(stage) { +// stage.destroy(); +// }); +}); + init(); \ No newline at end of file diff --git a/test/unit/Canvas-test.js b/test/unit/Canvas-test.js index 276d5fac..4224f6de 100644 --- a/test/unit/Canvas-test.js +++ b/test/unit/Canvas-test.js @@ -6,12 +6,13 @@ suite('Canvas', function() { var layer = new Konva.Layer(); var circle = new Konva.Circle({ - x: 578/2, - y: 100, + x: 100, + y: 70, radius: 70, fill: 'green', stroke: 'blue', - strokeWidth: 4 + strokeWidth: 4, + draggable : true }); layer.add(circle); @@ -22,6 +23,7 @@ suite('Canvas', function() { stage.setHeight(100); stage.draw(); + assert.equal(layer.getCanvas().getPixelRatio(), Konva.pixelRatio || window.devicePixelRatio || 1); layer.getCanvas().setPixelRatio(1); assert.equal(layer.getCanvas().getPixelRatio(), 1); diff --git a/test/unit/Node-cache-test.js b/test/unit/Node-cache-test.js index b82cacc3..a3c83275 100644 --- a/test/unit/Node-cache-test.js +++ b/test/unit/Node-cache-test.js @@ -1,5 +1,5 @@ suite('Caching', function() { - + this.timeout(5000); // CACHING SHAPE test('cache simple rectangle', function() { @@ -12,7 +12,8 @@ suite('Caching', function() { y: 50, width: 100, height: 50, - fill: 'green' + fill: 'green', + draggable : true }); rect.cache(); @@ -26,8 +27,10 @@ suite('Caching', function() { context.closePath(); context.fillStyle = 'green'; context.fill(); + compareLayerAndCanvas(layer, canvas, 10); - compareSceneAndHit(layer); + cloneAndCompareLayer(layer); + }); test('cache simple rectangle with transform', function() { @@ -60,8 +63,8 @@ suite('Caching', function() { context.fill(); if (!window.mochaPhantomJS) { - compareLayerAndCanvas(layer, canvas, 40); - compareSceneAndHit(layer); + compareLayerAndCanvas(layer, canvas, 200); + cloneAndCompareLayer(layer, 150); } }); @@ -94,8 +97,89 @@ suite('Caching', function() { context.fill(); context.lineWidth = 20; context.stroke(); - compareLayerAndCanvas(layer, canvas, 10); - compareSceneAndHit(layer); + compareLayerAndCanvas(layer, canvas, 50); + cloneAndCompareLayer(layer, 50); + }); + + + test.skip('cache rectangle with fill and opacity', function() { + var stage = addStage(); + + var layer = new Konva.Layer(); + + var rect = new Konva.Rect({ + x: 100, + y: 50, + width: 100, + height: 50, + fill: 'green', + opacity : 0.5 + }); + rect.cache(); + rect.opacity(0.3); + + layer.add(rect); + stage.add(layer); + + var canvas = createCanvas(); + var context = canvas.getContext('2d'); + context.globalAlpha = 0.3; + context.beginPath(); + context.rect(100, 50, 100, 50); + context.closePath(); + context.fillStyle = 'green'; + context.fill(); + compareLayerAndCanvas(layer, canvas, 5); + }); + + test('cache rectangle with fill, stroke opacity', function() { + var stage = addStage(); + + var layer = new Konva.Layer(); + + var rect = new Konva.Rect({ + x: 100, + y: 50, + width: 100, + height: 50, + fill: 'green', + opacity : 0.5, + stroke : 'black', + strokeWidth : 10 + }); + rect.cache(); + rect.opacity(0.3); + + layer.add(rect); + stage.add(layer); + + cloneAndCompareLayer(layer, 100); + }); + + test.skip('cache rectangle with fill, shadow and opacity', function() { + var stage = addStage(); + + var layer = new Konva.Layer(); + + var rect = new Konva.Rect({ + x: 100, + y: 50, + width: 100, + height: 50, + fill: 'green', + opacity : 0.5, + shadowBlur : 10, + shadowColor : 'black' + }); + rect.cache(); + rect.opacity(0.3); + + layer.add(rect); + stage.add(layer); + + if (!window.mochaPhantomJS) { + cloneAndCompareLayer(layer, 10); + } }); test('cache rectangle with fill and simple shadow', function() { @@ -110,7 +194,8 @@ suite('Caching', function() { height: 50, fill: 'green', shadowColor : 'black', - shadowBlur : 10 + shadowBlur : 10, + draggable : true }); rect.cache(); @@ -126,6 +211,10 @@ suite('Caching', function() { context.shadowColor = 'black'; context.shadowBlur = 10; context.fill(); + + showCanvas(rect._cache.canvas.scene._canvas); + showCanvas(rect._cache.canvas.hit._canvas); + showHit(layer); compareLayerAndCanvas(layer, canvas, 10); }); @@ -273,7 +362,7 @@ suite('Caching', function() { context.fillStyle = 'green'; context.fill(); compareLayerAndCanvas(layer, canvas, 10); - compareSceneAndHit(layer); + cloneAndCompareLayer(layer); }); test('cache group with simple rectangle with transform', function() { @@ -311,7 +400,7 @@ suite('Caching', function() { context.fill(); if (!window.mochaPhantomJS) { compareLayerAndCanvas(layer, canvas, 150); - compareSceneAndHit(layer); + cloneAndCompareLayer(layer, 150); } }); @@ -504,6 +593,86 @@ suite('Caching', function() { context.restore(); - compareLayerAndCanvas(layer, canvas, 50); + compareLayerAndCanvas(layer, canvas, 150); + }); + + test('cache shape that is larger than stage but need buffer canvas', function(){ + var stage = addStage(); + var layer = new Konva.Layer(); + var group = new Konva.Group(); + var circle = new Konva.Circle({ + x: stage.width() / 2, + y: stage.height() / 2, + radius: 400, + fill: 'red', + stroke: 'black', + strokeWidth: 50, + opacity : 0.5, + scaleX : 1 / 5, + scaleY : 1 / 5 + }); + + group.add(circle); + layer.add(group); + stage.add(layer); + circle.cache(); + layer.draw(); + + cloneAndCompareLayer(layer, 200); + }); + + test('cache nested groups', function() { + var stage = addStage(); + var layer = new Konva.Layer(); + + var groupOuter = new Konva.Group({ + x: 50, + y: 10 + }); + + var groupInner = new Konva.Group({ + x: 10, + y: 10, + draggable : true + }); + var rect = new Konva.Rect({ + width: 50, + height: 50, + stroke: 'grey', + strokeWidth: 3, + fill: 'yellow' + }); + + var text = new Konva.Text({ + x: 18, + y: 15, + text: 'A', + fill: 'black', + fontSize: 24 + }); + + groupInner.add(rect); + groupInner.add(text); + + groupOuter.add(groupInner); + + layer.add(groupOuter); + stage.add(layer); + + groupInner.cache(); + + layer.draw(); + cloneAndCompareLayer(layer, 150); + + groupInner.clearCache(); + groupOuter.cache(); + layer.draw(); + cloneAndCompareLayer(layer, 150); + + groupOuter.clearCache(); + groupInner.clearCache(); + rect.cache(); + layer.draw(); + cloneAndCompareLayer(layer, 150); }); }); \ No newline at end of file diff --git a/test/unit/Node-test.js b/test/unit/Node-test.js index fd9a27a4..764eaaf2 100644 --- a/test/unit/Node-test.js +++ b/test/unit/Node-test.js @@ -2689,8 +2689,9 @@ suite('Node', function() { layer.on('click', function() { layerClick += 1; }); - + showHit(layer); var top = stage.content.getBoundingClientRect().top; + stage._mousedown({ clientX: 150, clientY: 75 + top @@ -2701,7 +2702,7 @@ suite('Node', function() { clientY: 75 + top }); - assert.equal(rectClick, 1, 'click on rectange'); + assert.equal(rectClick, 1, 'click on rectangle'); assert.equal(groupClick, 0, 'no click on group'); assert.equal(layerClick, 0, 'no click on layer'); }); diff --git a/test/unit/Stage-test.js b/test/unit/Stage-test.js index 463edb8b..51f80d11 100644 --- a/test/unit/Stage-test.js +++ b/test/unit/Stage-test.js @@ -505,7 +505,8 @@ suite('Stage', function() { clientY: clientY }); Konva.DD._endDragAfter({dragEndNode:rect}); - + assert.equal(Konva.isDragging(), false); + assert.equal(Konva.DD.node, undefined); // simulate click stage._mousedown({ clientX: 66, @@ -516,5 +517,8 @@ suite('Stage', function() { clientX: 66, clientY: clientY }); - }) + Konva.DD._endDragBefore({dragEndNode:rect}); + assert.equal(Konva.isDragging(), false); + assert.equal(Konva.DD.node, undefined); + }); }); \ No newline at end of file diff --git a/test/unit/Tween-test.js b/test/unit/Tween-test.js index 8c10daf1..74ed6ad3 100644 --- a/test/unit/Tween-test.js +++ b/test/unit/Tween-test.js @@ -132,7 +132,6 @@ suite('Tween', function() { setTimeout(function(){ - "use strict"; assert.equal(circle.x(), 200); assert.equal(circle.y(), 100); done(); diff --git a/test/unit/filters/Blur-test.js b/test/unit/filters/Blur-test.js index 0f6b3c3c..8c33963d 100644 --- a/test/unit/filters/Blur-test.js +++ b/test/unit/filters/Blur-test.js @@ -1,6 +1,7 @@ suite('Blur', function() { // ====================================================== test('basic blur', function(done) { + this.timeout(5000); var stage = addStage(); var imageObj = new Image(); diff --git a/test/unit/plugins/Label-test.js b/test/unit/plugins/Label-test.js index 14cfedfc..b70ee3e5 100644 --- a/test/unit/plugins/Label-test.js +++ b/test/unit/plugins/Label-test.js @@ -214,7 +214,7 @@ suite('Label', function() { stage.add(layer); - cloneAndCompareLayer(layer, 150); + cloneAndCompareLayer(layer, 220); }); }); \ No newline at end of file diff --git a/test/unit/plugins/Path-test.js b/test/unit/plugins/Path-test.js index f849d654..2c3af937 100644 --- a/test/unit/plugins/Path-test.js +++ b/test/unit/plugins/Path-test.js @@ -414,6 +414,7 @@ suite('Path', function() { // ====================================================== test('Tiger (RAWR!)', function() { + this.timeout(5000); var stage = addStage(); var layer = new Konva.Layer(); var group = new Konva.Group(); diff --git a/test/unit/plugins/RegularPolygon-test.js b/test/unit/plugins/RegularPolygon-test.js index a2ec061c..ffd90bb7 100644 --- a/test/unit/plugins/RegularPolygon-test.js +++ b/test/unit/plugins/RegularPolygon-test.js @@ -143,7 +143,7 @@ suite('RegularPolygon', function() { width : 100 }); if (!window.mochaPhantomJS) { - cloneAndCompareLayer(layer, 50); + cloneAndCompareLayer(layer, 200); } }); diff --git a/test/unit/shapes/Blob-test.js b/test/unit/shapes/Blob-test.js index 9575b28f..ce46e80f 100644 --- a/test/unit/shapes/Blob-test.js +++ b/test/unit/shapes/Blob-test.js @@ -106,12 +106,13 @@ suite('Blob', function(){ tension: 0.3, closed: true }); + blob.cache(); layer.add(blob); stage.add(layer); if (!window.mochaPhantomJS) { - cloneAndCompareLayer(layer, 50); + cloneAndCompareLayer(layer, 100); } }); }); \ No newline at end of file diff --git a/test/unit/shapes/Circle-test.js b/test/unit/shapes/Circle-test.js index 2d1f9a1d..ddf38f2d 100644 --- a/test/unit/shapes/Circle-test.js +++ b/test/unit/shapes/Circle-test.js @@ -266,6 +266,6 @@ suite('Circle', function(){ context.fill(); context.lineWidth = 4; context.stroke(); - compareLayerAndCanvas(layer, canvas, 50); + compareLayerAndCanvas(layer, canvas, 100); }); }); \ No newline at end of file diff --git a/test/unit/shapes/Text-test.js b/test/unit/shapes/Text-test.js index 5b459b24..775be9cd 100644 --- a/test/unit/shapes/Text-test.js +++ b/test/unit/shapes/Text-test.js @@ -366,5 +366,35 @@ suite('Text', function(){ }); }); + test.skip('cache text', function() { + var stage = addStage(); + var layer = new Konva.Layer(); + + var text = new Konva.Text({ + fontSize: 20, + y : 50, + x : 50, + fill: 'black', + text: 'Hello world with cache!\nHow are you?', + draggable : true + }); + + text.cache(); + layer.add(text); + + var text2 = new Konva.Text({ + fontSize: 20, + y : 50, + x : 260, + fill: 'black', + text: 'Hello world without cache!\nHow are you?', + draggable : true + }); + + layer.add(text2); + + stage.add(layer); + }); + }); \ No newline at end of file