javascriptの変更のイメージonclick

Question

写真の一部を変更することはできますか？私はこれを行う方法がわかりません - ランプの白い部分をクリックすると変化します。私は別の写真を作ったが、私はFabric.jsを接続する方法がわからない2017年6月28日

- 今の私はhttp://mantykora.cleoni.com/~newsletter/2017/gabi/2017_Gabi_2.html

<script> 
function pictureChange() 
{ 
document.getElementById("theImage").src="gold.jpg"; 
} 


function pictureChange2() 
{ 
document.getElementById("theImage").src="miedz.jpg"; 
} 


function pictureChange3() 
{ 
document.getElementById("theImage").src="stal.jpg"; 
} 

function pictureChange4() 
{ 
document.getElementById("theImage").src="816_Gabi_white.png"; 
} 
</script> 

<td align="center" valign="middle"><a href="#" onClick="pictureChange()"><img src="816_Gabi_kolory_GOLD.jpg" width="200" height="200" alt=""/></a></td> 
<td align="center" valign="middle"><a href="#" onClick="pictureChange2()"><img src="816_Gabi_kolory_MIEDZ.jpg" width="200" height="200" alt=""/></a></td> 
<td align="center" valign="middle"><a href="#" onClick="pictureChange3()"><img src="816_Gabi_kolory_STAL.jpg" width="200" height="200" alt=""/></a></td> 

UPDATE 1のような何かをしましたプラグインon javascript onclick - http://mantykora.cleoni.com/~newsletter/2017/gabi/html/index_2.html#

Answer 1

部分画像の更新には、fabric.jsプラグインを使用できます。ここでは、一部の画像

1. がFabric.jsプラグイン
2. を追加更新するために行うために必要な手順は、生地の方法を使用してキャンバスを作成しています。このドキュメントを参照してください http://fabricjs.com/fabric-intro-part-1#canvas
3. 下の画像を追加すると、下のサンプル画像と同じように追加されます。 参照http://fabricjs.com/fabric-intro-part-1#images
4. ユーザーがカラースピアをクリックすると、選択したオブジェクトに従って画像 を更新する必要があります。ここで

私は以下のコードを更新したご参考

http://fabricjs.com/fabric-intro-part-1#images

のためのデモリンクされています。画像をクリックしながら画像を更新するupdateImage関数を追加しました。ちょうどあなたがイメージに

var canvas = this.__canvas = new fabric.StaticCanvas('c'); 
 
    
 
fabric.Image.fromURL('Gold_001A.png', function(img) { 
 

 
    canvas.add(img.set({ left: 35, top: 50, angle: 0, id:'theImage2' }).scale(1)); 
 
    }); 
 
    
 
    fabric.Image.fromURL('Gold_001B.png', function(img) { 
 
    canvas.add(img.set({ left: 35, top: 50, angle: 0, id:'theImage' }).scale(1)); 
 
    }); 
 
    
 
/* Funtion for updating image 
 
@param {string}{imageName} Image name or image url for loading and updating 
 
*/ 
 
function updateImage(imageName){ 
 
\t fabric.Image.fromURL(imageName, function(img) { 
 
\t \t var object= getImageObjectUsingId('theImage'); 
 
\t \t canvas.remove(object); 
 
\t \t canvas.add(img.set({ left: 35, top: 50, angle: 0, id:'theImage' }).scale(1)); 
 
    }); 
 

 
} 
 

 
/* Function for getting perticular object for updating the images 
 
@param {String}{id} Object Id for selecting object . Same as use while creating object 
 
*/ 
 
function getImageObjectUsingId(id){ 
 
\t var listOfObjects= canvas.getObjects(); 
 
\t for(var i=0; i< listOfObjects.length; i++){ 
 
\t \t if(listOfObjects[i].id==id){ 
 
\t \t \t return listOfObjects[i]; 
 
\t \t } 
 
\t } 
 

 
}

<table width="100%" border="0"> 
 
    <tbody> 
 
    <tr> 
 
     <td align="center" valign="middle"><table width="600" border="0"> 
 
     <tbody> 
 
      <tr> 
 
      <td align="center" valign="middle"><canvas id="c" width="800" height="800" class="lower-canvas" style="width: 800px; height: 800px;"></canvas> 
 
</td> 
 
      </tr> 
 
      <tr> 
 
      <td align="center" valign="middle"><table width="600" border="0"> 
 
       <tbody> 
 
       <tr> 
 
       <!--update image for updating image using updateImage function and pass iamge name or url in that funtion--> 
 
        <td align="center" valign="middle"><a href="#" onclick="updateImage('816_Gabi_white.png')"><img src="./Dokument bez tytułu_files/816_Gabi_kolory_GOLD.jpg" width="200" height="200" alt=""></a></td> 
 
        <td align="center" valign="middle"><a href="#" onclick="updateImage('816_Gabi_kolory_MIEDZ.jpg')"><img src="./Dokument bez tytułu_files/816_Gabi_kolory_MIEDZ.jpg" width="200" height="200" alt=""></a></td> 
 
        <td align="center" valign="middle"><img src="./Dokument bez tytułu_files/816_Gabi_kolory_STAL.jpg" width="200" height="200" alt=""></td> 
 
       </tr> 
 
       </tbody> 
 
      </table></td> 
 
      </tr> 
 
      <tr> 
 
      <td align="center" valign="middle">&nbsp;</td> 
 
      </tr> 
 
     </tbody> 
 
     </table></td> 
 
    </tr> 
 
    </tbody> 
 
</table>