Как изменить угол конца дуги холста?

Question

Я пытаюсь создать то, что мой дизайнер разработал в фотошопе с 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/

С наилучшими пожеланиями,

Peter

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

}