new setDetectionType() and getDetectionType() methods to enable path and pixel detection swapping

This commit is contained in:
Eric Rowell 2012-04-14 21:46:38 -07:00
parent 860025263b
commit 47b8a8e0d6
5 changed files with 121 additions and 56 deletions

13
dist/kinetic-core.js vendored
View File

@ -441,6 +441,19 @@ Kinetic.Node.prototype = {
setY: function(y) { setY: function(y) {
this.attrs.y = y; this.attrs.y = y;
}, },
/**
* set detection type
* @param {String} type can be "path" or "pixel"
*/
setDetectionType: function(type) {
this.attrs.detectionType = type;
},
/**
* get detection type
*/
getDetectionType: function() {
return this.attrs.detectionType;
},
/** /**
* get node position relative to container * get node position relative to container
*/ */

File diff suppressed because one or more lines are too long

View File

@ -289,6 +289,19 @@ Kinetic.Node.prototype = {
setY: function(y) { setY: function(y) {
this.attrs.y = y; this.attrs.y = y;
}, },
/**
* set detection type
* @param {String} type can be "path" or "pixel"
*/
setDetectionType: function(type) {
this.attrs.detectionType = type;
},
/**
* get detection type
*/
getDetectionType: function() {
return this.attrs.detectionType;
},
/** /**
* get node position relative to container * get node position relative to container
*/ */

View File

@ -690,48 +690,44 @@ Test.prototype.tests = {
imageObj.src = '../lion.png'; imageObj.src = '../lion.png';
}, },
'EVENTS - star pixel detection': function(containerId) { 'EVENTS - star pixel detection': function(containerId) {
var imageObj = new Image(); var stage = new Kinetic.Stage({
imageObj.onload = function() { container: containerId,
var stage = new Kinetic.Stage({ width: 578,
container: containerId, height: 200
width: 578, });
height: 200
});
var layer = new Kinetic.Layer({ var layer = new Kinetic.Layer({
rotationDeg: 20 rotationDeg: 20
}); });
var star = new Kinetic.Star({ var star = new Kinetic.Star({
x: 200, x: 200,
y: 100, y: 100,
points: 10, points: 10,
innerRadius: 40, innerRadius: 40,
outerRadius: 70, outerRadius: 70,
fill: 'green', fill: 'green',
stroke: 'blue', stroke: 'blue',
strokeWidth: 20, strokeWidth: 20,
detectionType: 'pixel', detectionType: 'pixel',
draggable: true draggable: true
}); });
star.on('mouseover', function() { star.on('mouseover', function() {
log('mouseover'); log('mouseover');
}); });
star.on('mouseout', function() { star.on('mouseout', function() {
log('mouseout'); log('mouseout');
}); });
star.on('dragend', function() { star.on('dragend', function() {
this.saveData(); this.saveData();
}); });
layer.add(star); layer.add(star);
stage.add(layer); stage.add(layer);
star.saveData(); star.saveData();
};
imageObj.src = '../lion.png';
}, },
'EVENTS - drag events click': function(containerId) { 'EVENTS - drag events click': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
@ -1698,8 +1694,8 @@ Test.prototype.tests = {
y: 1 y: 1
}, },
centerOffset: { centerOffset: {
x: 50, x: 50,
y: 25 y: 25
} }
}); });
@ -1708,10 +1704,9 @@ Test.prototype.tests = {
stage.add(layer); stage.add(layer);
stage.onFrame(function() { stage.onFrame(function() {
rect.rotate(0.01); rect.rotate(0.01);
layer.draw(); layer.draw();
}); });
//stage.start(); //stage.start();
}, },

View File

@ -1234,6 +1234,53 @@ Test.prototype.tests = {
layer.add(rect); layer.add(rect);
stage.add(layer); stage.add(layer);
}, },
'SHAPES - test pixel detection setter and getter': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer({
rotationDeg: 20
});
var star = new Kinetic.Star({
x: 200,
y: 100,
points: 10,
innerRadius: 40,
outerRadius: 70,
fill: 'green',
stroke: 'blue',
strokeWidth: 20,
detectionType: 'pixel',
draggable: true
});
star.on('mouseover', function() {
log('mouseover');
});
star.on('mouseout', function() {
log('mouseout');
});
star.on('dragend', function() {
this.saveData();
});
layer.add(star);
stage.add(layer);
star.saveData();
test(star.getDetectionType() === 'pixel', 'detection type should be pixel');
star.setDetectionType('path');
test(star.getDetectionType() === 'path', 'detection type should be path');
star.setDetectionType('pixel');
test(star.getDetectionType() === 'pixel', 'detection type should be pixel');
},
'Text - add text': function(containerId) { 'Text - add text': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
@ -1494,7 +1541,6 @@ Test.prototype.tests = {
id: 'rectId' id: 'rectId'
}); });
layer.add(group); layer.add(group);
group.add(rect); group.add(rect);
stage.add(layer); stage.add(layer);
@ -1542,7 +1588,6 @@ Test.prototype.tests = {
id: 'rectId' id: 'rectId'
}); });
layer.add(group); layer.add(group);
stage.add(layer); stage.add(layer);
group.add(rect); group.add(rect);
@ -1609,7 +1654,6 @@ Test.prototype.tests = {
test(stage.get('.layerName')[0].attrs.id === 'layerId', 'problem with layer name selector'); test(stage.get('.layerName')[0].attrs.id === 'layerId', 'problem with layer name selector');
test(stage.get('#layerId')[0].attrs.id === 'layerId', 'problem with layer id selector'); test(stage.get('#layerId')[0].attrs.id === 'layerId', 'problem with layer id selector');
}, },
'NODE - test drag and drop properties and methods': function(containerId) { 'NODE - test drag and drop properties and methods': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,