math - 钻石上的像素坐标

Question

我得到了一张图像，其中有几颗钻石并排放置，如下图所示

我知道图像上的唯一坐标是顶角(绿色文本)。
当我点击图像时，我得到了该点的坐标，但我无法得到我所在的钻石。
例如我点击红点，我怎么知道 x:260, y:179 = 顶部菱形？
蓝色属于左边？等等...

非常感谢您的帮助。

编辑:
我最终使用了 Canvas，但我认为 SVG 也能满足我的需要。

Answer 1

我看到两种可能的方法:直接检查点是否在菱形内部并使用仿射变换。我将描述两者。

直接点位置检查

要确定一个点是否在菱形内部，您必须检查它与菱形中点的偏差。您必须将 X 和 Y 偏差与钻石的 X 和 Y 范围成比例，您将得到两个因子。对于菱形内的所有点，这些因子的模值之和小于或等于 1。在代码中，如下所示:

var dx = Math.abs(coords[0] - middle[0]);
var dy = Math.abs(coords[1] - middle[1]);
if (dx / size[0] + dy / size[1] <= 1)
  alert("Inside diamond");
else
  alert("Outside diamond");

因此，您现在要做的就是确定每个菱形的中点(在所有情况下大小都相同)并检查您要测试的点是否位于它们内部。

工作示例:http://jsfiddle.net/z98hr/

仿射变换

使用affine transformations您可以将顶部菱形的角坐标更改为 (0,0)、(1,0)、(0,1) 和 (1,1)。如果您随后对需要测试的点应用相同的转换，那么确定它属于哪颗钻石就变得微不足道。

首先，您需要一个平移向量将 (225,2) 点移动到坐标原点。假设您有四个坐标来确定顶部菱形(左右坐标、顶部和底部坐标):

var topDiamond = [[113, 2], [337, 227]];

然后是translation vector将菱形的顶点移动到零坐标将是:

var translationVector = [-(topDiamond[0][0] + topDiamond[1][0]) / 2,
                         -topDiamond[0][1]];

您可以将其应用到原始坐标，如下所示:

function add(vector1, vector2)
{
  return [vector1[0] + vector2[0], vector1[1] + vector2[1]];
}
topDiamond = [add(topDiamond[0], translationVector),
              add(topDiamond[1], translationVector)];

那么你将需要一个rotation matrix :

var angle = -Math.atan2(topDiamond[1][1] - topDiamond[0][1],
                        topDiamond[1][0] - topDiamond[0][0]);
var rotMatrix = [[Math.cos(angle), -Math.sin(angle)],
                 [Math.sin(angle), Math.cos(angle)]];

与该矩阵相乘后，点 (225,2) 和 (337,114.5) 在 X 轴上对齐。但你现在拥有的是一个空中飞人，你现在需要一个horizontal shear transformation让菱形的另一边与 Y 轴对齐:

function multiply(matrix, vector)
{
  return [matrix[0][0] * vector[0] + matrix[0][1] * vector[1],
          matrix[1][0] * vector[0] + matrix[1][1] * vector[1]];
}
var point = [topDiamond[0][0], (topDiamond[0][1] + topDiamond[1][1]) / 2];
point = multiply(rotMatrix, point);
var shearMatrix = [[1, -point[0] / point[1]], [0, 1]];

与该矩阵相乘后，您现在得到了一个矩形。现在你只需要一个scaling matrix确保角点的 X 和 Y 坐标值为 0 和 1:

point = multiply(shearMatrix, point);
var point2 = [topDiamond[1][0], (topDiamond[0][1] + topDiamond[1][1]) / 2];
point2 = multiply(rotMatrix, point2);
point2 = multiply(shearMatrix, point2);
var scaleMatrix = [[1/point2[0], 0], [0, 1/point[1]]];

现在你已经完成了，现在你可以将这些转换应用到任何点:

alert(
  multiply(scaleMatrix,
    multiply(shearMatrix,
      multiply(rotMatrix,
        add(translationVector, [260, 179])
      )
    )
  )
);

这将为您提供 0.94,0.63 - 两个值都在 (0..1) 范围内，这意味着它是顶部菱形。使用 [420,230] 作为输入，您将得到 1.88,0.14 - X 在 (1..2) 范围内，Y 在 0 范围内。 .1 范围表示右菱形。等等。

工作示例:http://jsfiddle.net/FzWHe/

回想起来，对于像钻石这样的简单几何图形来说，这可能是太多的工作。