javascript - 如何在 HTML 图像中查找圆圈并注册悬停事件？

Question

我有这张图片/image/HhOkD.jpg我想检测圆形/椭圆形并注册鼠标悬停事件并在其上显示工具提示。我在互联网上搜索过，但没有找到相关内容。

Answer 1

此代码循环遍历图像的每个像素并检测定义的 RGB 颜色(在本例中为绿色，例如“真正的黑色”像素，还有一些未检测到的“较浅”的黑色像素，因为差值设置为 10)。如果你想看到检测到的像素，你可以设置newColor-key。

我希望这对你有帮助，但我想是的。现在，有人还可以添加一个函数来检测区域，而不是每个像素，或者类似的东西。但我认为使用这段代码你可以做你想做的事。

你可以在jsfiddle上找到它:http://jsfiddle.net/b5gnddt4/

$(document).ready(function() {
    var canvas = $('canvas');
    var ctx = canvas[0].getContext( '2d' );

    var img = new Image;
    img.crossOrigin = '';
    img.src = 'http://i.imgur.com/xG8sIPp.jpg';
    img.onload = function() {
        var width = img.width;
        var height = img.height;
        canvas.attr( 'width', width );
        canvas.attr( 'height', height );

        setTimeout( function() {
            ctx.clearRect( 0, 0, width, height );
            ctx.drawImage( img, 0, 0, width, height );
            img.remove();

            canvas.setHover([
                {
                    color: [ 121, 145, 71, 255 ],
                    newColor: [ 255, 0, 0, 255 ],            // you can set this to show the detected area
                    difference: 36,                          // the color/alpha values can have a difference of 36
                    func: function() {                       // this is called on hover of the detected points
                      canvas.css( 'cursor', 'pointer' );
                      console.log( this );
                    }
                },
                {
                    difference: 10,
                    color: [ 0, 0, 0, 255 ],
                    func: function() {
                        console.log( this );
                    }
                }
            ]);
        });
    };
});

$.fn.setHover = function( options ) {
    var canvas = this;
    var ctx = this[0].getContext( '2d' );
    var imgData = ctx.getImageData( 0, 0, this.width(), this.height() );
    var rgbaData = imgData.data;
    var hover = [];

    for( var i = 0; i < rgbaData.length; i += 4 ) {
        $.each( options, function() {
            if( rgbaData[i + 0] - this.difference < this.color[0] && rgbaData[i + 0] + this.difference > this.color[0] &&
                rgbaData[i + 1] - this.difference < this.color[1] && rgbaData[i + 1] + this.difference > this.color[1] &&
                rgbaData[i + 2] - this.difference < this.color[2] && rgbaData[i + 2] + this.difference > this.color[2] &&
                rgbaData[i + 3] - this.difference < this.color[3] && rgbaData[i + 3] + this.difference > this.color[3]
            ) {
                // x-Coord: (i / 4) % canvas.width()
                // y-Coord: Math.floor((i / 4) / canvas.width())
                if( !hover[(i / 4) % canvas.width()] ) hover[(i / 4) % canvas.width()] = [];
                hover[(i / 4) % canvas.width()].push({
                    y: Math.floor((i / 4) / canvas.width()),
                    props: this
                });
                if( this.newColor ) {
                    rgbaData[i] = this.newColor[0];
                    rgbaData[i + 1] = this.newColor[1];
                    rgbaData[i + 2] = this.newColor[2];
                    rgbaData[i + 3] = this.newColor[3];
                }
            }
        });
    }

    imgData.data = rgbaData;
    ctx.putImageData( imgData, 0, 0 );

    canvas.on( 'mousemove', function( event ) {
        if( hover[event.offsetX || event.originalEvent.layerX] ) {
            $.each( hover[event.offsetX || event.originalEvent.layerX], function( i, data ) {
                if( data.y === (event.offsetY || event.originalEvent.layerY) ) {
                    data.props.func();
                    return false;
                } else {
                    noHover();
                }
            });
        } else {
            noHover();
        }
    });

    function noHover() {
      // close Tooltip, or do something else
      canvas.css( 'cursor', '' );
    }
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas></canvas>