图像映射和画布

Question

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

有什么解决办法吗？

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

成功了

但问题是图像在 div(container) 中，我在其上应用了溢出隐藏属性，因此当它放大或缩小时，它会留在容器中，而其他部分隐藏。

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

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;

}

#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

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