fixed getIntersections bug

This commit is contained in:
Eric Rowell
2012-08-26 11:00:18 -07:00
parent 5e6c8774e8
commit 79a1029adb
6 changed files with 35 additions and 33 deletions

View File

@@ -3037,8 +3037,6 @@ Kinetic.Stage.prototype = {
if(p[3] === 255) { if(p[3] === 255) {
var colorKey = Kinetic.Type._rgbToHex(p[0], p[1], p[2]); var colorKey = Kinetic.Type._rgbToHex(p[0], p[1], p[2]);
shape = Kinetic.Global.shapes[colorKey]; shape = Kinetic.Global.shapes[colorKey];
var isDragging = Kinetic.Global.drag.moving;
return { return {
shape: shape, shape: shape,
pixel: p pixel: p
@@ -4092,8 +4090,8 @@ Kinetic.Shape.prototype = {
var bufferCanvas = stage.bufferCanvas; var bufferCanvas = stage.bufferCanvas;
bufferCanvas.clear(); bufferCanvas.clear();
this._draw(bufferCanvas); this._draw(bufferCanvas);
var obj = stage.getIntersection(pos); var p = bufferCanvas.context.getImageData(pos.x, pos.y, 1, 1).data;
return !!(obj && obj.pixel[3] > 0); return p[3] > 0;
}, },
__draw: function(canvas) { __draw: function(canvas) {
if(this.attrs.drawFunc) { if(this.attrs.drawFunc) {

File diff suppressed because one or more lines are too long

View File

@@ -332,8 +332,8 @@ Kinetic.Shape.prototype = {
var bufferCanvas = stage.bufferCanvas; var bufferCanvas = stage.bufferCanvas;
bufferCanvas.clear(); bufferCanvas.clear();
this._draw(bufferCanvas); this._draw(bufferCanvas);
var obj = stage.getIntersection(pos); var p = bufferCanvas.context.getImageData(pos.x, pos.y, 1, 1).data;
return !!(obj && obj.pixel[3] > 0); return p[3] > 0;
}, },
__draw: function(canvas) { __draw: function(canvas) {
if(this.attrs.drawFunc) { if(this.attrs.drawFunc) {

View File

@@ -369,8 +369,6 @@ Kinetic.Stage.prototype = {
if(p[3] === 255) { if(p[3] === 255) {
var colorKey = Kinetic.Type._rgbToHex(p[0], p[1], p[2]); var colorKey = Kinetic.Type._rgbToHex(p[0], p[1], p[2]);
shape = Kinetic.Global.shapes[colorKey]; shape = Kinetic.Global.shapes[colorKey];
var isDragging = Kinetic.Global.drag.moving;
return { return {
shape: shape, shape: shape,
pixel: p pixel: p

View File

@@ -13,6 +13,10 @@
window.onload = function() { window.onload = function() {
var test = new Test(); var test = new Test();
test.run(); test.run();
document.getElementsByTagName('body')[0].addEventListener('mousemove', function(evt) {
console.log(evt.clientX + ',' + evt.clientY);
}, false);
}; };
</script> </script>
</head> </head>

View File

@@ -387,8 +387,6 @@ Test.prototype.tests = {
}); });
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var redCircle = new Kinetic.Circle({ var redCircle = new Kinetic.Circle({
x: 380, x: 380,
y: stage.getHeight() / 2, y: stage.getHeight() / 2,
@@ -409,53 +407,57 @@ Test.prototype.tests = {
id: 'greenCircle' id: 'greenCircle'
}); });
group.add(redCircle); layer.add(redCircle);
layer.add(group);
layer.add(greenCircle); layer.add(greenCircle);
stage.add(layer); stage.add(layer);
test(stage.getIntersections(350, 118).length === 2, 'getIntersections should return two shapes'); // test individual shapes
test(stage.getIntersections(350, 118)[0].getId() === 'redCircle', 'first intersection should be redCircle'); test(stage.getIntersections(266, 114).length === 1, '17) getIntersections should return one shape');
test(stage.getIntersections(350, 118)[1].getId() === 'greenCircle', 'second intersection should be greenCircle'); test(stage.getIntersections(266, 114)[0].getId() === 'greenCircle', '19) first intersection should be greenCircle');
test(stage.getIntersections(414, 115).length === 1, '18) getIntersections should return one shape');
test(stage.getIntersections(414, 115)[0].getId() === 'redCircle', '20) first intersection should be redCircle');
test(stage.getIntersections(350, 118).length === 2, '1) getIntersections should return two shapes');
test(stage.getIntersections(350, 118)[0].getId() === 'redCircle', '2) first intersection should be redCircle');
test(stage.getIntersections(350, 118)[1].getId() === 'greenCircle', '3) second intersection should be greenCircle');
// hide green circle. make sure only red circle is in result set // hide green circle. make sure only red circle is in result set
greenCircle.hide(); greenCircle.hide();
layer.draw(); layer.draw();
test(stage.getIntersections(350, 118).length === 1, 'getIntersections should return one shape'); test(stage.getIntersections(350, 118).length === 1, '4) getIntersections should return one shape');
test(stage.getIntersections(350, 118)[0].getId() === 'redCircle', 'first intersection should be redCircle'); test(stage.getIntersections(350, 118)[0].getId() === 'redCircle', '5) first intersection should be redCircle');
// show green circle again. make sure both circles are in result set // show green circle again. make sure both circles are in result set
greenCircle.show(); greenCircle.show();
layer.draw(); layer.draw();
test(stage.getIntersections(350, 118).length === 2, 'getIntersections should return two shapes'); test(stage.getIntersections(350, 118).length === 2, '6) getIntersections should return two shapes');
test(stage.getIntersections(350, 118)[0].getId() === 'redCircle', 'first intersection should be redCircle'); test(stage.getIntersections(350, 118)[0].getId() === 'redCircle', '7) first intersection should be redCircle');
test(stage.getIntersections(350, 118)[1].getId() === 'greenCircle', 'second intersection should be greenCircle'); test(stage.getIntersections(350, 118)[1].getId() === 'greenCircle', '8) second intersection should be greenCircle');
// hide red circle. make sure only green circle is in result set // hide red circle. make sure only green circle is in result set
redCircle.hide(); redCircle.hide();
layer.draw(); layer.draw();
test(stage.getIntersections(350, 118).length === 1, 'getIntersections should return one shape'); test(stage.getIntersections(350, 118).length === 1, '9) getIntersections should return one shape');
test(stage.getIntersections(350, 118)[0].getId() === 'greenCircle', 'first intersection should be greenCircle'); test(stage.getIntersections(350, 118)[0].getId() === 'greenCircle', '10) first intersection should be greenCircle');
// show red circle again. make sure both circles are in result set // show red circle again. make sure both circles are in result set
redCircle.show(); redCircle.show();
layer.draw(); layer.draw();
test(stage.getIntersections(350, 118).length === 2, 'getIntersections should return two shapes'); test(stage.getIntersections(350, 118).length === 2, '11) getIntersections should return two shapes');
test(stage.getIntersections(350, 118)[0].getId() === 'redCircle', 'first intersection should be redCircle'); test(stage.getIntersections(350, 118)[0].getId() === 'redCircle', '12) first intersection should be redCircle');
test(stage.getIntersections(350, 118)[1].getId() === 'greenCircle', 'second intersection should be greenCircle'); test(stage.getIntersections(350, 118)[1].getId() === 'greenCircle', '13) second intersection should be greenCircle');
// test from layer // test from layer
test(layer.getIntersections(350, 118).length === 2, 'getIntersections should return two shapes'); test(layer.getIntersections(350, 118).length === 2, '14) getIntersections should return two shapes');
test(layer.getIntersections(350, 118)[0].getId() === 'redCircle', 'first intersection should be redCircle'); test(layer.getIntersections(350, 118)[0].getId() === 'redCircle', '15) first intersection should be redCircle');
test(layer.getIntersections(350, 118)[1].getId() === 'greenCircle', 'second intersection should be greenCircle'); test(layer.getIntersections(350, 118)[1].getId() === 'greenCircle', '16) second intersection should be greenCircle');
// test from group
test(group.getIntersections(350, 118).length === 1, 'getIntersections should return two shapes');
test(group.getIntersections(350, 118)[0].getId() === 'redCircle', 'first intersection should be redCircle');
}, },
'STAGE - scale stage after add layer': function(containerId) { 'STAGE - scale stage after add layer': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({