HTML 5:Canvasの複雑なドラッグ&キングJS境界チュートリアル
2627 ワード
制限されたモバイルノードはKineticJSの内部領域をドラッグされ、dragBoundFuncプロパティで定義された境界ノードを交差させることはできません.
製品説明:薄い青色の長方形をドラッグ&ドロップして観察すると、y=50の仮想境界よりも必然的に低くなります.黄色の長方形をドラッグ&ドロップして観察すると、必然的に仮想的な円になります.
製品説明:薄い青色の長方形をドラッグ&ドロップして観察すると、y=50の仮想境界よりも必然的に低くなります.黄色の長方形をドラッグ&ドロップして観察すると、必然的に仮想的な円になります.
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
// bound below y=50
var blueGroup = new Kinetic.Group({
x: 100,
y: 70,
draggable: true,
dragBoundFunc: function(pos) {
var newY = pos.y < 50 ? 50 : pos.y;
return {
x: pos.x,
y: newY
};
}
});
// bound inside a circle
var yellowGroup = new Kinetic.Group({
x: stage.getWidth() / 2,
y: 70,
draggable: true,
dragBoundFunc: function(pos) {
var x = stage.getWidth() / 2;
var y = 70;
var radius = 50;
var scale = radius / Math.sqrt(Math.pow(pos.x - x, 2) + Math.pow(pos.y - y, 2));
if(scale < 1)
return {
y: Math.round((pos.y - y) * scale + y),
x: Math.round((pos.x - x) * scale + x)
};
else
return pos;
}
});
var blueText = new Kinetic.Text({
fontSize: 26,
fontFamily: 'Calibri',
text: 'bound below',
fill: 'black',
padding: 10
});
var blueRect = new Kinetic.Rect({
width: blueText.getWidth(),
height: blueText.getHeight(),
fill: '#aaf',
stroke: 'black',
strokeWidth: 4
});
var yellowText = new Kinetic.Text({
fontSize: 26,
fontFamily: 'Calibri',
text: 'bound in circle',
fill: 'black',
padding: 10
});
var yellowRect = new Kinetic.Rect({
width: yellowText.getWidth(),
height: yellowText.getHeight(),
fill: 'yellow',
stroke: 'black',
strokeWidth: 4
});
blueGroup.add(blueRect).add(blueText);
yellowGroup.add(yellowRect).add(yellowText);
layer.add(blueGroup);
layer.add(yellowGroup);
stage.add(layer);