lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-05 20:48:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

rewrote intersects method, which now leverages the new getIntersection method. fixed up unit tests. also fixed bug with getIntersection method

Browse Source
This commit is contained in:
Eric Rowell 2012-08-18 22:42:37 -07:00
parent f944409a1e
commit e19dae3402
6 changed files with 117 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
dist/kinetic-core.js vendored
View File

@ -3048,18 +3048,15 @@ Kinetic.Stage = Kinetic.Container.extend({
return { return {
shape: shape, shape: shape,
pixels: p pixel: p
}; };
} }
// if no shape mapped to that pixel, return pixel array // if no shape mapped to that pixel, return pixel array
else if(p[0] > 0 || p[1] > 0 || p[2] > 0 || p[3] > 0) { else if(p[0] > 0 || p[1] > 0 || p[2] > 0 || p[3] > 0) {
return { return {
pixels: p pixel: p
}; };
} }
else {
return null;
}
} }
return null; return null;
@ -3157,7 +3154,7 @@ Kinetic.Stage = Kinetic.Container.extend({
if(obj) { if(obj) {
var shape = obj.shape; var shape = obj.shape;
if(shape) { if(shape) {
if(!go.drag.moving && obj.pixels[3] === 255 && (!this.targetShape || this.targetShape._id !== shape._id)) { if(!go.drag.moving && obj.pixel[3] === 255 && (!this.targetShape || this.targetShape._id !== shape._id)) {
if(this.targetShape) { if(this.targetShape) {
this.targetShape._handleEvent('mouseout', evt, shape); this.targetShape._handleEvent('mouseout', evt, shape);
} }
@ -4100,11 +4097,11 @@ Kinetic.Shape = Kinetic.Node.extend({
intersects: function() { intersects: function() {
var pos = Kinetic.Type._getXY(Array.prototype.slice.call(arguments)); var pos = Kinetic.Type._getXY(Array.prototype.slice.call(arguments));
var stage = this.getStage(); var stage = this.getStage();
var bufferCanvas = stage.bufferCanvas;
// TODO: need to re-implement bufferCanvas.clear();
this._draw(bufferCanvas);
// default var obj = stage.getIntersection(pos);
return false; return !!(obj && obj.pixel[3] > 0);
}, },
_draw: function(canvas) { _draw: function(canvas) {
if(this.attrs.drawFunc) { if(this.attrs.drawFunc) {
@ -4158,7 +4155,7 @@ Kinetic.Shape = Kinetic.Node.extend({
this.attrs[key] = ''; this.attrs[key] = '';
} }
// image is a special case // image is a special case
if('image' in this.attrs) { if('image' in this.attrs) {
attrs.image = this.attrs.image; attrs.image = this.attrs.image;
@ -4182,7 +4179,7 @@ Kinetic.Shape = Kinetic.Node.extend({
var key = bothLists[n]; var key = bothLists[n];
this.attrs[key] = attrs[key]; this.attrs[key] = attrs[key];
} }
// image is a special case // image is a special case
this.attrs.image = attrs.image; this.attrs.image = attrs.image;
} }

4
dist/kinetic-core.min.js vendored
View File

File diff suppressed because one or more lines are too long

14
src/Shape.js
View File

@ -313,11 +313,11 @@ Kinetic.Shape = Kinetic.Node.extend({
intersects: function() { intersects: function() {
var pos = Kinetic.Type._getXY(Array.prototype.slice.call(arguments)); var pos = Kinetic.Type._getXY(Array.prototype.slice.call(arguments));
var stage = this.getStage(); var stage = this.getStage();
var bufferCanvas = stage.bufferCanvas;
// TODO: need to re-implement bufferCanvas.clear();
this._draw(bufferCanvas);
// default var obj = stage.getIntersection(pos);
return false; return !!(obj && obj.pixel[3] > 0);
}, },
_draw: function(canvas) { _draw: function(canvas) {
if(this.attrs.drawFunc) { if(this.attrs.drawFunc) {
@ -371,7 +371,7 @@ Kinetic.Shape = Kinetic.Node.extend({
this.attrs[key] = ''; this.attrs[key] = '';
} }
// image is a special case // image is a special case
if('image' in this.attrs) { if('image' in this.attrs) {
attrs.image = this.attrs.image; attrs.image = this.attrs.image;
@ -395,7 +395,7 @@ Kinetic.Shape = Kinetic.Node.extend({
var key = bothLists[n]; var key = bothLists[n];
this.attrs[key] = attrs[key]; this.attrs[key] = attrs[key];
} }
// image is a special case // image is a special case
this.attrs.image = attrs.image; this.attrs.image = attrs.image;
} }

9
src/Stage.js
View File

@ -369,18 +369,15 @@ Kinetic.Stage = Kinetic.Container.extend({
return { return {
shape: shape, shape: shape,
pixels: p pixel: p
}; };
} }
// if no shape mapped to that pixel, return pixel array // if no shape mapped to that pixel, return pixel array
else if(p[0] > 0 || p[1] > 0 || p[2] > 0 || p[3] > 0) { else if(p[0] > 0 || p[1] > 0 || p[2] > 0 || p[3] > 0) {
return { return {
pixels: p pixel: p
}; };
} }
else {
return null;
}
} }
return null; return null;
@ -478,7 +475,7 @@ Kinetic.Stage = Kinetic.Container.extend({
if(obj) { if(obj) {
var shape = obj.shape; var shape = obj.shape;
if(shape) { if(shape) {
if(!go.drag.moving && obj.pixels[3] === 255 && (!this.targetShape || this.targetShape._id !== shape._id)) { if(!go.drag.moving && obj.pixel[3] === 255 && (!this.targetShape || this.targetShape._id !== shape._id)) {
if(this.targetShape) { if(this.targetShape) {
this.targetShape._handleEvent('mouseout', evt, shape); this.targetShape._handleEvent('mouseout', evt, shape);
} }

5
tests/js/manualTests.js
View File

@ -444,6 +444,11 @@ Test.prototype.tests = {
layer.add(greenEllipse); layer.add(greenEllipse);
stage.add(layer); stage.add(layer);
//greenEllipse.hide();
layer.draw();
//document.body.appendChild(layer.bufferCanvas.element);
}, },
'EVENTS - move mouse from shape in one group to shape in another group': function(containerId) { 'EVENTS - move mouse from shape in one group to shape in another group': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({

184
tests/js/unitTests.js
View File

@ -378,87 +378,85 @@ Test.prototype.tests = {
//console.log(stage.toJSON()); //console.log(stage.toJSON());
//test(stage.toJSON() === json, "problem loading stage with custom shape json"); //test(stage.toJSON() === json, "problem loading stage with custom shape json");
}, },
/* 'EVENTS - test getIntersections': function(containerId) {
'EVENTS - test getIntersections': function(containerId) { var stage = new Kinetic.Stage({
var stage = new Kinetic.Stage({ container: containerId,
container: containerId, width: 578,
width: 578, height: 200,
height: 200, throttle: 999
throttle: 999 });
}); var layer = new Kinetic.Layer();
var layer = new Kinetic.Layer();
var group = new Kinetic.Group(); var group = new Kinetic.Group();
var redCircle = new Kinetic.Ellipse({ var redCircle = new Kinetic.Ellipse({
x: 380, x: 380,
y: stage.getHeight() / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
strokeWidth: 4, strokeWidth: 4,
fill: 'red', fill: 'red',
stroke: 'black', stroke: 'black',
id: 'redCircle' id: 'redCircle'
}); });
var greenCircle = new Kinetic.Ellipse({ var greenCircle = new Kinetic.Ellipse({
x: 300, x: 300,
y: stage.getHeight() / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
strokeWidth: 4, strokeWidth: 4,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
id: 'greenCircle' id: 'greenCircle'
}); });
group.add(redCircle); group.add(redCircle);
layer.add(group); 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(stage.getIntersections(350, 118).length === 2, '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', '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', '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, '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', '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, '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', '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', '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, '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', '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, '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', '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', '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, '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', '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', 'second intersection should be greenCircle');
// test from group // test from group
test(group.getIntersections(350, 118).length === 1, 'getIntersections should return two shapes'); 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'); 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({
container: containerId, container: containerId,
@ -1826,7 +1824,6 @@ Test.prototype.tests = {
setTimeout(function() { setTimeout(function() {
sprite.stop(); sprite.stop();
}, 3000); }, 3000);
//document.body.appendChild(layer.bufferCanvas.element) //document.body.appendChild(layer.bufferCanvas.element)
}; };
imageObj.src = '../assets/scorpion-sprite.png'; imageObj.src = '../assets/scorpion-sprite.png';
@ -2371,12 +2368,12 @@ Test.prototype.tests = {
layer.add(lion); layer.add(lion);
lion.createBufferImage(function() { lion.createBufferImage(function() {
stage.add(layer); stage.add(layer);
}); });
//document.body.appendChild(layer.bufferCanvas.element); //document.body.appendChild(layer.bufferCanvas.element);
}; };
imageObj.src = '../assets/lion.png'; imageObj.src = '../assets/lion.png';
}, },
'SHAPE - custom shape with fill, stroke, and strokeWidth': function(containerId) { 'SHAPE - custom shape with fill, stroke, and strokeWidth': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
@ -2524,32 +2521,31 @@ Test.prototype.tests = {
layer.add(rect); layer.add(rect);
stage.add(layer); stage.add(layer);
/* test(rect.intersects({
test(rect.intersects({ x: 200,
x: 200, y: 100
y: 100 }) === true, '(200,100) should intersect the shape');
}) === true, 'problem with point in shape');
test(rect.intersects({ test(rect.intersects({
x: 199, x: 197,
y: 99 y: 97
}) === false, 'intersects with point in shape'); }) === false, '(197, 97) should not intersect the shape');
test(rect.intersects({ test(rect.intersects({
x: 250, x: 250,
y: 125 y: 125
}) === true, 'intersects with point in shape'); }) === true, '(250, 125) should intersect the shape');
test(rect.intersects({ test(rect.intersects({
x: 300, x: 300,
y: 150 y: 150
}) === true, 'intersects with point in shape'); }) === true, '(300, 150) should intersect the shape');
test(rect.intersects({
x: 303,
y: 153
}) === false, '(303, 153) should not intersect the shape');
test(rect.intersects({
x: 301,
y: 151
}) === false, 'intersects with point in shape');
*/
}, },
'CONTAINER - node type selector': function(containerId) { 'CONTAINER - node type selector': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
@ -4735,7 +4731,7 @@ Test.prototype.tests = {
y: 10 y: 10
}); });
var mapLayer = new Kinetic.Layer(); var mapLayer = new Kinetic.Layer();
for(var key in worldMap.shapes) { for(var key in worldMap.shapes) {
var c = worldMap.shapes[key]; var c = worldMap.shapes[key];
@ -4763,7 +4759,7 @@ Test.prototype.tests = {
} }
stage.add(mapLayer); stage.add(mapLayer);
//document.body.appendChild(mapLayer.bufferCanvas.element); //document.body.appendChild(mapLayer.bufferCanvas.element);
}, },
'PATH - curved arrow path': function(containerId) { 'PATH - curved arrow path': function(containerId) {
@ -4997,7 +4993,7 @@ Test.prototype.tests = {
group.setDraggable(true); group.setDraggable(true);
layer.add(group); layer.add(group);
stage.add(layer); stage.add(layer);
//document.body.appendChild(layer.bufferCanvas.element) //document.body.appendChild(layer.bufferCanvas.element)
}, },