javascript - 在 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 会移除红色但保留轮廓。

Answer 1

如何使用圆弧为此创建自定义形状？

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