Rotating Shape with KineticJS

Question

I'm struggling to implement a little things on canvas with KineticJS.

I want to create a circle + a line which form a group (plane). The next step is to allow the group to rotate around itself with a button that appears when you click on the group.

My issue is that when I click on the rotate button, it does not rotate near the button but elsewhere. Have a look : My rotation atm : http://hpics.li/b46b73a I want the rotate button to be near the end of the line. Not far away..

I tried to implement it on jsfiddle but I'm kinda new and I didn't manage to put it correctly , if you could help me on that, I would be thankful ! http://jsfiddle.net/49nn0ydh/1/

  function radians (degrees) {return degrees * (Math.PI/180)}
  function degrees (radians) {return radians * (180/Math.PI)}

  function angle (cx, cy, px, py) {var x = cx - px; var y = cy - py; return Math.atan2 (-y, -x)}
  function distance (p1x, p1y, p2x, p2y) {return Math.sqrt (Math.pow ((p2x - p1x), 2) + Math.pow ((p2y - p1y), 2))}


  jQuery (function(){

    var stage = new Kinetic.Stage ({container: 'kineticDiv', width: 1200, height:600})
    var layer = new Kinetic.Layer(); stage.add (layer)


   // group avion1
    var groupPlane1 = new Kinetic.Group ({
      x: 150, y: 150,
      draggable:true
    }); layer.add (groupPlane1)

    // avion 1
    var plane1 = new Kinetic.Circle({

        radius: 10,
        stroke: "darkgreen",
        strokeWidth: 3,
      }); groupPlane1.add(plane1);

      var trackPlane1 = new Kinetic.Line({
      points: [10, 0, 110, 0],
        stroke: "darkgreen",
        strokeWidth: 2
      }); groupPlane1.add(trackPlane1);

   groupPlane1.on('click', function() {
              controlGroup.show();
            });
    groupPlane1.setOffset (plane1.getWidth() * plane1.getScale().x / 2, plane1.getHeight() * plane1.getScale().y / 2)




        var controlGroup = new Kinetic.Group ({
          x: groupPlane1.getPosition().x + 120,
          y: groupPlane1.getPosition().y ,
          opacity: 1, draggable: true,
        }); layer.add (controlGroup)
         var signRect2 = new Kinetic.Rect({
          x:-8,y: -6,
          width: 20,
          height: 20,
          fill: 'white',
          opacity:0
        });
        controlGroup.add(signRect2);

        var sign = new Kinetic.Path({
          x: -10, y: -10,
          data: 'M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z',
          scale: {x:0.5, y:0.5}, fill: 'black'
        }); controlGroup.add (sign)



        controlGroup.setDragBoundFunc (function (pos) {
          var groupPos = groupPlane1.getPosition();
          var rotation = degrees (angle (groupPos.x, groupPos.y, pos.x, pos.y));
          var dis = distance (groupPos.x, groupPos.y, pos.x, pos.y);
          groupPlane1.setRotationDeg (rotation);
          layer.draw()
          return pos
        })


        controlGroup.on ('dragend', function() {

          controlGroup.hide();
          layer.draw()
        })

        controlGroup.hide();
        layer.draw()
      })

Answer 1

You can adjust the rotation point by setting the offsetX and offsetY of the group.