added new stage.getIntersects() method which allows you to obtain all the shapes that intersect a given point. Also enhanced all methods that require an x or y by allowing either two arguments to be passed in or an object to be passed in. Example foo(100, 50) or foo({x:100, y:50});

This commit is contained in:
Eric Rowell 2012-04-27 23:57:01 -07:00
parent 192681374d
commit 9fef9e54d9
7 changed files with 124 additions and 21 deletions

43
dist/kinetic-core.js vendored
View File

@ -146,6 +146,18 @@ Kinetic.GlobalObject = {
},
_isFunction: function(obj) {
return !!(obj && obj.constructor && obj.call && obj.apply);
},
_getPoint: function(arg) {
if(arg.length === 1) {
return arg[0];
}
else {
return {
x: arg[0],
y: arg[1]
}
}
}
};
@ -445,12 +457,12 @@ Kinetic.Node.prototype = {
},
/**
* set node position
* @param {Number} x
* @param {Number} y
* @param {Object} point
*/
setPosition: function(x, y) {
this.attrs.x = x;
this.attrs.y = y;
setPosition: function() {
var pos = Kinetic.GlobalObject._getPoint(arguments);
this.attrs.x = pos.x;
this.attrs.y = pos.y;
},
/**
* set node x position
@ -511,7 +523,8 @@ Kinetic.Node.prototype = {
* @param {Object} pos object containing an x and
* y property
*/
setAbsolutePosition: function(pos) {
setAbsolutePosition: function() {
var pos = Kinetic.GlobalObject._getPoint(arguments);
/*
* save rotation and scale and
* then remove them from the transform
@ -1540,11 +1553,22 @@ Kinetic.Stage.prototype = {
return this.attrs.height;
},
/**
* get shapes in point
* get shapes that intersect a point
* @param {Object} point
*/
getShapesInPoint: function(pos) {
getIntersections: function() {
var pos = Kinetic.GlobalObject._getPoint(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;
},
/**
* detect event
@ -2356,7 +2380,8 @@ Kinetic.Shape.prototype = {
/**
* determines if point is in the shape
*/
intersects: function(pos) {
intersects: function() {
var pos = Kinetic.GlobalObject._getPoint(arguments);
var stage = this.getStage();
if(this.attrs.detectionType === 'path') {

File diff suppressed because one or more lines are too long

View File

@ -118,6 +118,18 @@ Kinetic.GlobalObject = {
},
_isFunction: function(obj) {
return !!(obj && obj.constructor && obj.call && obj.apply);
},
_getPoint: function(arg) {
if(arg.length === 1) {
return arg[0];
}
else {
return {
x: arg[0],
y: arg[1]
}
}
}
};

View File

@ -287,12 +287,12 @@ Kinetic.Node.prototype = {
},
/**
* set node position
* @param {Number} x
* @param {Number} y
* @param {Object} point
*/
setPosition: function(x, y) {
this.attrs.x = x;
this.attrs.y = y;
setPosition: function() {
var pos = Kinetic.GlobalObject._getPoint(arguments);
this.attrs.x = pos.x;
this.attrs.y = pos.y;
},
/**
* set node x position
@ -353,7 +353,8 @@ Kinetic.Node.prototype = {
* @param {Object} pos object containing an x and
* y property
*/
setAbsolutePosition: function(pos) {
setAbsolutePosition: function() {
var pos = Kinetic.GlobalObject._getPoint(arguments);
/*
* save rotation and scale and
* then remove them from the transform

View File

@ -173,7 +173,8 @@ Kinetic.Shape.prototype = {
/**
* determines if point is in the shape
*/
intersects: function(pos) {
intersects: function() {
var pos = Kinetic.GlobalObject._getPoint(arguments);
var stage = this.getStage();
if(this.attrs.detectionType === 'path') {

View File

@ -351,11 +351,22 @@ Kinetic.Stage.prototype = {
return this.attrs.height;
},
/**
* get shapes in point
* get shapes that intersect a point
* @param {Object} point
*/
getShapesInPoint: function(pos) {
getIntersections: function() {
var pos = Kinetic.GlobalObject._getPoint(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;
},
/**
* detect event

View File

@ -1348,7 +1348,7 @@ Test.prototype.tests = {
y: 151
}) === false, 'intersects with point in shape');
},
'STAGE - node type selector': function(containerId) {
'CONTAINER - node type selector': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@ -1398,6 +1398,59 @@ Test.prototype.tests = {
test(group.get('Layer').length === 0, 'group should have 0 layers');
test(group.get('Group').length === 0, 'group should have 0 groups');
},
'STAGE - test getShapesInPoint': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
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 red = new Kinetic.Rect({
x: 250,
y: 100,
width: 100,
height: 50,
fill: 'red'
});
group.add(red);
layer.add(blue);
layer.add(group);
stage.add(layer);
stage.add(fooLayer);
test(stage.getIntersections({
x: 201,
y: 101
}).length === 1, 'should be 1 shape ');
test(stage.getIntersections(201, 101).length === 1, 'should be 1 shape ');
test(stage.getIntersections(201, 101)[0].getName() === 'blue', 'shape name should be blue');
test(stage.getIntersections({
x: 251,
y: 101
}).length === 2, 'should be 2 shapes ');
test(stage.getIntersections({
x: 350,
y: 150
}).length === 1, 'should be 1 shape ');
},
'Text - add text': function(containerId) {
var stage = new Kinetic.Stage({