javascript - 画像マップのプロットポイント

Question

Webページの画像マップに自動領域強調表示を追加したい。mapper.jsライブラリはこれを実現するのに非常に便利ですが、地域の地図の周りにx、yプロットを作成するには非常に時間がかかります。

地域の地図に見られるような不規則なポリゴンの境界座標を作成する簡単な方法はありますか？

編集
これを行う方法が必要です。私はWindowsPCにFireworks8とphotoshopCS3を持っていますが、Fireworksに精通しています。

マーキーを作成する場合は、右クリック>[マーキーの変更]>[パスに変換]を選択できます。これにより、いくつかのポイントを持つパスが作成されますが、それらのポイントの座標を抽出する次のステップに進む方法がわかりません。

ホットスポット、ポリゴンスライスを挿入してから、「htmlと画像」にエクスポートしてみました。これらは両方とも、ポリゴンではなく、正方形のホットスポットを提供します。また、パスを右クリックして、[編集]> [パスのアウトラインをコピー]、および[編集]>[HTMLコードをコピー]を試してみました。どちらもポリゴン座標を教えてくれません。

スライスのポリゴン座標しか取得できません。Fireworks 8でパスをスライスに変換する方法はありますか？

Answer 1

Gimpは、画像マップの作成に役立つ優れたインターフェイスを備えたGimp画像マップと呼ばれるプラグイン/フィルターを提供します。あなたが探している機能を提供すると思います。選択Filters -> Web -> Image Map...してダイアログを表示します

[画像マップ]ダイアログを開いたら、心から喜ぶポリゴン領域を作成できます。

リンク、代替テキスト、フレーム、ポリゴン自体を変更したり、JavaScriptイベントを設定したりするのに合わせて、領域を作成およびカスタマイズできます。

完了したら、それを保存すると、HTMLに保存したばかりのフラグメントを使用できるようになります。

<img src="us_map.gif" width="771" height="448" border="0" usemap="#map" />

<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Colin Harrington -->
<area shape="poly" coords="149,292,254,332,308,41,262,33,232,27,169,14,120,9,102,52,92,190" alt="West Coast" href="wc.html" />
<area shape="poly" coords="474,267,522,368,574,62,465,17,422,19,326,51,284,161,293,224,322,250,363,219,419,222" alt="Midwest" href="mw.html" />
<area shape="poly" coords="634,58,583,74,527,360,670,419,757,180,770,65,770,24,705,10,735,29" alt="East Coast" href="ec.html" />
<area shape="poly" coords="380,251,379,285,458,300,464,363,413,426,330,373,287,317,335,323,340,250" alt="Texas" href="tx.html" />
</map>

Answer 2

花火8の場合：

1）魔法の杖とマーキーツールを使用してマーキーを作成します。

2）右クリック>マーキーの変更>パスに変換

3）パスを右クリックして、[ホットスポットの挿入]を選択します（またはCtrl + Uを押します）

4）[ファイル]>[エクスポート]を選択します

5）[ファイルの種類]で[HTMLと画像]を選択します

Answer 3

これは、地図の画像から座標を自動生成しようとしている欲求不満の人のためのものです。

Photoshopでマップを開きます。魔法の杖を使用して画像の端を選択しますマーキーをパスに変換しますこのパスをイラストレーターにエクスポートしますイラストレーターでファイルを開きます'名前を付けて保存...'SVGファイル（注：svgcompressedではありません）オプションメニューで'リンク'を選択します保存を押します

.svgファイルをテキストエディターで開くと、座標が得られます。

Answer 4

これは、画像マップを作成するためのシンプルで使いやすいWebアプリです。追加のプログラム（DreamWeaver、PhotoShop、Gimpなど）を処理する手間が省けます。

http://www.image-mapper.com/

Answer 5

他の答えは手動でそれを行う方法であったようです（質問にはまったく答えていません）。この投稿はこのトピックのGoogleの結果に表示されるので、少なくとも出発点を与えることがわかったいくつかの情報で更新しています自動化された方法でこれを行う方法について：

私が調べている有望なPHPの1つ：http：//www.imagemagick.org/discourse-server/viewtopic.php？f = 1＆t = 14646

私が見つけた他のリソース：

http://marakana.com/blog/examples/php-image-filters.html

http://vis.lbl.gov/NERSC/Software/gsharp/help/GsharpWE/userguide/imagemaps.html

http://en.wikipedia.org/wiki/Canny_edge_detector

基本的に、「画像エッジ検出器」のようなキーワードを探すと、より関連性の高い結果が得られるようですが、私はまだ使用できるものを探していますが、非常に多くの人がこれを考えているように見えることに少し驚いていますプログラムで行う方がはるかに効果的である場合は、手動で行う必要があります。

Answer 6

Adobeの陣営にとどまりたい場合、ImageReadyにはGimpのように画像マップを作成する機能があります。彼らはそれを使ってオンラインで画像マップを作成するためのチュートリアルを持っていますが、ページのcssは現在壊れており、印刷しない限りページを見ることができません。次に、このpdfのようになります。