CODEWITHSUNDEEP
javascriptsvgkineticjs
garryp
garryp

Reputation: 5766

Kinetic JS draw a quarter arc

I am trying to draw a quarter circle using Kinetic JS. Unfortunately when I run the code below the shape drawn is actually a pie rather than an arc with two lines joining up to a centre point.

var arc = new Kinetic.Arc({
  outerRadius: 80,
  stroke: 'black',
  strokeWidth: 5,
  angle: 60,
  rotationDeg: -120,
  x:100,
  y:100,
});

Does anyone know how I can draw just an arc without the addition of these two unwanted lines?

Fiddle: http://jsfiddle.net/GarryPas/55vYU/5/

Thanks in advance.

Upvotes: 0

Views: 454

Answers (1)

Jonas
Jonas

Reputation: 1712

Just set the innerRadius to be the same as the outerRadius:

 var arc = new Kinetic.Arc({
      innerRadius: 80,
      outerRadius: 80,
      stroke: 'black',
      strokeWidth: 5,
      angle: 90,
      rotationDeg: 0,
      x:100,
      y:100,
    });

fiddle: http://jsfiddle.net/55vYU/6/

Upvotes: 1

Related Questions