當圖像首次加載使用功能隱藏時，再次發生功能

JavaScript的drag&drop和resizing。現在，當我點擊一個按鈕時，我可以在畫布中加載圖像，並且可以拖動。但是當我第二次點擊時，第一張圖片即將消失，而新的圖片即將到來，我想要兩張圖片。這是使用代碼我'：當圖像首次加載使用功能隱藏時，再次發生功能

<html> 
<head> 
    <script src="fabric.min.js"></script> 
</head> 
<body> 
    <canvas id="c"></canvas> 
    <img src="icon_03.jpg" id="my-image"> 
    <button onclick="myFunction()">click</button> 
    <script> 
     function myFunction() { 
      var canvas = new fabric.Canvas('c'); 
      var imgElement = document.getElementById('my-image'); 
      var imgInstance = new fabric.Image(imgElement, { 
       left: 100, 
       top: 100, 
       angle: 30, 
       opacity: 0.85 
      }); 
      canvas.add(imgInstance); 
     }; 
    </script> 
</body> 
</html>

來源

2016-12-05 manu padmanabhan

我認爲問題是，你正在創建你的函數畫布對象，所以總有一個新的帆布，裏面是空的創建，並繪製在已有的一。我更新了小提琴，所以，只要你按一下按鈕，一個新的圖像添加到畫布：http://jsfiddle.net/z4fty1de/7/

這是我的代碼：

var canvas = new fabric.Canvas('c'); 
$('#image').click(myFunction); 
function myFunction() { 
      var imgElement = document.getElementById('my-image'); 
      var imgInstance = new fabric.Image(imgElement, { 
       left: 100, 
       top: 100, 
       angle: 30, 
       opacity: 0.85 
      }); 
      canvas.add(imgInstance); 
};

我希望我可以幫助你。 :)

來源

2016-12-05 12:30:45

thanx，它正在工作 –

當圖像首次加載使用功能隱藏時，再次發生功能

回答

相關問題