Canvas - 在不考虑透明像素的情况下将 png 图像粘贴在一起答案

【问题标题】：Canvas - Sticking png images together without taking into account transparent pixelsCanvas - 在不考虑透明像素的情况下将 png 图像粘贴在一起
【发布时间】：2013-01-06 02:23:34
【问题描述】：

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

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

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

我的问题说明：

有什么想法吗？

我这样做只是因为我更喜欢每个项目上的精确 mouseOver 边界框（而不是简单的矩形），并且宁愿避免手动计算每个偏移量的解决方案......但这也许不值得？！

【问题讨论】：

所以图像是疯狂的形状还是像你的插图一样倾斜？
看看jsfiddle.net/8Vdht/3，没有办法用 kineticjs 做你想做的事情，因为所有图像都是矩形，你必须自己根据图像进行计算。如果您完成了计算，那么您可以编写逻辑代码。
@mattdlockyer ：没有疯狂的形状，只有至少两个点（每边一个）接触边界..
@EliteOctagon ：我的问题是计算/逻辑是什么？ =) 但也许这只是矫枉过正......而且我不太擅长计算！

标签： javascript html canvas html5-canvas kineticjs

【解决方案1】：

好的，所以你有一个想要使用的自定义形状，这里有一个教程：http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/，你可以做的最简单的事情，即使看起来相当长，就是计算边界线形状。（两条有点垂直的线和两条有点水平的线）。然后你测试形状一的右垂直线是否与形状二的左垂直线交叉，如果交叉，则将图像的坐标设置为相同的坐标。

http://www.mathopenref.com/coordintersection.html

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
}

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

http://jsfiddle.net/9jkr7/15/

【讨论】：

如果您可以将 jsfiddle 与一些不是矩形的临时图像放在一起（尽管画布会将它们视为矩形），我也许可以为您提供更多帮助。
谢谢！但这似乎有点复杂（即使它肯定是正确的做法！）...如果我理解得很好，我需要解析每个图像数据（形状是位图），然后得到一个数学表示至少每条边线（左右），然后做数学并重新定位每个元素？那将是很多计算...
我也尝试过simple jsfiddle，但正如你所见，我并不擅长编程，hitareas 有问题。也许是图像没有被托管的问题在同一个域上（位图数据操作的画布限制？）或者只是我=）再次感谢！
我喜欢小提琴，但它不适用于 kineticjs 4.3.1，即便如此，请查看我上面的更新答案。
你的小提琴工作得很好，但它仍然没有考虑到透明像素......而且我们可能不会用 jsfiddle 走得更远，因为我们无法操纵画布位图数据（它会引发安全问题注意）。最后，我想我会采用一种更简单的方式，放开画布并使用方形 hitbox 或图像映射，如下所述。 感谢您非常感谢您的时间和脑力！！此外，我刚刚修改了您的小提琴，以明确我们可以移动不同的元素，因为我第一次没有注意到它！ fiddle

【解决方案2】：

如果您想要精确的区域，请使用image map。通过一些巧妙的处理和空白图像 gif，您应该能够在将鼠标悬停在图像映射的任何特定区域上时获得所需的背景（可能需要 javascript）。

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

【讨论】：

是的，也许如果我可以使用最好的图像编辑器自动生成图像地图...否则我会坚持使用方形碰撞框..

【解决方案3】：

您还可以编写一个函数，通过查看图像数据中的所有像素来计算最左侧、最顶部、最右侧和最底部的像素。这是一个教程：

http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-tutorial/

【讨论】：

谢谢，但问题是如果你看我上面图片中的第二个块，我需要知道这个块的“左上角”像素是什么......但它既不是最上面或最左边的像素......那么我怎么知道它在图像数据数组中的哪个像素？ ...还是我错过了什么？
当我想到它时，也许我可以保存前一个块的最顶部和最底部像素的坐标，以获得当前块中这些坐标处的第一个非零 alpha 像素......我认为肯定会是一个很好的近似值，因为我的块正在以 av 形状的方式“增长”......还有其他方法吗？