fixed #609 and also made sure that layer.clear() also clears the hit context

This commit is contained in:
Eric Rowell 2013-09-23 08:31:14 -07:00
parent e39bc36190
commit 10dfeb5ef1
3 changed files with 88 additions and 10 deletions

View File

@ -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 {

View File

@ -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();<br>
* 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

View File

@ -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();