Question

我使用了图像地图（形状圆圈）。我想绘制图像地图区域（如可见的圆圈或图标来识别它们）。

有没有解决方案？

到目前为止，我已经使用画布作为图像上的叠加层并在其上绘制。

有效

但问题是图像在div（容器）中，我在其上应用了溢出隐藏属性，这样当它放大或缩小时，它会保留在容器中，而其他部分则隐藏。

但是使用画布我无法实现它。当我用position:absolute溢出隐藏属性应用画布时不起作用。当我应用带有position:relative溢出隐藏工作的画布但下面的图像已经消失（未显示）。

＆＃13;

function drawCir(coOrdStr) {
    var mCoords = coOrdStr.split(',');
    var x, y, r;
    x = mCoords[0];
    y = mCoords[1];
    r = mCoords[2];
    hdc.beginPath();
    hdc.arc(x, y, r, 0, 2 * Math.PI);
    hdc.fill();
    hdc.stroke();
}


function myInit() {
    // get the target image
    var img = byId('mape');

    var x, y, w, h;

    // get it's position and width+height
    x = img.offsetLeft;
    y = img.offsetTop;
    w = img.clientWidth;
    h = img.clientHeight;

    // move the canvas, so it's contained by the same parent as the image
    var imgParent = img.parentNode;
    var can = byId('myCanvas');
    // imgParent.appendChild(can);

    // place the canvas in front of the image
    can.style.zIndex = 1;

    // position it over the image
    can.style.left = x + 'px';
    can.style.top = y + 'px';

    // make same size as the image
    can.setAttribute('width', w + 'px');
    can.setAttribute('height', h + 'px');

    // get it's context
    hdc = can.getContext('2d');

    // set the 'default' values for the colour/width of fill/stroke operations
    hdc.fillStyle = 'red';
    hdc.strokeStyle = 'red';
    hdc.lineWidth = 2;

    $("area").each(function() {

        var coordStr = $(this).attr('coords');
        drawCir(coordStr);
    });


}

＆＃13;

#myCanvas
{
    pointer-events: none;       /* make the canvas transparent to the mouse - needed since canvas is position infront of image */
    position:absolute;

}

#con{
overflow: hidden;
height: 600px;
width: 100%;
}
#img{
width:100%;
height:100%;
position:relative;

}

＆＃13;

<div id="con">
                    <canvas id="myCanvas"></canvas>
                    <img src="images/img.png" alt="" id="img" usemap="#img_map">
                    <map name="img_map"><area shape=circle>......</map>
       </div>
               //fucntion to draw  called in body tag

＆＃13;

Answer 1

在你的convas中添加一个z-index：

function drawCir(coOrdStr) {
    var mCoords = coOrdStr.split(',');
    var x, y, r;
    x = mCoords[0];
    y = mCoords[1];
    r = mCoords[2];
    hdc.beginPath();
    hdc.arc(x, y, r, 0, 2 * Math.PI);
    hdc.fill();
    hdc.stroke();
}


function myInit() {
    // get the target image
    var img = byId('mape');

    var x, y, w, h;

    // get it's position and width+height
    x = img.offsetLeft;
    y = img.offsetTop;
    w = img.clientWidth;
    h = img.clientHeight;

    // move the canvas, so it's contained by the same parent as the image
    var imgParent = img.parentNode;
    var can = byId('myCanvas');
    // imgParent.appendChild(can);

    // place the canvas in front of the image
    can.style.zIndex = 1;

    // position it over the image
    can.style.left = x + 'px';
    can.style.top = y + 'px';

    // make same size as the image
    can.setAttribute('width', w + 'px');
    can.setAttribute('height', h + 'px');

    // get it's context
    hdc = can.getContext('2d');

    // set the 'default' values for the colour/width of fill/stroke operations
    hdc.fillStyle = 'red';
    hdc.strokeStyle = 'red';
    hdc.lineWidth = 2;

    $("area").each(function() {

        var coordStr = $(this).attr('coords');
        drawCir(coordStr);
    });


}

#myCanvas
{
    pointer-events: none;       /* make the canvas transparent to the mouse - needed since canvas is position infront of image */
    position:absolute;
    z-index: 2;
}

#con{
overflow: hidden;
height: 600px;
width: 100%;
}
#img{
width:100%;
height:100%;
position:relative;

}

<div id="con">
                    <canvas id="myCanvas"></canvas>
                    <img src="images/img.png" alt="" id="img" usemap="#img_map">
                    <map name="img_map"><area shape=circle>......</map>
       </div>
               //fucntion to draw  called in body tag

图像地图和画布

1 个答案: