Question

我有一个png是一个市场计划。这个想法是让计划中的每个点都可以点击。我计划使用area标记实现此目的。我还想向用户显示不可用的斑点是红色的或用十字架标记的东西。所以我想在图像上画出一些表明这一点的东西。现在我想知道实现这一目标的最佳方法是什么。有人对此有好主意吗？

Answer 1

您可以使用名为a map的内容，并将绝对位置放在图像上方。

或者，你可以使用一个名为canvas tag in html5的东西，它需要javascript，虽然它更难使用它更有用和稳定

Answer 2

恕我直言，你应该通过用其他图像创建这些斑点并将它们放在那个png上来做到这一点。通过这种方式，您可以为这些位置添加悬停效果等。

像：

CSS：

#png1 {
  position: absolute; 
  z-index:1;
}

#spot1 {
  display: block; 
  overflow: hidden; 
  position: absolute; 
  z-index:2; 
  left: 10px; 
  top: 15px;
}

HTML：

<div class="wrapper" style="position: relative">
  <img src="some.png" id="png1" />
  <a href="spot1" id="spot1"><img src="spot-red.png" /></a>
</div>

Answer 3

据推测，您将拥有市场中所有空间的坐标。

以下是如何使用这些坐标和画布来标记红色的不可用空格：

将屏幕外画布调整为平面图图像的大小
在画布上绘制平面图
使用不可用的坐标用半透明红色（或其他颜色）
将屏幕上的img元素的.src设置为画布：img.src = canvas.toDataURL（）;

代码和演示：http://jsfiddle.net/m1erickson/Wj9Sx/

enter image description here

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    // get reference to show(the checkbox) and img(the img)
    $show=$("#show");
    $show.hide();
    $show.change(function(){draw($show[0].checked);});
    $img=$("#plan");

    // create an offscreen canvas
    // used to put 
    var canvas=document.createElement("canvas");
    var ctx=canvas.getContext("2d");

    // set coordinates for unavailable spaces
    var nonAvailable=[]
    nonAvailable.push([
        {x:100,y:27},
        {x:177,y:27},
        {x:138,y:91},
    ]);
    nonAvailable.push([
        {x:215,y:46},
        {x:260,y:92},
        {x:213,y:137},
        {x:168,y:92},
    ]);

    // load the floorplan img
    var img=new Image();
    img.crossOrigin="anonymous";
    img.onload=start;
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/geo.png";

    // resize the canvas to the img size
    // display the img
    function start(){
        canvas.width=img.width;
        canvas.height=img.height;
        $show.show();
        var imgElement=document.getElementById("plan");
        imgElement.src=img.src;
    }

    // display the floorplan
    // optionally fill the unavailable spaces with transparent fill
    function draw(showUnavailable){

        // draw the floorplan
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.drawImage(img,0,0);

        // return if we're not showing unavailables
        if(showUnavailable){

            // set fill to 15% red
            ctx.save();
            ctx.fillStyle="red";
            ctx.globalAlpha=.15;

            // fill any non-available places
            // with semi-transparent red
            for(var i=0;i<nonAvailable.length;i++){
                var pts=nonAvailable[i];
                ctx.beginPath();
                ctx.moveTo(pts[0].x,pts[0].y);
                for(var j=1;j<pts.length;j++){
                    ctx.lineTo(pts[j].x,pts[j].y);
                }
                ctx.closePath();
                ctx.fill();
            }

            // restore the context state
            ctx.restore();
        }

        // draw the modified image back to the img element
        var imgElement=document.getElementById("plan");
        imgElement.src=canvas.toDataURL();

    }


}); // end $(function(){});
</script>
</head>
<body>
    <input type="checkbox" id="show">Indicate non-available spaces.<br>
    <img id="plan" />
</body>
</html>

在HTML中以图像绘制内容的最佳方法是什么？

3 个答案: