mirror of
https://github.com/konvajs/konva.git
synced 2025-06-27 16:36:58 +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) {
|
||||
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
|
||||
*/
|
||||
|
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) {
|
||||
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
|
||||
*/
|
||||
|
@ -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) {
|
||||
|
@ -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,
|
||||
|
Loading…
Reference in New Issue
Block a user