mirror of
https://github.com/konvajs/konva.git
synced 2025-06-28 15:23:44 +08:00
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:
parent
192681374d
commit
9fef9e54d9
43
dist/kinetic-core.js
vendored
43
dist/kinetic-core.js
vendored
@ -146,6 +146,18 @@ Kinetic.GlobalObject = {
|
|||||||
},
|
},
|
||||||
_isFunction: function(obj) {
|
_isFunction: function(obj) {
|
||||||
return !!(obj && obj.constructor && obj.call && obj.apply);
|
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
|
* set node position
|
||||||
* @param {Number} x
|
* @param {Object} point
|
||||||
* @param {Number} y
|
|
||||||
*/
|
*/
|
||||||
setPosition: function(x, y) {
|
setPosition: function() {
|
||||||
this.attrs.x = x;
|
var pos = Kinetic.GlobalObject._getPoint(arguments);
|
||||||
this.attrs.y = y;
|
this.attrs.x = pos.x;
|
||||||
|
this.attrs.y = pos.y;
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* set node x position
|
* set node x position
|
||||||
@ -511,7 +523,8 @@ Kinetic.Node.prototype = {
|
|||||||
* @param {Object} pos object containing an x and
|
* @param {Object} pos object containing an x and
|
||||||
* y property
|
* y property
|
||||||
*/
|
*/
|
||||||
setAbsolutePosition: function(pos) {
|
setAbsolutePosition: function() {
|
||||||
|
var pos = Kinetic.GlobalObject._getPoint(arguments);
|
||||||
/*
|
/*
|
||||||
* save rotation and scale and
|
* save rotation and scale and
|
||||||
* then remove them from the transform
|
* then remove them from the transform
|
||||||
@ -1540,11 +1553,22 @@ Kinetic.Stage.prototype = {
|
|||||||
return this.attrs.height;
|
return this.attrs.height;
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* get shapes in point
|
* get shapes that intersect a point
|
||||||
* @param {Object} 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
|
* detect event
|
||||||
@ -2356,7 +2380,8 @@ Kinetic.Shape.prototype = {
|
|||||||
/**
|
/**
|
||||||
* determines if point is in the shape
|
* determines if point is in the shape
|
||||||
*/
|
*/
|
||||||
intersects: function(pos) {
|
intersects: function() {
|
||||||
|
var pos = Kinetic.GlobalObject._getPoint(arguments);
|
||||||
var stage = this.getStage();
|
var stage = this.getStage();
|
||||||
|
|
||||||
if(this.attrs.detectionType === 'path') {
|
if(this.attrs.detectionType === 'path') {
|
||||||
|
4
dist/kinetic-core.min.js
vendored
4
dist/kinetic-core.min.js
vendored
File diff suppressed because one or more lines are too long
@ -118,6 +118,18 @@ Kinetic.GlobalObject = {
|
|||||||
},
|
},
|
||||||
_isFunction: function(obj) {
|
_isFunction: function(obj) {
|
||||||
return !!(obj && obj.constructor && obj.call && obj.apply);
|
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]
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
13
src/Node.js
13
src/Node.js
@ -287,12 +287,12 @@ Kinetic.Node.prototype = {
|
|||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* set node position
|
* set node position
|
||||||
* @param {Number} x
|
* @param {Object} point
|
||||||
* @param {Number} y
|
|
||||||
*/
|
*/
|
||||||
setPosition: function(x, y) {
|
setPosition: function() {
|
||||||
this.attrs.x = x;
|
var pos = Kinetic.GlobalObject._getPoint(arguments);
|
||||||
this.attrs.y = y;
|
this.attrs.x = pos.x;
|
||||||
|
this.attrs.y = pos.y;
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* set node x position
|
* set node x position
|
||||||
@ -353,7 +353,8 @@ Kinetic.Node.prototype = {
|
|||||||
* @param {Object} pos object containing an x and
|
* @param {Object} pos object containing an x and
|
||||||
* y property
|
* y property
|
||||||
*/
|
*/
|
||||||
setAbsolutePosition: function(pos) {
|
setAbsolutePosition: function() {
|
||||||
|
var pos = Kinetic.GlobalObject._getPoint(arguments);
|
||||||
/*
|
/*
|
||||||
* save rotation and scale and
|
* save rotation and scale and
|
||||||
* then remove them from the transform
|
* then remove them from the transform
|
||||||
|
@ -173,7 +173,8 @@ Kinetic.Shape.prototype = {
|
|||||||
/**
|
/**
|
||||||
* determines if point is in the shape
|
* determines if point is in the shape
|
||||||
*/
|
*/
|
||||||
intersects: function(pos) {
|
intersects: function() {
|
||||||
|
var pos = Kinetic.GlobalObject._getPoint(arguments);
|
||||||
var stage = this.getStage();
|
var stage = this.getStage();
|
||||||
|
|
||||||
if(this.attrs.detectionType === 'path') {
|
if(this.attrs.detectionType === 'path') {
|
||||||
|
15
src/Stage.js
15
src/Stage.js
@ -351,11 +351,22 @@ Kinetic.Stage.prototype = {
|
|||||||
return this.attrs.height;
|
return this.attrs.height;
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* get shapes in point
|
* get shapes that intersect a point
|
||||||
* @param {Object} 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
|
* detect event
|
||||||
|
@ -1348,7 +1348,7 @@ Test.prototype.tests = {
|
|||||||
y: 151
|
y: 151
|
||||||
}) === false, 'intersects with point in shape');
|
}) === false, 'intersects with point in shape');
|
||||||
},
|
},
|
||||||
'STAGE - node type selector': function(containerId) {
|
'CONTAINER - node type selector': function(containerId) {
|
||||||
var stage = new Kinetic.Stage({
|
var stage = new Kinetic.Stage({
|
||||||
container: containerId,
|
container: containerId,
|
||||||
width: 578,
|
width: 578,
|
||||||
@ -1398,6 +1398,59 @@ Test.prototype.tests = {
|
|||||||
test(group.get('Layer').length === 0, 'group should have 0 layers');
|
test(group.get('Layer').length === 0, 'group should have 0 layers');
|
||||||
test(group.get('Group').length === 0, 'group should have 0 groups');
|
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) {
|
'Text - add text': function(containerId) {
|
||||||
var stage = new Kinetic.Stage({
|
var stage = new Kinetic.Stage({
|
||||||
|
Loading…
Reference in New Issue
Block a user