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

made isPointInShape() a public method for the purpose of collision detection

Browse Source
This commit is contained in:
Eric Rowell 2012-04-15 09:18:30 -07:00
parent c698005adc
commit 78e4022126
5 changed files with 92 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
dist/kinetic-core.js vendored
View File

@ -3,7 +3,7 @@
* http://www.kineticjs.com/
* Copyright 2012, Eric Rowell
* Licensed under the MIT or GPL Version 2 licenses.
* Date: Apr 14 2012
* Date: Apr 15 2012
*
* Copyright (C) 2011 - 2012 by Eric Rowell
*
@ -1492,7 +1492,7 @@ Kinetic.Stage.prototype = {
this.targetFound = true;
}
if(shape.attrs.visible && pos !== undefined && shape._isPointInShape(pos)) {
if(shape.attrs.visible && pos !== undefined && shape.isPointInShape(pos)) {
// handle onmousedown
if(!isDragging && this.mouseDown) {
this.mouseDown = false;
@ -2288,6 +2288,27 @@ Kinetic.Shape.prototype = {
clearData: function() {
this.data = [];
},
/**
* custom isPointInPath method which can use path detection
* or pixel detection
*/
isPointInShape: function(pos) {
var stage = this.getStage();
if(this.attrs.detectionType === 'path') {
var pathLayer = stage.pathLayer;
var pathLayerContext = pathLayer.getContext();
this._draw(pathLayer);
return pathLayerContext.isPointInPath(pos.x, pos.y);
}
else {
var w = stage.attrs.width;
var alpha = this.data[((w * pos.y) + pos.x) * 4 + 3];
return (alpha !== undefined && alpha !== 0);
}
},
/**
* draw shape
* @param {Layer} layer Layer that the shape will be drawn on
@ -2327,27 +2348,6 @@ Kinetic.Shape.prototype = {
this.drawFunc.call(this);
context.restore();
}
},
/**
* custom isPointInPath method which can use path detection
* or pixel detection
*/
_isPointInShape: function(pos) {
var stage = this.getStage();
if(this.attrs.detectionType === 'path') {
var pathLayer = stage.pathLayer;
var pathLayerContext = pathLayer.getContext();
this._draw(pathLayer);
return pathLayerContext.isPointInPath(pos.x, pos.y);
}
else {
var w = stage.attrs.width;
var alpha = this.data[((w * pos.y) + pos.x) * 4 + 3];
return (alpha !== undefined && alpha !== 0);
}
}
};
// extend Node

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

File diff suppressed because one or more lines are too long

42
src/Shape.js
View File

@ -173,6 +173,27 @@ Kinetic.Shape.prototype = {
clearData: function() {
this.data = [];
},
/**
* custom isPointInPath method which can use path detection
* or pixel detection
*/
isPointInShape: function(pos) {
var stage = this.getStage();
if(this.attrs.detectionType === 'path') {
var pathLayer = stage.pathLayer;
var pathLayerContext = pathLayer.getContext();
this._draw(pathLayer);
return pathLayerContext.isPointInPath(pos.x, pos.y);
}
else {
var w = stage.attrs.width;
var alpha = this.data[((w * pos.y) + pos.x) * 4 + 3];
return (alpha !== undefined && alpha !== 0);
}
},
/**
* draw shape
* @param {Layer} layer Layer that the shape will be drawn on
@ -212,27 +233,6 @@ Kinetic.Shape.prototype = {
this.drawFunc.call(this);
context.restore();
}
},
/**
* custom isPointInPath method which can use path detection
* or pixel detection
*/
_isPointInShape: function(pos) {
var stage = this.getStage();
if(this.attrs.detectionType === 'path') {
var pathLayer = stage.pathLayer;
var pathLayerContext = pathLayer.getContext();
this._draw(pathLayer);
return pathLayerContext.isPointInPath(pos.x, pos.y);
}
else {
var w = stage.attrs.width;
var alpha = this.data[((w * pos.y) + pos.x) * 4 + 3];
return (alpha !== undefined && alpha !== 0);
}
}
};
// extend Node

2
src/Stage.js
View File

@ -364,7 +364,7 @@ Kinetic.Stage.prototype = {
this.targetFound = true;
}
if(shape.attrs.visible && pos !== undefined && shape._isPointInShape(pos)) {
if(shape.attrs.visible && pos !== undefined && shape.isPointInShape(pos)) {
// handle onmousedown
if(!isDragging && this.mouseDown) {
this.mouseDown = false;

45
tests/js/unitTests.js
View File

@ -1281,6 +1281,51 @@ Test.prototype.tests = {
star.setDetectionType('pixel');
test(star.getDetectionType() === 'pixel', 'detection type should be pixel');
},
'SHAPES - test isPointInPath()': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,
y: 100,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
layer.add(rect);
stage.add(layer);
test(rect.isPointInShape({
x: 200,
y: 100
}) === true, 'problem with point in shape');
test(rect.isPointInShape({
x: 199,
y: 99
}) === false, 'problem with point in shape');
test(rect.isPointInShape({
x: 250,
y: 125
}) === true, 'problem with point in shape');
test(rect.isPointInShape({
x: 300,
y: 150
}) === true, 'problem with point in shape');
test(rect.isPointInShape({
x: 301,
y: 151
}) === false, 'problem with point in shape');
},
'Text - add text': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,