将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画布上的锚更改为箭头？

回答

相关问题