マウスで画像の地図を描く

こんにちは 最近、HTMLの特定の機能をイメージマップとして扱う機会がありました。 率直に言って、私は頻繁にそれを使用しませんでした。そして、通常、すべてが長方形の形でエリアを回りました。 しかし、そうではありませんでした。 タスクは、国の地図が実行している画像の個々の地域へのリンクを投稿することでしたが、残念ながら、キャンバスやsvgの問題はありませんでした。 htmlのみハードコアのみ！ これで、タスクが設定され、Googleがアクティブになり、開始できます。

理論

理論から始めましょう、それなしで。 イメージマップには2つのタグが含まれます。map- マップのコンテナーとarea-選択ゾーン。 カードは1つのゾーンに限定されず、無制限の数のゾーンを含むことができます。 標準属性に加えて、 エリアタグには独自のタグがあります。

• coords-選択ゾーンの座標
• href-ゾーンをクリックすると遷移が行われるリンク
• nohref-ゾーンにリンクが含まれていないことを示します
• 形状 -選択形状
  
  
  • circle-サークル選択エリア
  • デフォルト -画像領域全体を選択します
  • poly-ポリゴン選択エリア
  • rect-長方形選択エリア
• target-リンクを開く場所を決定します

カードを画像に接続するには、 mapタグに任意の名前を付けてname属性を指定し、画像にusemapタグを掛けます。その値は" ＃name "の形式で示されます。



選択ゾーンは多角形、形状属性の値、エリアタグである必要があるため、poly-多角形のエリアを示します。 このモードでは、コンマは、左上隅（x、y）を基準としたポイントの座標を示します。 ドットもコンマで区切られますが、最初はこのようなコードを読み取ると困惑します。

<img src="sample.png" width="200" height="200" alt="Sample" usemap="#sample"> <map name="sample"> <area shape="poly" coords="30,100,100,30,100,170,170,100"> </map>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ペイントを書く

Photoshopを使用して各ポイントの座標を見つけ、情報ウィンドウから数値を手動で書き換えるという見込みに面白がらなかった。Googleで出会ったツールはあまりにも巨大だった。 画像の目的の領域をクリックするだけでポイントを設定し、完成したコードを表示できるように、膝の上に小さなスクリプトを作成することにしました。



開始するには、レイアウトを準備します。

 <div class="canvas" id="container"> <div class="inner" id="canvas"> <img src="img/sample.jpg" width="934" height="407" alt="Sample"> </div> </div> <div class="bar" id="bar"></div> <div class="info" id="info"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

「パイント」を制御するためのボタンが#barに挿入されます。

#Infoは、生成されたhtmlコードを生成します。



CSS：

 body { margin: 0; padding: 20px; font-family: Arial, Helvetica, sans-serif; } img { border: none; outline: none; display: block; -moz-user-select: none; -webkit-user-select: none; user-select: none; } .canvas { border: 2px solid #333; padding: 2px; margin-bottom: 16px; display: inline-block; //display: inline; //zoom:1; } .canvas.draw { border-color: #3C0; } .canvas .inner { position: relative; } .canvas .point { width: 1px; height: 1px; background-color: #fff; border: 1px solid #000; overflow: hidden; position: absolute; } .bar { margin-bottom: 16px; } .info { background-color: #FCFCFC; border: 1px dotted #CCC; font-size: 12px; font-style: italic; padding: 8px; word-wrap: break-word; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

JavaScriptでは、すべてが非常に簡単です。 執筆の過程で、私はバトルライブラリを使用したため、非標準の機能に驚かないでください。 まず、＃canvasにmousedownイベントをハングアップします。このイベントでは、画像内のポイントがレンダリングされ、その座標が記録されます。

 var addPoint = function(e){ var e = _.getEvent(e), offset = _.getOffset(nodes['canvas']), x = e.clientX + _.getDocScrollLeft() - offset[0], y = e.clientY + _.getDocScrollTop() - offset[1], node = nodes['canvas'].appendChild(_.node('div', {'class':'point'})); node.style.top = y-1+'px'; node.style.left = x-1+'px'; points.push({'x' : x, 'y' : y, 'node' : node}); e.preventDefault && e.preventDefault(); return false; };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、マップのhtmlコードを生成する関数を作成します。

 var renderInfo = function(){ var text; _.clearNode(nodes['info']); nodes['info'].appendChild(_.node('span', '<map>')); nodes['info'].appendChild(_.node('br')); for(var i = 0, l = areas.length; i < l; i++){ if(areas[i].length > 0){ text = '<area shape="poly" coords="'; for(var i2 = 0, l2 = areas[i].length; i2 < l2; i2++){ if(i2 > 0){ text += ','; } text += areas[i][i2]['x'] + ',' + areas[i][i2]['y']; } text += '">'; nodes['info'].appendChild(_.node('span', text)); nodes['info'].appendChild(_.node('br')); } } nodes['info'].appendChild(_.node('span', '</map>')); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

クラス内のすべてのもの、いくつかのヘルパー関数、それだけです。 誰かがトゥルザをsoくのに役立つことを願っています。

参照資料

デモ

ソース （〜60 KB）。

Github



PS。 githubへのリンクを追加しました。

PS2。 キャンバスで「ペイント」が機能するようになりました。