Question

是否可以更改照片的一部分？我不知道怎么做 - 当我点击灯泡的白球部分时会发生变化。现在我做了类似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>

更新1 - 2017-06-28

我制作了单独的照片，但我不知道如何使用javascript onclick连接Fabric.js插件 - http://mantykora.cleoni.com/~newsletter/2017/gabi/html/index_2.html#

Answer 1

您可以使用fabric.js插件更新部分图像。以下是更新部分图像所需的步骤

添加Fabric.js插件
使用fabric方法创建Canvas。请参阅此文档 http://fabricjs.com/fabric-intro-part-1#canvas
添加与图像下方相同的顶部图像和底部图像。请参阅http://fabricjs.com/fabric-intro-part-1#images
用户点击Color spear后，您需要更新图像根据所选对象。

以下是参考文献的演示链接

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

我在下面更新了代码。我已经添加了updateImage函数来更新图像，同时点击图像。只需要传递图像

＆＃13;

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){
	fabric.Image.fromURL(imageName, function(img) {
		var object= getImageObjectUsingId('theImage');
		  canvas.remove(object);
		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){
	var listOfObjects= canvas.getObjects();
	for(var i=0; i< listOfObjects.length; i++){
		if(listOfObjects[i].id==id){
			return listOfObjects[i];
		}
	}

}

＆＃13;

<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>

＆＃13;

javascript更改图像onclick

1 个答案: