KineticJS 도형에 레이블을 추가하는 방법은 무엇입니까?

KineticJs를 사용하여 일부 텍스트 레이블 (모양과 함께 드래그 가능)이있는 모양을 만듭니다. tutorial에 대한 정보가 없습니다. 역시 this은 매우 깨끗한 접근법을 찾지 못했습니다. 이렇게하는 좋은 접근 방법은 무엇입니까? 아래 코드는 모양을 만듭니다.KineticJS 도형에 레이블을 추가하는 방법은 무엇입니까?

HTML :

<html> 
    <body> 
     <div id="container"> </div> 
     <button id="new_state">New State</button> 
    </body> 
</html>

JS :

$(document).bind("ready", function() { 
    stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 600, 
     height: 500 
    }); 

    layer = new Kinetic.Layer(); 

    $('#new_state').click(function() { 
     newState(); 
    }); 

}); 

newState = function() { 
    var circle = new Kinetic.Circle({ 
     x: stage.getWidth()/2, 
     y: stage.getHeight()/2, 
     radius: 20, 
     fill: 'white', 
     stroke: 'black', 
     strokeWidth: 2, 
     text: 'tet', 
     draggable: true 
    }); 
    circle.on('mouseover', function() { 
     $('body').css('cursor', 'pointer'); 
    }); 

    circle.on('mouseout', function() { 
     $('body').css('cursor', 'default'); 
    }); 


    layer.add(circle); 
    stage.add(layer); 
};

당신은 단지 그룹 원과 텍스트를 추가하고 그룹을 드래그 할 필요가

JsFiddle here

출처

2013-01-03 ajmartin

. 그룹화되면 개체가 하나의 항목으로 작동합니다.

var group = new Kinetic.Group({ 
    draggable: true 
}); 
group.add(circle); 
group.add(text);

다음 레이어

layer.add(group);

http://jsfiddle.net/e8KwC/1/

출처

2013-01-03 22:45:19 SoluableNonagon

에 그룹을 추가 유일한 방법인가요? – ajmartin

그게 유일한 방법입니다. 적어도 가장 깨끗합니다. 당신이하려는 일에 대해 생각한다면 : 도형을 만들고 나서 텍스트를 만든 다음 그 도형을 하나의 것으로 취급 한 다음 이벤트를 첨부하십시오. 이를 위해 아무런 단계 과정이 없기 때문에 그룹을 사용해야합니다 ... Kinetic.Shape 또는 Text를 확장 한 클래스를 코딩하여 하나의 모양과 텍스트를 만들 수 있습니다. – SoluableNonagon

예를 들어 주셔서 감사합니다. 하나의 작은 오류는 Text 객체의 속성이 "textFill"이 아니라 "fill"이라는 것입니다. 기본 채우기는 흰색이므로 흰색 캔버스에 표시되지 않습니다. – Phil

KineticJS 도형에 레이블을 추가하는 방법은 무엇입니까?

답변

관련 문제