当图像首次加载使用功能隐藏时，再次发生功能

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，它正在工作 –

当图像首次加载使用功能隐藏时，再次发生功能

回答

相关问题