图像地图和画布 [英] image map and canvas

问题描述

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

有什么解决方案吗？

到目前为止，我已经使用了一个画布作为图像上的覆盖并绘制。

它工作 b
$ b

但问题是image是在div（容器），我已经应用溢出隐藏属性，以便当它放大或缩小时，它保留在容器和其他部分隐藏。 p>

但是用canvas我不能实现它。
当我使用 position：absolute 应用画布溢出隐藏属性没有工作。
，当我使用 position：relative 应用画布溢出隐藏工作，但下面的图像已经走了（未显示）。

  #myCanvas {pointer-events：none; / *使画布对鼠标透明 - 因为画布是图像的位置所以需要* / 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.pngalt =id =imgusemap =＃img_map> < map name =img_map>< area shape = circle> ......< / map> < / div> // fucntion to draw called in body tag  

解决方案

向您的convas添加z索引：

  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（）{//获取目标图像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; //移动画布，因此它包含在与图像相同的父图像var imgParent = img.parentNode; var can = byId（'myCanvas'）; // imgParent.appendChild（can）; //将canvas放在图像前面can.style.zIndex = 1; // position it over the image can.style.left = x +'px'; can.style.top = y +'px'; // make the size as the image can.setAttribute（'width'，w +'px'）; can.setAttribute（'height'，h +'px'）; // get it's context hdc = can.getContext（'2d'）; //为填充/笔触操作的颜色/宽度设置'默认'值hdc.fillStyle ='red'; hdc.strokeStyle ='red'; hdc.lineWidth = 2; $（area）。each（function（）{var coordStr = $（this）.attr（'coords'）; drawCir（coordStr）;}）;}  

  #myCanvas {pointer-events：none; / *使画布对鼠标透明 - 因为画布是位置infront的图像* /位置：绝对; z-index：2;}＃con {overflow：hidden; height：600px; width：100％;}＃img {width：100％; height：100％; position：relative;}  / pre> 
 < div id =con> < canvas id =myCanvas>< / canvas> < img src =images / img.pngalt =id =imgusemap =＃img_map> < map name =img_map>< area shape = circle> ......< / map> < / div> // fucntion to draw called in body tag  
 

I have used an image map (shape circles). I wanted to draw on image map area (like visible circles or icon to identify them).

Is there any solution?

So far I have used a canvas as an overlay over image and draw on it.

It worked

but the problem is image is in div(container) and I have applied overflow hidden property on it so that when it is zoomed in or out it stays in container and other portion hidden.

But with canvas I am not able to achieve it. When I applied canvas with position:absolute overflow hidden property did not work. and when I applied canvas with position:relative overflow hidden worked but image below it was gone(not shown).

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

解决方案

add a z-index to your convas:

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

这篇关于图像地图和画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！