mirror of
https://github.com/konvajs/konva.git
synced 2025-06-28 00:36:20 +08:00
new setDetectionType() and getDetectionType() methods to enable path and pixel detection swapping
This commit is contained in:
parent
860025263b
commit
47b8a8e0d6
13
dist/kinetic-core.js
vendored
13
dist/kinetic-core.js
vendored
@ -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
|
||||||
*/
|
*/
|
||||||
|
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
13
src/Node.js
13
src/Node.js
@ -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
|
||||||
*/
|
*/
|
||||||
|
@ -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();
|
||||||
|
|
||||||
},
|
},
|
||||||
|
@ -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,
|
||||||
|
Loading…
Reference in New Issue
Block a user