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

9
src/Stage.js
View File

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

5
tests/js/manualTests.js
View File

@ -444,6 +444,11 @@ Test.prototype.tests = {
layer.add(greenEllipse);
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) {
var stage = new Kinetic.Stage({

184
tests/js/unitTests.js
View File

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