캔버스에서 모양을 선택하고 이름을 반환하는 방법은 무엇입니까?

Question

나는이 기능으로 jCanvas 라이브러리를 사용하여 캔버스에 여러 모양을 그릴 :

var factoryCounter = 1; 

$(".atom").click(function() { 
    //get element by tag id 
    var AtomId = jQuery(this).attr("id"); 
    var elementRef = "#el" + factoryCounter; 
    $("canvas") 
    .drawImage({ 
     source:'images/' + AtomId + '.png', 
     layer: true, 
     name: "myAtom" + factoryCounter, //I need this value 
      fillStyle: "#36b", 
      strokeStyle: '#36b', 
      strokeWidth: 0.3, 
      x: 36, y: 28, 
      width: 45, height: 35, 
      radius: 100, 
      ccw: true, 
      draggable: true, 
      click: function(layer) { 
          console.log("name") //here I need to return "name", but don't know how. 

     }     
    }); 
    factoryCounter++; 

각 형태는 고유 한 이름을 가지고 볼 수 있듯이. 마우스로 클릭 한 후 선택한 모양의 이름을 반환하는 함수를 만들고 싶습니다. 내가 할 수있는 성공적인 편집과 같은 알려져있다 NAME 모양의 속성 :

 $("canvas").setLayer("myAtom" + 2, { 
    fillStyle: "#36b", 
    width: 100, height: 200, 
    rotate: 30 
    }) 
     .drawLayers(); 
    }); 

그러나 shapeSelect 클릭하여 기존 형태의 이름을 돌려줍니다() 함수를 구현하는 방법을 모르고에게이 없다.

Answer 1

좋아, 나는 도서관을 한 사람에게 물었다. 그리고 그는 나에게 올바른 대답을 보여 주었다. 이 경우 당신이 여기있다, 그것을 필요 :

---

글쎄, 오히려 각각의 새로운 jCanvas 층에 대한 클릭 이벤트를 설정 캔버스 요소에 바인딩 클릭 이벤트를 갖는 것보다. 이러한 레이어 중 하나를 클릭하면 콜백 함수가 사용자가 만든 일부 레이어 속성 (예 : layer.selected)에 따라 무엇을 할 것인지간에 전환 할 수 있습니다. 당신은 아무것도를 시도

$("canvas").drawImage({ 
// image properties here... 
layer: true, 
name: "someLayer", 
selected: false, 
click: function(layer) { 
    if (layer.selected === false) { 
     layer.selected = true; 
     // do something with the layer name 
    } else if (layer.selected === true) { 
     layer.selected = false; 
     // deselect the layer 
    } 
} 
}); 

-Caleb

---