Question

我正在尝试使用Kinetic构建我的设计师在photoshop中设计的内容（但愿意使用其他库）。这就是我的设计师设计的：

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

我的代码：

  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，您可以访问真实的画布上下文，这样您就可以绘制设计师给您的弧线 - 从而为您编写更简单的编码;）

enter image description here

以下是制作多个圆环图和演示小提琴的代码：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);

}

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

1 个答案: