mirror of
https://github.com/konvajs/konva.git
synced 2025-10-15 12:34:52 +08:00
fixed getIntersections bug
This commit is contained in:
6
dist/kinetic-core.js
vendored
6
dist/kinetic-core.js
vendored
@@ -3037,8 +3037,6 @@ Kinetic.Stage.prototype = {
|
|||||||
if(p[3] === 255) {
|
if(p[3] === 255) {
|
||||||
var colorKey = Kinetic.Type._rgbToHex(p[0], p[1], p[2]);
|
var colorKey = Kinetic.Type._rgbToHex(p[0], p[1], p[2]);
|
||||||
shape = Kinetic.Global.shapes[colorKey];
|
shape = Kinetic.Global.shapes[colorKey];
|
||||||
var isDragging = Kinetic.Global.drag.moving;
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
shape: shape,
|
shape: shape,
|
||||||
pixel: p
|
pixel: p
|
||||||
@@ -4092,8 +4090,8 @@ Kinetic.Shape.prototype = {
|
|||||||
var bufferCanvas = stage.bufferCanvas;
|
var bufferCanvas = stage.bufferCanvas;
|
||||||
bufferCanvas.clear();
|
bufferCanvas.clear();
|
||||||
this._draw(bufferCanvas);
|
this._draw(bufferCanvas);
|
||||||
var obj = stage.getIntersection(pos);
|
var p = bufferCanvas.context.getImageData(pos.x, pos.y, 1, 1).data;
|
||||||
return !!(obj && obj.pixel[3] > 0);
|
return p[3] > 0;
|
||||||
},
|
},
|
||||||
__draw: function(canvas) {
|
__draw: function(canvas) {
|
||||||
if(this.attrs.drawFunc) {
|
if(this.attrs.drawFunc) {
|
||||||
|
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
@@ -332,8 +332,8 @@ Kinetic.Shape.prototype = {
|
|||||||
var bufferCanvas = stage.bufferCanvas;
|
var bufferCanvas = stage.bufferCanvas;
|
||||||
bufferCanvas.clear();
|
bufferCanvas.clear();
|
||||||
this._draw(bufferCanvas);
|
this._draw(bufferCanvas);
|
||||||
var obj = stage.getIntersection(pos);
|
var p = bufferCanvas.context.getImageData(pos.x, pos.y, 1, 1).data;
|
||||||
return !!(obj && obj.pixel[3] > 0);
|
return p[3] > 0;
|
||||||
},
|
},
|
||||||
__draw: function(canvas) {
|
__draw: function(canvas) {
|
||||||
if(this.attrs.drawFunc) {
|
if(this.attrs.drawFunc) {
|
||||||
|
@@ -369,8 +369,6 @@ Kinetic.Stage.prototype = {
|
|||||||
if(p[3] === 255) {
|
if(p[3] === 255) {
|
||||||
var colorKey = Kinetic.Type._rgbToHex(p[0], p[1], p[2]);
|
var colorKey = Kinetic.Type._rgbToHex(p[0], p[1], p[2]);
|
||||||
shape = Kinetic.Global.shapes[colorKey];
|
shape = Kinetic.Global.shapes[colorKey];
|
||||||
var isDragging = Kinetic.Global.drag.moving;
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
shape: shape,
|
shape: shape,
|
||||||
pixel: p
|
pixel: p
|
||||||
|
@@ -13,6 +13,10 @@
|
|||||||
window.onload = function() {
|
window.onload = function() {
|
||||||
var test = new Test();
|
var test = new Test();
|
||||||
test.run();
|
test.run();
|
||||||
|
|
||||||
|
document.getElementsByTagName('body')[0].addEventListener('mousemove', function(evt) {
|
||||||
|
console.log(evt.clientX + ',' + evt.clientY);
|
||||||
|
}, false);
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
|
@@ -387,8 +387,6 @@ Test.prototype.tests = {
|
|||||||
});
|
});
|
||||||
var layer = new Kinetic.Layer();
|
var layer = new Kinetic.Layer();
|
||||||
|
|
||||||
var group = new Kinetic.Group();
|
|
||||||
|
|
||||||
var redCircle = new Kinetic.Circle({
|
var redCircle = new Kinetic.Circle({
|
||||||
x: 380,
|
x: 380,
|
||||||
y: stage.getHeight() / 2,
|
y: stage.getHeight() / 2,
|
||||||
@@ -409,53 +407,57 @@ Test.prototype.tests = {
|
|||||||
id: 'greenCircle'
|
id: 'greenCircle'
|
||||||
});
|
});
|
||||||
|
|
||||||
group.add(redCircle);
|
layer.add(redCircle);
|
||||||
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 individual shapes
|
||||||
test(stage.getIntersections(350, 118)[0].getId() === 'redCircle', 'first intersection should be redCircle');
|
test(stage.getIntersections(266, 114).length === 1, '17) getIntersections should return one shape');
|
||||||
test(stage.getIntersections(350, 118)[1].getId() === 'greenCircle', 'second intersection should be greenCircle');
|
test(stage.getIntersections(266, 114)[0].getId() === 'greenCircle', '19) first intersection should be greenCircle');
|
||||||
|
|
||||||
|
test(stage.getIntersections(414, 115).length === 1, '18) getIntersections should return one shape');
|
||||||
|
test(stage.getIntersections(414, 115)[0].getId() === 'redCircle', '20) first intersection should be redCircle');
|
||||||
|
|
||||||
|
test(stage.getIntersections(350, 118).length === 2, '1) getIntersections should return two shapes');
|
||||||
|
test(stage.getIntersections(350, 118)[0].getId() === 'redCircle', '2) first intersection should be redCircle');
|
||||||
|
test(stage.getIntersections(350, 118)[1].getId() === 'greenCircle', '3) 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, '4) 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', '5) 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, '6) 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', '7) 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', '8) 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, '9) 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', '10) 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, '11) 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', '12) 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', '13) 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, '14) 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', '15) 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', '16) 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) {
|
'STAGE - scale stage after add layer': function(containerId) {
|
||||||
var stage = new Kinetic.Stage({
|
var stage = new Kinetic.Stage({
|
||||||
|
Reference in New Issue
Block a user