使用 KineticJS 旋转形状

Question

我正在努力用 KineticJS 在画布上实现一些小东西。

我想创建一个圆+一条线，形成一个组（平面）。 下一步是允许该组在您单击该组时出现一个按钮，使其围绕自身旋转。

我的问题是，当我单击旋转按钮时，它不会在按钮附近而是在其他地方旋转。看一看 ： 我的旋转自动取款机：http://hpics.li/b46b73a 我希望旋转按钮靠近行尾。不远了。。

我试图在 jsfiddle 上实现它，但我有点新，我没有设法正确地把它放好，如果你能帮助我，我将不胜感激！ 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

可以通过设置组的 offsetX 和 offsetY 来调整旋转点。