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) {
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
*/

File diff suppressed because one or more lines are too long

View File

@ -289,6 +289,19 @@ Kinetic.Node.prototype = {
setY: function(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
*/

View File

@ -690,48 +690,44 @@ Test.prototype.tests = {
imageObj.src = '../lion.png';
},
'EVENTS - star pixel detection': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
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
});
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('mouseover', function() {
log('mouseover');
});
star.on('mouseout', function() {
log('mouseout');
});
star.on('mouseout', function() {
log('mouseout');
});
star.on('dragend', function() {
this.saveData();
});
star.on('dragend', function() {
this.saveData();
});
layer.add(star);
stage.add(layer);
layer.add(star);
stage.add(layer);
star.saveData();
};
imageObj.src = '../lion.png';
star.saveData();
},
'EVENTS - drag events click': function(containerId) {
var stage = new Kinetic.Stage({
@ -1698,20 +1694,19 @@ Test.prototype.tests = {
y: 1
},
centerOffset: {
x: 50,
y: 25
x: 50,
y: 25
}
});
group.add(rect);
layer.add(group);
stage.add(layer);
stage.onFrame(function() {
rect.rotate(0.01);
layer.draw();
});
stage.onFrame(function() {
rect.rotate(0.01);
layer.draw();
});
//stage.start();
},
@ -1743,9 +1738,9 @@ Test.prototype.tests = {
group.add(rect);
layer.add(group);
stage.add(layer);
stage.hide();
stage.draw();
},
'STAGE - hide layer': function(containerId) {
@ -1776,9 +1771,9 @@ Test.prototype.tests = {
group.add(rect);
layer.add(group);
stage.add(layer);
layer.hide();
stage.draw();
},
'STAGE - hide group': function(containerId) {
@ -1809,9 +1804,9 @@ Test.prototype.tests = {
group.add(rect);
layer.add(group);
stage.add(layer);
group.hide();
stage.draw();
},
'STAGE - save image as png (click on circle to open new window)': function(containerId) {

View File

@ -1234,6 +1234,53 @@ Test.prototype.tests = {
layer.add(rect);
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) {
var stage = new Kinetic.Stage({
container: containerId,
@ -1494,7 +1541,6 @@ Test.prototype.tests = {
id: 'rectId'
});
layer.add(group);
group.add(rect);
stage.add(layer);
@ -1542,8 +1588,7 @@ Test.prototype.tests = {
id: 'rectId'
});
layer.add(group);
layer.add(group);
stage.add(layer);
group.add(rect);
@ -1589,7 +1634,7 @@ Test.prototype.tests = {
name: 'rectName',
id: 'rectId'
});
stage.add(layer);
layer.add(group);
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('#layerId')[0].attrs.id === 'layerId', 'problem with layer id selector');
},
'NODE - test drag and drop properties and methods': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,