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

getIntersections no longer returns visible shapes in the result set, and can also be called from any container

Browse Source
This commit is contained in:
Eric Rowell 2012-07-06 21:45:18 -07:00
parent 1f3d1cc905
commit 9baaee2440
6 changed files with 98 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
dist/kinetic-core.js vendored
View File

@ -1558,6 +1558,24 @@ Kinetic.Container = Kinetic.Node.extend({
return false;
},
/**
* get shapes that intersect a point
* @param {Object} point
*/
getIntersections: function() {
var pos = Kinetic.Type._getXY(Array.prototype.slice.call(arguments));
var arr = [];
var shapes = this.get('Shape');
for(var n = 0; n < shapes.length; n++) {
var shape = shapes[n];
if(shape.isVisible() && shape.intersects(pos)) {
arr.push(shape);
}
}
return arr;
},
/**
* get all shapes inside container
*/
@ -1909,24 +1927,6 @@ Kinetic.Stage = Kinetic.Container.extend({
getStage: function() {
return this;
},
/**
* get shapes that intersect a point
* @param {Object} point
*/
getIntersections: function() {
var pos = Kinetic.Type._getXY(Array.prototype.slice.call(arguments));
var arr = [];
var shapes = this.get('Shape');
for(var n = 0; n < shapes.length; n++) {
var shape = shapes[n];
if(shape.intersects(pos)) {
arr.push(shape);
}
}
return arr;
},
/**
* get stage DOM node, which is a div element
* with the class name "kineticjs-content"

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

File diff suppressed because one or more lines are too long

18
src/Container.js
View File

@ -153,6 +153,24 @@ Kinetic.Container = Kinetic.Node.extend({
return false;
},
/**
* get shapes that intersect a point
* @param {Object} point
*/
getIntersections: function() {
var pos = Kinetic.Type._getXY(Array.prototype.slice.call(arguments));
var arr = [];
var shapes = this.get('Shape');
for(var n = 0; n < shapes.length; n++) {
var shape = shapes[n];
if(shape.isVisible() && shape.intersects(pos)) {
arr.push(shape);
}
}
return arr;
},
/**
* get all shapes inside container
*/

18
src/Stage.js
View File

@ -281,24 +281,6 @@ Kinetic.Stage = Kinetic.Container.extend({
getStage: function() {
return this;
},
/**
* get shapes that intersect a point
* @param {Object} point
*/
getIntersections: function() {
var pos = Kinetic.Type._getXY(Array.prototype.slice.call(arguments));
var arr = [];
var shapes = this.get('Shape');
for(var n = 0; n < shapes.length; n++) {
var shape = shapes[n];
if(shape.intersects(pos)) {
arr.push(shape);
}
}
return arr;
},
/**
* get stage DOM node, which is a div element
* with the class name "kineticjs-content"

2
tests/js/manualTests.js
View File

@ -109,7 +109,7 @@ Test.prototype.tests = {
easing: 'bounce-ease-out'
});
},
'TRANSITION - all transition types': function(containerId) {
'*TRANSITION - all transition types': function(containerId) {
document.getElementById(containerId).style.height = '300px';
var stage = new Kinetic.Stage({

92
tests/js/unitTests.js
View File

@ -412,58 +412,84 @@ Test.prototype.tests = {
//console.log(stage.toJSON());
test(stage.toJSON() === json, "problem loading stage with custom shape json");
},
'STAGE - test getShapesInPoint': function(containerId) {
'EVENTS - test getIntersections': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
height: 200,
throttle: 999
});
var layer = new Kinetic.Layer();
var fooLayer = new Kinetic.Layer();
var group = new Kinetic.Group();
var blue = new Kinetic.Rect({
x: 200,
y: 100,
width: 100,
height: 50,
fill: 'blue',
name: 'blue'
var redCircle = new Kinetic.Ellipse({
x: 380,
y: stage.getHeight() / 2,
radius: 70,
strokeWidth: 4,
fill: 'red',
stroke: 'black',
id: 'redCircle'
});
var red = new Kinetic.Rect({
x: 250,
y: 100,
width: 100,
height: 50,
fill: 'red'
var greenCircle = new Kinetic.Ellipse({
x: 300,
y: stage.getHeight() / 2,
radius: 70,
strokeWidth: 4,
fill: 'green',
stroke: 'black',
id: 'greenCircle'
});
group.add(red);
layer.add(blue);
group.add(redCircle);
layer.add(group);
layer.add(greenCircle);
stage.add(layer);
stage.add(fooLayer);
test(stage.getIntersections({
x: 201,
y: 101
}).length === 1, 'should be 1 shape ');
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)[1].getId() === 'greenCircle', 'second intersection should be greenCircle');
test(stage.getIntersections(201, 101).length === 1, 'should be 1 shape ');
// hide green circle. make sure only red circle is in result set
greenCircle.hide();
layer.draw();
test(stage.getIntersections(201, 101)[0].getName() === 'blue', 'shape name should be blue');
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({
x: 251,
y: 101
}).length === 2, 'should be 2 shapes ');
// show green circle again. make sure both circles are in result set
greenCircle.show();
layer.draw();
test(stage.getIntersections({
x: 350,
y: 150
}).length === 1, 'should be 1 shape ');
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)[1].getId() === 'greenCircle', 'second intersection should be greenCircle');
// hide red circle. make sure only green circle is in result set
redCircle.hide();
layer.draw();
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');
// show red circle again. make sure both circles are in result set
redCircle.show();
layer.draw();
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)[1].getId() === 'greenCircle', 'second intersection should be greenCircle');
// test from layer
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)[1].getId() === 'greenCircle', '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) {
var stage = new Kinetic.Stage({