Javascript 画布-将png图像粘贴在一起而不考虑透明像素

我在photoshop中有一个很大的水平条形图，它由许多较小的元素组成。背景是透明的，条纹从较小的元素（左）到较大的元素（右）。我的目标是使这个条带与鼠标事件交互

每个元素都是某种多边形图像，经过左右修剪，然后导出为png。然后将其导入画布

问题是我可以将它们并排放置，但由于它们不是矩形，我需要一种方法来计算每个元素每侧的透明像素构成的偏移量，以使它们正确地粘在一起。。。我正在使用KineticJs为每个元素获得精确的命中区域。。。所以也许有一种方法可以用kineticjs自动完成，或者有一种操作可以使用每个图像数据来完成

我的问题说明：

有什么想法吗

---

我之所以这么做，也是因为我更喜欢在每个项目上精确的鼠标移动边界框（而不是一个简单的矩形），并且宁愿避免手动计算每个偏移量的解决方案。。。但也许这不值得

好的，您有一个自定义形状要使用，这里有一个教程：，您可以做的最简单的事情，甚至看起来相当长，就是计算该形状的边界线。（两条略为垂直的线和两条略为水平的线）。然后测试形状一的右垂直线是否与形状二的左垂直线相交，如果相交，则将图像的坐标设置为相同的坐标

更新：这是一个非常粗略的解决问题的工作方式。下一步是根据每个图像进行更多微调

---

如果需要精确的区域，请使用。通过一些巧妙的欺骗和一张空白的gif图像，你应该能够在你悬停在图像地图的任何特定区域时得到你想要的背景（可能需要javascript）

---

我能想到的另一个选择是使用SVG本身或现有的许多库之一在页面中构建交互式矢量图形。

您还可以编写一个函数，通过查看图像数据中的所有像素来计算最左边、最上面、最右边和最下面的像素。以下是关于这方面的教程：

---

所以图像是疯狂的形状，或者像您的插图一样倾斜？请看，kineticjs无法实现您想要的内置功能，因为所有图像都是矩形，您必须根据图像自己进行计算。如果您已经完成了计算，那么您可以对逻辑进行编码。@mattdlockyer:没有疯狂的形状，只有至少两个点（每边一个）与边界接触。@EliteOctagon:我的问题是计算/逻辑是什么？=）但也许这只是一种过激的行为。。。而且我真的不擅长计算！！如果您可以将一个JSFIDLE与一些非矩形的临时图像（画布将它们视为矩形）组合在一起，我可能可以为您提供更多帮助。谢谢！但它似乎变得有点复杂（即使它确实是正确的方式！）。。。如果我理解得很好，我需要解析每个图像数据（形状是位图），然后得到至少每个边线（右和左）的数学表示，然后进行数学运算并重新定位每个元素？这将是一个很大的计算…我也试着把一个，但正如你所看到的，我不太擅长编程，有一个问题，与hitareas。。可能是因为图像不在同一个域上（位图数据处理的画布限制？）或者它只是我=）的问题，再次感谢！我喜欢小提琴，但它不适用于kineticjs 4.3.1，即使如此，请查看我上面更新的答案。你的小提琴工作得很好，但它仍然没有考虑到透明像素。。。而且，由于无法操作画布位图数据（它会抛出一个安全通知），因此我们可能无法使用JSFIDLE。最后，我想我会用一种更简单的方法，放下画布，使用方形的hitbox或图像贴图，如下所述。非常感谢你的时间和智慧！！另外，我刚刚修改了你的小提琴，以明确我们可以移动不同的元素，因为我第一次没有注意到它！是的，也许如果我能用图像编辑器自动生成图像地图，那将是最好的。。。否则，我将继续使用方形复选框..谢谢，但问题是，如果你看我上面图片中的第二个块，我需要知道这个块的“左上”像素是什么。。。但它既不是最上面的像素，也不是最左边的像素。。。那么我怎么知道它在图像数据数组中是哪个像素呢。。。或者我遗漏了什么？当我考虑它时，也许我可以保存前一个块的最上面和最下面像素的坐标，以获得当前块中这些坐标处的第一个非零alpha像素。。。我想这肯定是一个很好的近似值，因为我的积木正在以v形的方式“生长”。。。还有别的办法吗？

line1 = ax + b ..... line2 = cx+d //see possible tests
if(...intersection test...){  // or just test if some coordinate is left of some other coordinate
    shape2.setX(shape1.getX()+shape1.getWidth()); //account for image width, so they don't overlap
    shape2.setY(shape1.getY()) // no need to account for height
}