kineticJS 캔버스의 앵커를 화살표로 변경 하시겠습니까?

Question

저는 지난 며칠 동안 키네틱스와 캔버스를 가지고 놀았습니다. 크기 조정이 가능한 이미지를로드하는 드래그 앤 드롭 캔버스가 있습니다.

var anchor; 

    function addAnchor(group, x, y, name) { 
    var stage = group.getStage(); 
    var layer = group.getLayer(); 

    anchor = new Kinetic.Circle({ 
     x: x, 
     y: y, 
     stroke: "#666", 
     fill: "#ddd", 
     strokeWidth: 2, 
     radius: 8, 
     name: name, 
     draggable: true 
      });     


    anchor.on("dragmove", function() { 
     update(group, this); 
     layer.draw(); 
    }); 
    anchor.on("mousedown touchstart", function() { 
     group.setDraggable(false); 
     this.moveToTop(); 
    }); 
    anchor.on("dragend", function() { 
     group.setDraggable(true); 
     layer.draw(); 
    }); 
    // add hover styling 
    anchor.on("mouseover", function() { 
     var layer = this.getLayer(); 
     document.body.style.cursor = "pointer"; 
     this.setStrokeWidth(4); 
     layer.draw(); 
    }); 
    anchor.on("mouseout", function() { 
     var layer = this.getLayer(); 
     document.body.style.cursor = "default"; 
     this.setStrokeWidth(2); 
     layer.draw(); 
    }); 

    group.add(anchor); 


    } 

내가 가리키고 이미지 크기를 조정할 수 있습니다 사용자를 화살표로 표시 또는 이와 유사한 무언가로 만들어 놓을 싶습니다 : 크기 재조정 이미지에 앵커 원이다. 누구든지이 작업을 수행하는 방법이나 자습서를 통해 나에게 화살표를 그리거나 앵커를 이미지로 바꿀 수있는 방법을 보여줄 수 있습니까? 어떤 도움

감사합니다 ... 당신이 이런 식으로 뭔가 새로운 Kinetic.Cirle과 그것의 속성을 변경해야합니다 생각

Answer 1

:

var anchor = new Kinetic.RegularPolygon({ 
     x: x, 
     y: y, 
     sides: 3, 
     rotation: -190, 
     radius: 8, 
     stroke: "black", 
     strokeWidth: 2, 
     name: name, 
     draggable: true 
    }); 

이 시작에 불과하지만, 각 앵커에서 다른 회전을하기 때문에 각 삼각형을 올바른 방향으로 향하게하려면 앵커 그룹에 변수를 추가해야합니다.

간단히 테스트했지만, 출발점으로 도움이되기를 바랍니다.

Docs을 다시 한 번 기억하십시오.

편집 : here도 참조하십시오.