KineticJS: arc with two wedges

by ArtemGr

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.1.js"></script>
<div id="kineticDiv"></div>

JavaScript

jQuery (function(){
 var stage = new Kinetic.Stage({
  container: 'kineticDiv', width: 200, height: 200})
 var layer = new Kinetic.Layer(); stage.add (layer)
 // http://kineticjs.com/docs/symbols/Kinetic.Wedge.php
 var deg = new Kinetic.Text ({x: 10, y: 10, fill: 'black'})
 layer.add (deg)
 var cg = new Kinetic.Group ({x: 10, y: 24})
 cg.setDraggable (true)
 var click = new Kinetic.Text ({fill: 'black'})
 click.setDraggable (true)
 cg.add (click); layer.add (cg)
 var wedge = new Kinetic.Wedge ({
  x: 100, y: 100,
  angleDeg: 20, rotationDeg: 10,
  radius: 70, fill: 'red'
 }); layer.add (wedge)
 var cover = new Kinetic.Wedge ({
  x: wedge.getX(), y: wedge.getY(),
  angleDeg: wedge.getAngleDeg() + 180, rotationDeg: wedge.getRotationDeg() - 90,
     radius: 50, fill: 'white'
 }); layer.add (cover)
 layer.draw()

 var anim = new Kinetic.Animation (function (frame) {
  var angle = frame.timeDiff / 2000
  wedge.rotate (angle)
  cover.setRotationDeg (wedge.getRotationDeg() - 90)
  deg.setText ('deg: ' + Math.round (wedge.getRotationDeg()))
 }, layer); anim.start()

 var clickNum = 0
 wedge.on ('click', function() {
  click.setText ('click ' + ++clickNum)
 })
})