1

画像の下のようなウェブページの一部をデザインする必要があります。左側には、色のオプションがあります。ユーザーが左側から任意の色を選択して画像部分をクリックすると、画像の部分が選択した色で塗りつぶされます。グーグル検索により多くの時間を費やしました。ほとんどのサイトはフラッシュのみを使用していました。しかし、私はフラッシュをよく知りません。jqueryプラグインを使用して達成することは可能ですか?

ここに画像の説明を入力

4

5 に答える 5

3

<canvas>おそらく要素を調べたいと思うでしょう。クリックしたときに画像の特定の部分を塗りつぶすには、フラッドフィル アルゴリズムが必要になる場合があります。

于 2012-09-11T11:53:17.757 に答える
2

これは Javascript で解決できますが、そのため、すべての色に独自の画像が必要です。

<script language="JavaScript" type="text/javascript">


function changePic(picColor)
{
  if(picName == "btnRed")
  {
    document.getElementById(mainPic).src = "mainPicRed.jpg"
  } 
  else if(picName == "btnYellow")
  {
    document.getElementById(mainPic).src = "mainPicYellow.jpg"
  } 
}

</script>

すべてのカラー ボタンの HTML:

<img src="red.jpg" name="btnRed" id="btnRed" onClick="changePic(this.name)">
<img src="mainPic.jpg" name="mainPic" id="mainPic">
于 2012-09-11T11:59:06.807 に答える
2

使用する png ファイルを厳密に制御できる場合は、実際にはこれを簡単に行うことができます。

たとえば、色を付けたい領域を除いて、png を完全に不透明にすることができます。

次に、画像をロードして、色をクリックしたときに使用している要素の背景色を設定するだけです。

このようなもの：

$(".ColorOption").click(function(e){
   e.preventDefault();
   var color = $(this).data("color");
   $("#MainImageBackground").css("background-color", color);
});

次のように data 属性を使用して色のオプションを設定するとします。

<a data-color="#F00"></a>

あなたのイメージで次のようなもの：

<div id="MainImageBackground">
   <img src="whatever"/>
</div>
于 2012-09-11T11:55:40.147 に答える
0

アイデア 1: canvas 要素を使用して、fill メソッドを調べます。これはおそらく、flash よりも複雑になるでしょう。

アイデア 2:

  1. 色のついた部分だけが透明な透過 PNG を作成します。

  2. 2 つの DIVS を作成します。1 つは z-index 10 に、もう 1 つは 20 に、同じサイズ、同じ位置に作成します。

  3. z-index 20 の一番上の div に画像を配置します。次に、z-index 10 にある div 1 の背景の色を変更します。

于 2012-09-11T11:55:47.960 に答える
0

任意の png を受け入れて中央を埋めるには:

Floodfill アルゴリズムに関する情報は、JavaScript で次の場所にあります。

http://jsfiddle.net/loktar/ZLw9m/

ただし、画像をjavascriptが理解できる形式（たとえば0と1）に変換し、その上でアルゴリズムを実行する必要があるため、実装はより高度にする必要があります

@musefanが指摘したように、PNGを制御できる場合、これははるかに簡単です

于 2012-09-11T11:58:12.610 に答える