在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

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

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