1

在潜伏了很长时间之后，这是我在这里的第一篇文章！我一直在 RTFMing 并到处寻找这个问题的答案，但无济于事。我会尽量提供信息，希望你能帮助我。

此代码适用于我的个人网页。我正在尝试使用 HTML5 和 jQuery 实现某种现代点击地图。在该网站中，您会看到主图像和一个隐藏的画布，其大小相同，坐标相同，其中绘制了这张图片。

当鼠标悬停在主图片上时，它会从绘制到画布上的图像中读取鼠标像素数据（r、g、b、alpha 的数组）。当它看到像素颜色为黑色时（在我的情况下，我只检查 RED 值，在黑色像素中为 0）它知道激活相关按钮。

（最初，我是从这篇文章中得到的想法）

我选择这种方法的原因是为了让页面能够响应并动态更改以适应不同的显示器和移动设备。为此，我在每次调整屏幕大小时调用 DrawCanvas 函数，以使用新尺寸重新绘制画布。

通常，这可以正常工作。问题是，Chrome 和 IE(9) 中似乎存在不一致的行为。当我最初打开页面时，有时我没有得到像素数据 (0,0,0,0)，直到我重新调整浏览器的大小。起初我认为有一些加载问题导致这种情况发生，所以我尝试用 setTimeout 破解它，它仍然无法正常工作。我还尝试触发 re-size 事件并在 document.ready 处调用 drawCanvas 函数，仍然没有工作。

最困扰我的是不一致之处。有时有效，有时无效。通常，它在 chrome 中比在 IE(9) 中更稳定。

这是已弃用的代码：

<script type="text/javascript">

    $(document).ready(function(){setTimeout(function() {

        // Get main image object    
        var mapWrapper = document.getElementById('map_wrapper').getElementsByTagName('img').item(0);

        // Create a hidden canvas the same size as the main image and append it to main div
        var canvas = document.createElement('canvas');
        canvas.height = mapWrapper.clientHeight;
        canvas.width = mapWrapper.clientWidth;
        canvas.fillStyle = 'rgb(255,255,255)';
        canvas.style.display = 'none';
        canvas.id = 'hiddencvs';
        $('#map_wrapper').append(canvas);

        // Draw the buttons image into the canvas
        drawCanvas(null);

        $("#map_wrapper").mousemove(function(e){

            var canvas = document.getElementById('hiddencvs');
            var context = canvas.getContext('2d');

            var pos = findPos(this);
            var x = e.pageX - pos.x;
            var y = e.pageY - pos.y;

            // Get pixel information array (red, green, blue, alpha)
            var pixel = context.getImageData(x,y,1,1).data; 

            var red = pixel[0];
            var main_img = document.getElementById('map_wrapper').getElementsByTagName('img').item(0);

            if (red == 0)
            {
                ...
            }

            else {
                ...
            }   
        });     

    },3000);}); // End DOM Ready

    function drawCanvas(e)
    {
        // Get context of hidden convas and set size according to main image            
        var cvs = document.getElementById('hiddencvs');
        var ctx = cvs.getContext('2d');
        var mapWrapper = document.getElementById('map_wrapper').getElementsByTagName('img').item(0);
        cvs.width = mapWrapper.clientWidth;
        cvs.height = mapWrapper.clientHeight;


        // Create img element for buttons image
        var img = document.createElement("img");
        img.src = "img/main-page-buttons.png";

        // Draw buttons image inside hidden canvas, strech it to canvas size    
        ctx.drawImage(img, 0, 0,cvs.width,cvs.height);
    }

    $(window).resize(function(e){
            drawCanvas(e);  
        }
    );

    function findPos(obj)
    {
        ...
    }

</script>

我会很感激任何帮助！谢谢！

罗恩。

4

1 回答 1

0

您无需等待加载图像，因此，根据缓存，您可以在画布中绘制或不在画布中绘制图像。

你应该做这个 ：

$(function(){
    var img = document.createElement("img");
    img.onload = function() {
        var mapWrapper = document.getElementById('map_wrapper').getElementsByTagName('img').item(0);
        ...
        // your whole code here !
        ...
    }
    img.src = "img/main-page-buttons.png";
});
于 2013-07-30T06:49:33.373 回答