1

デザイナーがフォトショップでデザインしたものを Kinetic で構築しようとしています (ただし、他のライブラリを使用したいと考えています)。これは私のデザイナーが設計したものです：

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/

敬具、

ピーター

4

1 に答える 1

0

Kinetic.Shape を使用して、非表示またはクリッピング シェイプを非表示にする代わりに、実際のアークをストロークできます。

Kinetic.Shape を使用すると、実際のキャンバス コンテキストにアクセスできるため、デザイナーが指定した弧を描くことができます。その結果、コーディングがより簡単になります ;)

ここに画像の説明を入力

複数のドーナツ チャートとデモ Fiddle を作成するコードを次に示します: 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);

}
于 2013-11-12T17:47:25.723 に答える