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

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

非常感谢您的帮助。

EDIT:
我最终使用了 Canvas，但我认为 SVG 也能满足我需要做的事情。

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

直接点位置检查

要确定一个点是否在菱形内部，您必须检查它与菱形中点的偏差。您必须将 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/

仿射变换

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

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

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

然后翻译向量将菱形的顶点移动到零坐标将是：

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)];

那么你将需要一个旋转矩阵:

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 轴上对齐。但你现在拥有的是一个空中飞人，你现在需要一个水平剪切变换使菱形的另一边与 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]];

与这个矩阵相乘后，你现在有了一个矩形。现在你只需要一个缩放矩阵确保角点的 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 in (1..2)范围和 Y 中0..1范围意味着正确的菱形。等等。

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

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