diff --git a/src/Context.js b/src/Context.js index b60aee0c..d47ae311 100644 --- a/src/Context.js +++ b/src/Context.js @@ -151,13 +151,14 @@ * @method * @memberof Kinetic.Context.prototype */ - clear: function(clip) { - var canvas = this.getCanvas(), + clear: function() { + var args = [].slice.call(arguments), + canvas = this.getCanvas(), pos, size; - if (clip) { - pos = Kinetic.Util._getXY(clip); - size = Kinetic.Util._getSize(clip); + if (args.length) { + pos = Kinetic.Util._getXY(args); + size = Kinetic.Util._getSize(args); this.clearRect(pos.x || 0, pos.y || 0, size.width, size.height); } else { diff --git a/src/Layer.js b/src/Layer.js index c67f7436..43cc70c8 100644 --- a/src/Layer.js +++ b/src/Layer.js @@ -104,15 +104,20 @@ return this.getCanvas().getContext(); }, /** - * clear canvas tied to the layer + * clear scene and hit canvas contexts tied to the layer * @method * @memberof Kinetic.Node.prototype - * @param {Object} [clip] clipping bounds + * @param {Array|Object} [bounds] * @example - * layer.clear([0, 0, 100, 100]) + * layer.clear();
+ * layer.clear(0, 0, 100, 100); */ - clear: function(clip) { - this.getCanvas().clear(clip); + clear: function() { + var context = this.getContext(), + hitContext = this.getHitCanvas().getContext(); + + context.clear.apply(context, arguments); + hitContext.clear.apply(hitContext, arguments); return this; }, // extend Node.prototype.setVisible diff --git a/test/unit/Layer-test.js b/test/unit/Layer-test.js index 2d0d2d41..3852fba5 100644 --- a/test/unit/Layer-test.js +++ b/test/unit/Layer-test.js @@ -29,6 +29,78 @@ suite('Layer', function() { assert.equal(style.left, '0px', 'canvas left should be 0px'); }); + test('test clear()', function(){ + var stage = addStage(); + var layer = new Kinetic.Layer(); + var circle = new Kinetic.Circle({ + x: 100, + y: 100, + radius: 70, + fill: 'green', + stroke: 'black', + strokeWidth: 4, + name: 'myCircle', + draggable: true + }); + + circle.colorKey = '#000000'; + + circle.on('mouseover', function() { + console.log('mouseover'); + }); + + layer.add(circle); + stage.add(layer); + + layer.clear(); + + var trace = layer.getContext().getTrace(); + //console.log(trace); + assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();clearRect(0,0,578,200);'); + + var hitTrace = layer.getHitCanvas().getContext().getTrace(); + //console.log(hitTrace); + assert.equal(hitTrace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,6.283,false);closePath();save();fillStyle=#000000;fill();restore();lineWidth=4;strokeStyle=#000000;stroke();restore();clearRect(0,0,578,200);'); + + showHit(layer); + }); + + test('test clear() with bounds', function(){ + var stage = addStage(); + var layer = new Kinetic.Layer(); + var circle = new Kinetic.Circle({ + x: 100, + y: 100, + radius: 70, + fill: 'green', + stroke: 'black', + strokeWidth: 4, + name: 'myCircle', + draggable: true + }); + + circle.colorKey = '#000000'; + + circle.on('mouseover', function() { + console.log('mouseover'); + }); + + layer.add(circle); + stage.add(layer); + + layer.clear(100, 100, 100, 100); + + var trace = layer.getContext().getTrace(); + //console.log(trace); + assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();clearRect(100,100,100,100);'); + + var hitTrace = layer.getHitCanvas().getContext().getTrace(); + //console.log(hitTrace); + assert.equal(hitTrace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,6.283,false);closePath();save();fillStyle=#000000;fill();restore();lineWidth=4;strokeStyle=#000000;stroke();restore();clearRect(100,100,100,100);'); + + showHit(layer); + }); + // ====================================================== test('layer getIntersection()', function() { var stage = addStage();