使用KineticJS绘制弧形

Question

我知道你可以使用Kinetic.Wedge绘制楔形图：

  var compassArc = new Kinetic.Wedge({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    radius: 70,
    angleDeg: 60,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4,
    rotationDeg: -90
  });

这将绘制一个带有黑色轮廓的“比萨三角形”。我只想要“比萨饼皮”，没有任何直线回到圆形中心。如何做到这一点？将填充设置为null可以去掉红色，但保留轮廓。

- you786

Answer 1

如何使用弧线创建自定义形状？

您可以使用弧线来创建自定义形状。这里有一个相关的HTML5 Canvas教程：http://www.html5canvastutorials.com/tutorials/html5-canvas-arcs/ 请注意，不要关闭路径或填充笔画。如果这样做，您将得到想要的结果。这是一个KineticJS对象，所以您可以拖动它。

以下是工作示例：http://jsfiddle.net/bighostkim/WzxxH/

var arc = new Kinetic.Shape({
    drawFunc: function(canvas) {
        var context = canvas.getContext();
        var x = stage.getWidth() / 2;
        var y = stage.getHeight()/2;
        var radius = 70;
        var startAngle = 1 * Math.PI;
        var endAngle = 0 * Math.PI;
        var context = canvas.getContext('2d');
        context.beginPath();
        context.arc(x, y, radius, startAngle, endAngle, false);
        //context.closePath();
        canvas.stroke(this);
    },
    fill: '#00D2FF',
    stroke: 'black',
    strokeWidth: 4,
    draggable:true
});

- allenhwkim

---

我同意，尽管即将推出的KineticJS 4.3.2旨在将弧形引入为一种形状。 - SoluableNonagon

很酷，谢谢。这很奇怪，因为它似乎比楔形实现更容易实现。 - you786

我是否可以在创建弧之后更改其角度（特别是角度）？ - you786

更改创建后的角度，请参考此链接：http://jsfiddle.net/bighostkim/vmHRY/ - allenhwkim

change canvas.stroke(this); to context.stroke(this); - Nikos Kyr

Answer 2

allenhwkim的答案有些过时且存在一些问题。例如，动力仪表板数组将无法工作。因此，这里是修订版：

var arc = new Kinetic.Shape({
        x: 100,
        y: 100,
        stroke: '#000',
        strokeWidth: 4,
        dash: [8, 4],
        drawFunc: function(context) {
            var radius = 50;
            var startAngle = 1 * Math.PI;
            var endAngle = 0 * Math.PI;
            context.beginPath();
            context.arc(0, 0, radius, startAngle, endAngle, false);
            context.fillStrokeShape(this);
        },
        draggable:true      
    });

- Benjamin

Answer 3

有一个Kinetic.Arc类可以使用。 将outerRadius设置为innerRadius，你就能得到想要的效果。

this.arc = new Kinetic.Arc({
  innerRadius: 90,
  outerRadius: 90,
  stroke: 'red',
  strokeWidth: 2,
  angle: 60,
  rotationDeg: 210
});

- Szymon Wygnański