Canvas

Question

在 2D 游戏中，我需要确定对象是在对角线上方还是下方。

有人知道怎么做吗？

（我使用createJS框架）

Answer 1

使用上面的坐标创建一个三角形来创建一个形状。例如，如果您的行看起来像：

如果使用 x2 和 y1，您可以创建一个形状：

现在只需将三角形添加到路径并执行 isPointInPath(x, y)，如果为真，则在上方，如果为假，则在下方。

如果你需要检查下面相反的过程。

（哇！那里有很多箭头......但你会明白的:)）

边缘情况（双关语意）：如果点非常靠近其中一端 -> 只需延长线，或使多边形延伸 (x1,y1) 到区域的边缘。

其实想想：三角形可能不太合适，不如用canvas的上边作为一段多边形，那么下一段就是垂线向下一直到对角线，从对角线开始到 canvas 左上角的最后一段。我只是懒得重做图形，但你明白了..

Answer 2

好的，放弃我之前的答案，改用线交点。从该点射出一条线以直线向上进行测试。如果有交点，则点在下方，如果 none，则点在线的上方或侧面。

为避免出现副作用（没有双关语），请使用插值法扩展原始行。

这是一个函数。要对原始线进行线性插值，只需使用一些极值：

var tx1 = x1 + (x2-x1) * -51000;
var ty1 = y1 + (y2-y1) * -51000;

var tx2 = x1 + (x2-x1) * 53200;
var ty2 = y1 + (y2-y1) * 53200;

更新今天早上我有点匆忙所以这里有一个小更新。正如 blindman67 指出的那样，您可以只使用链接交集函数中的 d 并检查 s/t 是否在归一化范围内（或者只使用叉积 - 请参阅他的回答它更合适）。

Answer 3

使用点和线的叉积。

您需要将整个坐标系移动到直线的起点，然后得到直线与点的叉积。如果结果为负则该点在线的左侧，如果为正则该点在线的右侧，如果为零则该点在线上。

// the point
var px = 100;
var py = 100;

// the line
var lx1 = 20;
var ly1 = 20;
var lx2 = 320;
var ly2 = 120;

// move line end and point so that line start is at 0,0
lx2 -= lx1;
ly2 -= ly1;
px -= lx1;
py -= ly1;

// get cross product
var cross = lx2 * py - ly2 * px;
if(cross < 0){ // point is to the left (anticlockwise)
}else if(cross > 0){ // point is to the right (clockwise)
}else{  // cross must be zero then point is on the line    
}

Canvas - 如何判断一个点是在对角线上方还是下方？

Canvas - How to find if a point is above or under a diagonale line?

javascript

createjs