我在画布上随机有许多静态方块。这些正方形是否可以检测到其他draggable
图形何时在它们之间碰撞并打印rect
的'name'属性?
这是代码(在JSFiddle中也可用)
var arrowMode = true;
var stage = new Kinetic.Stage({
container: 'container',
height: 400,
width: 800
});
var arrowsLayer = new Kinetic.Layer();
stage.add(arrowsLayer);
$(stage.getContainer()).on('click',function(e){
if(arrowMode){
arrowMode=false;
var x = stage.getMousePosition().x;
var y = stage.getMousePosition().y;
for(var i=0;i<6;i++){
//Rects will be collide for a circle
var rect = new Kinetic.Rect({
name:'rect'+(i+1),
x: i<3? x + (i)*60:x + (i-3)*60,
y: i<3? y : y +60,
width: 50,
height: 50,
fill:'black'
});
arrowsLayer.add(rect);
}
var circle = new Kinetic.Circle({
draggable: true,
stroke: "black",
fill: "#0FF30F",
strokeWidth: 2,
radius: 10,
x:x+400,
y:y+100
});
arrowsLayer.add(circle);
stage.add(arrowsLayer);
}
});
最佳答案
一个非常有趣的问题。
通过使用以下SO问题stand on the shoulders of giants和这个KineticJS - update text layer with new mouse position
现在,我们唯一要做的就是获取正方形的坐标,鼠标的坐标,然后执行简单的switch语句以根据需要输出文本。
代码
为了获得正方形的坐标(软编码),我使用了二维数组:
var poss = new Array(6);
for (var i = 0; i < 6; i++) {
poss[i] = new Array(2);
}
现在,当用户第一次单击画布并生成正方形时,我将其坐标附加到数组中:
for(var i=0;i<6;i++){
var posX = i<3? x + (i)*60:x + (i-3)*60;
var posY = i<3? y : y +60;
poss[i][0] = posX;
poss[i][1] = posY;
var rect = new Kinetic.Rect({
name:'rect'+(i+1),
x: posX,
y: posY,
width: 50,
height: 50,
fill:'black'
});
现在,我需要检测何时拖动绿点,然后启动一个检查碰撞的函数。
要检测绿色点是否被拖动,我使用
dragstart
和dragend
:circle.on('dragstart', function(e){
indrag = true;
});
circle.on('dragend', function(e){
indrag = false;
});
$(stage.getContent()).on('mousemove', function (e) {
if (indrag)
{
checkCollision(e);
}
});
现在,我需要做的就是定义函数
checkCollision(e)
,该函数遍历正方形的所有坐标(保存在数组中)以检查碰撞:function checkCollision(event) {
var pos = stage.getMousePosition();
var mouseX = parseInt(pos.x);
var mouseY = parseInt(pos.y);
$("#coordinates").replaceWith("<div id='coordinates'>X-axis: "+mouseX+"<br />Y-axis: "+mouseY+"</div>");
$("#inSquare").replaceWith("<div id='inSquare'>Nothing is happening</div>");
//check if collision with squares
for (var k = 0; k < 6; k++)
{
if (mouseX >= poss[k][0] && mouseX <= (poss[k][0]+50) && mouseY >= poss[k][1] && mouseY <= (poss[k][1]+50))
{
$("#inSquare").replaceWith("<div id='inSquare'>You have just dragged the green dot in square number " +(k+1)+"</div>");
}
}
}
演示版
您可以找到该实现的有效示例how to use draggable and click separately in kineticjs?。
局限性
注意两个重要的事情:
我使用鼠标坐标检查碰撞。不是圆的宽度。如果要使用圆的宽度,可以使用圆的半径(例如,使用
mouseX
代替(mouseX + widthCircle)
,在某些变量中定义widthCircle
的地方)来实现。我的某些代码是多余的(我两次定义了一些变量)。因此,如果您愿意,您仍然可以缩短我的代码。
我希望能回答您的问题。祝好运!
更新资料
要显示指定的名称属性,我建议保持代码干净,并使用
switch
语句,如下所示:var name;
switch (k)
{
case 0: name = "I'm in the upper left"; break;
case 1: name = "I'm more awesome than the other squares"; break;
case 2: name = "I'm a black square"; break;
case 3: name = "I'm in the bottom left"; break;
case 4: name = "I like coffee"; break;
case 5: name = "Nanos gigantum humeris insidentes"; break;
}
$("#inSquare").replaceWith("<div id='inSquare'>"+name+"</div>");
您可以找到该代码HERE的实现。
关于javascript - 可拖动人物与随机静态人物碰撞,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17893934/