將kineticJS畫布上的錨更改爲箭頭？

我已經玩有關與kineticjs和帆布爲過去幾天的。我有一個拖放畫布加載可調整大小的圖像。可調整大小的圖像上的錨圈：將kineticJS畫布上的錨更改爲箭頭？

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); 


    }

我想將它們變成箭頭，或類似的東西向用戶顯示INFACT的圖像調整大小。有沒有人有這樣做的方法或教程，可能會告訴我如何繪製箭頭或用圖像替換錨點？

感謝您的幫助......

來源

2012-07-25 Bohdi

我認爲你需要更改新Kinetic.Cirle和它的屬性是這樣的：

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。

來源

2012-07-30 21:07:33 Anon

將kineticJS畫布上的錨更改爲箭頭？

回答

相關問題