javascript - 确定Javascript中黑色和白色像素之间的距离

Question

我计划在这个项目中使用 JavaScript(但我愿意使用其他东西)。我在 javascript 中加载图像，当我在图像上放置一个点时，我想计算从放置的点到第一个黑色或灰色像素的 x 和 y 距离。

所以我将红点放在图像上，然后我想向用户显示从所选点到第一个黑色像素的 x、y 距离。距离可以以像素为单位(我不介意)。这可能吗？有人可以帮我吗？

谢谢!

Answer 1

另一种方法是再次使用 getImageData 函数，正如 @Joseph the Dreamer 所建议的，但您可以执行以下操作而不是按方向搜索:

// the context to the canvas which holds your map
var ctx {...};

var point = {x:x, y:y};
// this gets a 3 by 3 bitmap data from your canvas with the centre being your point
var search = ctx.getImageData(x - 1, y - 1, 3, 3);

var match = false;
while(!match)
{
    // iterate over the search array looking for a black or grey pixel
    // and add the co ordinates of the matches into another array

    // if we found matches in this loop, calculate the shortest length match
    // and then break out of the loop

    // otherwise get a bigger sample data to search through and do this loop again
    // you could optimise this by skipping the pixels you looked through
    // in the previous loop
}