이미지를 처음으로로드하는 기능은 hide 함수입니다.

drag&drop 및 resizing에 대한 JavaScript입니다. 이제 버튼을 클릭하면 캔버스에 이미지를로드 할 수 있으며 드래그 할 수 있습니다. 그러나 두 번째 클릭하면 첫 번째 이미지가 사라지고 새로운 이미지가 나타납니다. 두 이미지가 모두 필요합니다. 이것은 사용하여 코드의 I'am입니다 :이미지를 처음으로로드하는 기능은 hide 함수입니다.

<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, 작동 중입니다. –

이미지를 처음으로로드하는 기능은 hide 함수입니다.

답변

관련 문제