Question

修改：

1）基本上我想知道是否有办法知道在一个html画布中是否有给定点的图像。

var point = [5, 8]

那个点上有一个图像？有一个命令可以查找吗？

2）画布是十六进制地图，因此图像位于网格中的常规位置。他们不能半途而废。因此，通用point可以返回到图像的插入点，问题就变成了：有一种（快速）方法可以知道在html画布中是否存在具有给定插入点的图像？

3）如果我使用Raphael会有所帮助吗？

4）我有一个有效的解决方案：面对坐标为point的所有图像的（x，y）属性（插入点），但它非常慢。我正在寻找更快的东西。如果您对我的解决方案感兴趣，请阅读以下内容。欢迎对我的解决方案进行评论和改进，但我的问题不同：我正在寻找不同的解决方案，特别是我正在寻找上述问题的答案。

/修改

我有一个十六进制地图，我想在exe坐标下找到哪些图像在exe中。

我的代码正在运行，但我希望能提高效率。

准确地说，当我点击一个exe时，我想知道在六个边框中是否有特定的图像。阅读代码中的注释

我的javascript：

var paper_map = Raphael(canvas_map, '100%', '100%');

var Image = paper_map.image(path_image, x-16, y-14, width, high);
[...]

var border_list=find_border_list(col, row)
//find_border_list function gives a list of coordinates for the 6 border exes [[c1, r1], ... [c6, r6]]
var my_exe_list=[];
for (var i=0; i<border_list.length; i++ ) {
    var coord = number_to_coord(border_list[i][0], border_list[i][1]); 
    //number_to_coord function transforms coordinates (column, row) in (x,y)
    var x = coord[0]-16; //I find the coordinates of the 'corner' of the exe
    var y = coord[1]-14;
    //each image is drawed starting from a 'corner' of an exe
    var child_list=canvas_map.lastElementChild.childNodes;
    //here's my problem: this list is huge because it contains all the images of the canvas!!
    for (var j=2; j<child_list.length; j++){
        if (child_list[j].tagName == 'image') {
            if (child_list[j].attributes.x.value==x && 
                child_list[j].attributes.y.value==y && 
                child_list[j].href.baseVal.slice(child_list[j].href.baseVal.lastIndexOf('/')+1).startsWith('mystring')) {
                    //the first two conditions find all the images on my exe, the third find which I'm interessed in (based on the name)
                    my_exe_list.push(child_list[j])
            };
        };
    };
};

我的html：

<div id='canvas_map' class='canvas can_map' style='position:absolute; left:133px; top:0px;'></div>

console.log(canvas_map) = <div id="canvas_map" class="canvas can_map" style="position: absolute; left: 133px; top: 0px; height: 520px; width: 1371px;">

console.log(child_list) = NodeList [ <desc>, <defs>, <image>, <image>, <image> ... ]

console.log(child_list[j]) = <image x="53" y="56" width="33" height="27" preserveAspectRatio="none" href="/my/path/image_name.png">

所以问题是我在很长的列表中循环了六次（可能是几千张图片）：

var child_list=canvas_map.lastElementChild.childNodes;

只是要知道我用Raphael绘制图像，我可以使用jquery。

按坐标在画布中查找图像

0 个答案: