什麼是最好的方式來繪製HTML中的圖像的東西？

我有一個PNG，這是一個市場計劃。這個想法是讓計劃中的每個點都可點擊。我計劃使用area標籤來實現此目標。我還想向用戶展示不可用的斑點是紅色的還是用十字或其他東西標記的。所以我想在圖片上畫一些東西來表明這一點。現在我想知道實現這個目標的最好方法是什麼。有人對此有個好主意嗎？什麼是最好的方式來繪製HTML中的圖像的東西？

來源

2014-02-23 Martijn

想必你將擁有所有空間的座標在你的市場。

下面是如何使用這些座標加畫布標記爲紅色的未使用空間：

尺寸屏幕外的畫布佈局規劃圖像的大小
畫在畫布上
使用的佈局規劃用半透明紅色（或其他顏色）填充畫布的不可用座標
將屏幕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>

來源

2014-02-23 18:45:01 markE

哇，謝謝你的擴展帖子，真的很感激！ – Martijn

你可以使用一種叫做a map的東西，並將其絕對定位在你的圖像上。

或者，你可以使用一種叫做canvas tag in html5這就需要JavaScript的，雖然這是很難用它更加有用和穩定

來源

2014-02-23 12:20:18 andrew196

感謝您的評論，但我不知道怎樣才能在圖像繪製的圖像？ – Martijn

帆布將definatley工作，而這樣做http://www.w3schools.com/html/html5_canvas.asp這是一個相當新的東西，現在看起來更在你的文章這看起來更適合 – andrew196

嗨user3329290 - 我希望你不要請記住我編輯了你的帖子以包含關於畫布標籤的鏈接。我還換了維基百科的w3schools鏈接。請參閱http://www.w3fools.com/ –

恕我直言，你應該通過創建與其他圖像的斑點，將它們放置做到這一點那個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>

來源

2014-02-23 12:25:52 Hardy

什麼是最好的方式來繪製HTML中的圖像的東西？

回答

相關問題