fabricjs를 사용하여 캔버스에 여러 이미지를 추가하는 방법

Question

이 항목에 대한 몇 가지 질문/답변을 읽었지만 솔루션을 찾을 수 없습니다. 죄송합니다. 혹시이 질문이 중복 된 것 같습니다.

여기 내 상황이 있습니다. 사용자가 클릭 할 수있는 메뉴가 있고 선택한 항목의 이미지가 캔버스에 표시되고 사용자가 원하는대로 해당 이미지의 크기를 조정하거나 드래그/드롭 할 수 있다고 가정 해 보겠습니다. 지금 나는이 코드를 한 번만 작동 할 수

addAction(selectedAction: any) { 
    var canvas = new fabric.Canvas('c'); 
    var imgObj = new Image(); 
    imgObj.src = selectedAction.image; 
    imgObj.onload = function() { 
    var imgInstance = new fabric.Image(imgObj, { 
     left: 200, 
     top: 200, 
     }); 
    canvas.add(imgInstance); 
    } 

사용자가 메뉴에서 다른 항목을 클릭하면 문제는 캔버스에 있던 앞의 항목이 캔버스에 대신 현재 항목 표시를 사라질 것입니다 . 하지만 그 이미지를 클릭하면 사라지고 이전 이미지가 캔버스에 표시됩니다.

나는 캔버스에 동시에 머물고 싶습니다. 제발 조언.

Answer 1

진짜 빠른 대답 : http://jsfiddle.net/8yf15nqp/1/.

var canvas = ...// setup canvas 

function addImage (url) { 
    fabric.Image.fromURL(url, function (img) { 
     // deal with image 
     canvas.add(img); 
    }); 
} 

추가 기능을 처리하고 새 이미지를 추가 할 때이 기능을 호출하는 기능을 설정하십시오. 나는 당신이 함수에 URL을 전달하고 다른 것들을하고 싶어한다고 가정 할 것이지만 이것은 꽤 잘린 예제이다.