Question

经过长时间的潜伏，这是我在这里发表的第一篇文章！我一直在RTFMing并搜索到这个问题的答案无济于事。我会尽量提供尽可能丰富的信息，希望你能帮助我。

此代码适用于我的personal webpage。我正在尝试使用HTML5和jQuery实现某种现代点击映射。在网站中，您会看到main image和一个隐藏的画布，其大小相同，并且在其中绘制了this picture的相同坐标。

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

（最初，我从this article）

得到了这个想法

我之所以选择此方法，是为了使页面具有响应能力并动态更改以适应不同的监视器和移动设备。为实现这一目标，我每次重新调整屏幕大小时都会调用DrawCanvas函数，以使用新尺寸重绘画布。

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

困扰我的最多的是不一致。有时它有效，有时则不然。通常，它在铬中比在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>

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

罗恩。

Answer 1

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

你应该这样做：

$(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";
});

jQuery和Canvas加载行为

1 个答案: