0

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

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

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

我的问题说明：

我的问题说明了

有任何想法吗？

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

4

3 回答 3

0

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

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

于 2013-01-25T23:36:11.743 回答
0

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

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

于 2013-01-22T23:17:55.510 回答
0

好的，所以你有一个你想要使用的自定义形状，这里有一个教程：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/

于 2013-01-22T21:15:09.773 回答