html - 如何改变画布弧线末端的角度？

Question

我正在尝试使用 Kinetic 构建我的设计师在 Photoshop 中设计的东西（但愿意使用其他一些库）。这是我的设计师设计的：

http://d.pr/i/upJd

似乎没有火箭科学，只是一些弧线和圆圈。但圆弧的末端不是与圆成一直线而是垂直的。我一直在尝试，但到目前为止没有运气。有人有想法吗？

我的代码：

  var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 400
  });

  var layer = new Kinetic.Layer();

    var circle = new Kinetic.Circle({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    radius: 169,
    fill: '#C0210F'
   // stroke: 'black',
   // strokeWidth: 4
  });

  var wedge = new Kinetic.Wedge({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    radius: 170,
    angleDeg: 200,
    fill: '#EFC8C3',
    //stroke: 'black',
    //strokeWidth: 4,
    rotationDeg: -90
  });

    var circle2 = new Kinetic.Circle({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    radius: 120,
    fill: '#c02428'
    //stroke: 'black',
    //strokeWidth: 4
  });

  var wedge2 = new Kinetic.Wedge({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    radius: 120,
    angleDeg: 220,
    fill: '#611B61',
    //stroke: 'black',
    //strokeWidth: 4,
    rotationDeg: -90
  });

  var circle3 = new Kinetic.Circle({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    radius: 110,
    fill: 'red'
    //stroke: 'black',
    //strokeWidth: 4
  });

  // add the shape to the layer
  layer.add(circle);
  layer.add(wedge);
  layer.add(circle2);
  layer.add(wedge2);
  layer.add(circle3);

  // add the layer to the stage
  stage.add(layer);

小提琴：http: //jsfiddle.net/ExwER/

亲切的问候，

彼得

Answer 1

您可以使用 Kinetic.Shape 来描边实际的弧线，而不是隐藏隐藏或剪切形状。

使用 Kinetic.Shape，您可以访问真实的画布上下文，这样您就可以绘制设计师给您的弧线——从而为您简化编码；）

这是制作多个甜甜圈图和演示小提琴的代码：http: //jsfiddle.net/m1erickson/9uHD7/

function makeChart(x,y,percent){
    var PI=Math.PI;
    var startAngle=-PI/2;
    var endAngle=2*PI*percent/100-PI/2;
    var cx=width/2;
    var cy=height/2;

    var arcChart=new Kinetic.Group({
        x:x,
        y:y,
        width:width,
        height:height
    });
    layer.add(arcChart);

    var fullArc = new Kinetic.Shape({
      drawFunc: function(context) {
        context.beginPath();
        context.arc(cx,cy,radius,0,Math.PI*2,false);
        context.closePath();
        context.fillStrokeShape(this);
      },
      stroke: 'rgb(153,0,0)',
      strokeWidth: outerStrokeWidth
    });
    arcChart.add(fullArc);

    var outerArc = new Kinetic.Shape({
      drawFunc: function(context) {
        context.beginPath();
        context.arc(cx,cy,radius,startAngle,endAngle,false);
        context.fillStrokeShape(this);
      },
      stroke: 'lightgray',
      strokeWidth: outerStrokeWidth
    });
    arcChart.add(outerArc);

    var innerArc = new Kinetic.Shape({
      drawFunc: function(context) {
        context.beginPath();
        context.arc(cx,cy,this.radius,startAngle,endAngle,false);
        context.fillStrokeShape(this);
      },
      stroke: 'purple',
      strokeWidth: innerStrokeWidth
    });
    // calc the inner radius
    innerArc.radius=radius-outerStrokeWidth/2+innerStrokeWidth/2;
    arcChart.add(innerArc);

}