1

I`m trying to build what my designer designed in photoshop with Kinetic (but willing to use some other library). This is what my designer designed:

http://d.pr/i/upJd

Seems no rocket science just some arcs and circles. But the end of the arcs are not in line with the circle but vertical. I`ve been trying and trying but no luck so far. Anybody have an idea?

My code:

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

fiddle: http://jsfiddle.net/ExwER/

Kind Regards,

Peter

3
  • Punch your designer ;) You could do it with a couple mask to hide the end of the arc when its drawn, but otherwise a circle simply wont work like that.
    – ericjbasti
    Nov 12, 2013 at 15:56
  • Look into html5canvastutorials.com/kineticjs/…
    – ericjbasti
    Nov 12, 2013 at 15:58
  • Thanks eric but my designer is a bigger guy than I am ;) Goining to try and clip the stuff ;)
    – Peter
    Nov 12, 2013 at 17:37

1 Answer 1

0

You can use Kinetic.Shape to stroke actual Arcs instead of hiding hiding or clipping shapes.

With Kinetic.Shape, you get access to a real canvas context so you can draw the arcs your designer has given you--resulting in simpler coding for you ;)

enter image description here

Here is code to make multiple donut charts and a demo 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);

}
7
  • Thanks markE! The arcs also need to animate.. so the white bar will grow bigger or smaller... same goes for the purple one... so drawing is one but it needs to be variable....
    – Peter
    Nov 12, 2013 at 17:56
  • Hi mark, Thanks for some Kinetic lessons.. good to see that it is this powerfull.. what I needed was to make the end of the arc clipped like my designer did... after your and post of others I created this: jsfiddle.net/xember/HB4YA/2 Nice for this position but when it goes to nine O clock´ it doesnt make sense to cut the shape like this.... need to talk to the desiner... BUT learned a lot! Thanks!
    – Peter
    Nov 12, 2013 at 19:23
  • I think like @ericjbasti does: Your designer couldn't make the purple and white arcs end at the same spot. Suggestion: don't try to recreate their design, instead--make it right!
    – markE
    Nov 12, 2013 at 19:35
  • Yeah I know but the purple and white arcs represent some different things.. thas why they are not ending at the same spot.... think we need a new design for this ;) Thanks again for your help!
    – Peter
    Nov 12, 2013 at 20:05
  • COOL!!!! That`s really great! I need my designer look at this! Do you program this stuff for a living?
    – Peter
    Nov 12, 2013 at 22:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.