Javascript 如何使用Kineticjs围绕中心点旋转图像？

我已经尝试了一些旋转，但是如何围绕中心点旋转图像呢？这是适合这种旋转的锚吗

我也没有找到任何好的教程。非常感谢推荐人

---

这是我的

update

函数，用于旋转，但请参见：

参考：

---

参考：

对偏移量使用此语法：

    var yellowRect = new Kinetic.Rect({
      x: 220, //top left cornerX
      y: 75,  //top left cornerY
      width: 100,
      height: 50,
      stroke: 'black',
      strokeWidth: 4,
      offset: {x:50, y:25}       // here!
    });

---

对偏移量使用以下语法：

    var yellowRect = new Kinetic.Rect({
      x: 220, //top left cornerX
      y: 75,  //top left cornerY
      width: 100,
      height: 50,
      stroke: 'black',
      strokeWidth: 4,
      offset: {x:50, y:25}       // here!
    });

函数更新（activeAnchor）{
var group=activeAnchor.getParent（）；
var topLeft=group.get（'.topLeft'）[0]；
var topRight=group.get（'.topRight'）[0]；
var bottomRight=group.get（'.bottomRight'）[0]；
var bottomLeft=group.get（'.bottomLeft'）[0]；
var rotateAnchor=group.get（'.rotateAnchor'）[0]；
var image=group.get（'image'）[0]；
var anchorX=activeAnchor.getX（）；
var anchorY=activeAnchor.getY（）；
var imageWidth=image.getWidth（）；
var imageHeight=image.getHeight（）；
//更新锚点位置
开关（active锚点.getName（））{
案例“rotateAnchor”：
打破
案例“左上角”：
右上角。塞蒂（锚定）；
左下角。setX（anchorX）；
打破
案例“右上角”：
左上。赛蒂（安科里）；
右下角。setX（anchorX）；
打破
案例“右下角”：
右上角.setX（主播）；
左下角。setY（anchorY）；
打破
案例“左下角”：
左上角。setX（主播）；
右下角。赛蒂（安科里）；
打破
}
if（topRight.getX（）=numImages）{
回调（图像）；
}
};
图像[src].src=源[src]；
}
}
函数弧度（度）{
返回度*（Math.PI/180）
}
函数度（弧度）{
返回弧度*（180/Math.PI）
}
功能角（cx、cy、px、py）{
var x=cx-px；
var y=cy-py；
返回数学atan2（-y，-x）
}
功能距离（p1x，p1y，p2x，p2y）{
返回Math.sqrt（Math.pow（（p2x-p1x），2）+Math.pow（（p2y-p1y），2））
}
函数getRotatingAnchorBounds（位置，组）{
var groupPos=group.getPosition（）；
变量旋转=度（角度（组位置x、组位置y、组位置x、组位置y）-星形缠绕）；
var dis=距离（组位置x、组位置y、组位置x、组位置y）；
console.log（'x:'+pos.x+'；y:'+pos.y+'；rotatio
    var yellowRect = new Kinetic.Rect({
      x: 220, //top left cornerX
      y: 75,  //top left cornerY
      width: 100,
      height: 50,
      stroke: 'black',
      strokeWidth: 4,
      offset: {x:50, y:25}       // here!
    });

  function update(activeAnchor) {
            var group = activeAnchor.getParent();

            var topLeft = group.get('.topLeft')[0];
            var topRight = group.get('.topRight')[0];
            var bottomRight = group.get('.bottomRight')[0];
            var bottomLeft = group.get('.bottomLeft')[0];

            var rotateAnchor = group.get('.rotateAnchor')[0];
            var image = group.get('Image')[0];

            var anchorX = activeAnchor.getX();
            var anchorY = activeAnchor.getY();
            var imageWidth = image.getWidth();
            var imageHeight = image.getHeight();

            // update anchor positions
            switch (activeAnchor.getName()) {
                case 'rotateAnchor':

                    break;
                case 'topLeft':
                    topRight.setY(anchorY);
                    bottomLeft.setX(anchorX);
                    break;
                case 'topRight':
                    topLeft.setY(anchorY);
                    bottomRight.setX(anchorX);
                    break;
                case 'bottomRight':
                    topRight.setX(anchorX);
                    bottomLeft.setY(anchorY);
                    break;
                case 'bottomLeft':
                    topLeft.setX(anchorX);
                    bottomRight.setY(anchorY);
                    break;
            }

            if (topRight.getX() < topLeft.getX() + minImgSize) {
                topRight.setX(topLeft.getX() + minImgSize);
            }
            if (bottomRight.getX() < topLeft.getX() + minImgSize) {
                bottomRight.setX(topLeft.getX() + minImgSize);
            }
            if (bottomRight.getY() < topLeft.getY() + minImgSize) {
                bottomRight.setY(topLeft.getY() + minImgSize);
            }
            if (bottomLeft.getY() < topLeft.getY() + minImgSize) {
                bottomLeft.setY(topLeft.getY() + minImgSize);
            }

            var width = topRight.getX() - topLeft.getX();
            var height = bottomLeft.getY() - topLeft.getY();

            image.setPosition({
                x: topLeft.getPosition().x,
                y: (topLeft.getPosition().y)
            });
            image.setWidth(width);
            image.setHeight(height);

            rotateAnchor.setX(width / 2 + topLeft.getX());
            rotateAnchor.setY(height / 2 + topLeft.getY());

        }

  function addAnchor(group, x, y, name, dragBound) {
            var stage = group.getStage();
            var layer = group.getLayer();
            var groupPos = group.getPosition();



            var anchor = new Kinetic.Circle({
                x: x,
                y: y,
                stroke: '#666',
                fill: '#ddd',
                strokeWidth: 2,
                radius: 6,
                //name: name,
                id :"anchor",
                name:name,
                draggable: true,
                dragOnTop: false
            });


            if (dragBound == 'rotate') {
                startAngle = angle(groupPos.x, groupPos.y, x + groupPos.x, y + groupPos.y);

                anchor.setAttrs({
                    dragBoundFunc: function (pos) {
                        return getRotatingAnchorBounds(pos, group);
                    }
                });
            }


            anchor.on('dragmove', function () {
                update(this);
                stage.draw();
            });
            anchor.on('mousedown touchstart', function () {
                group.setDraggable(false);
                this.moveToTop();
            });
            anchor.on('dragend', function () {
                group.setDraggable(true);
                stage.draw();
            });
            // add hover styling
            anchor.on('mouseover', function () {

                var layer = this.getLayer();
                document.body.style.cursor = 'pointer';
                this.setStrokeWidth(4);
                stage.draw();
            });
            anchor.on('mouseout', function () {
                var layer = this.getLayer();
                document.body.style.cursor = 'default';
                this.setStrokeWidth(2);
                stage.draw();
            });

            group.add(anchor);


        }

  function loadImages(sources, callback) {
    var images = {};
    var loadedImages = 0;
    var numImages = 0;
    for(var src in sources) {
      numImages++;
    }
    for(var src in sources) {
      images[src] = new Image();
      images[src].onload = function() {
        if(++loadedImages >= numImages) {
          callback(images);
        }
      };
      images[src].src = sources[src];
    }
  }
  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))
        }

        function getRotatingAnchorBounds(pos, group) {
            var groupPos = group.getPosition();
            var rotation = degrees(angle(groupPos.x, groupPos.y, pos.x, pos.y) - startAngle);
            var dis = distance(groupPos.x, groupPos.y, pos.x, pos.y);
            console.log('x: ' + pos.x + '; y: ' + pos.y + '; rotation: ' + rotation + '; distance:' + dis);
            group.setRotationDeg(rotation);
            return pos;
        }
  function initStage(images) {
    var stage = new Kinetic.Stage({
      container: 'container',
      width: 578,
      height: 400
    });
    var darthVaderGroup = new Kinetic.Group({
      x: 270,
      y: 100,
      draggable: true
    });
    var yodaGroup = new Kinetic.Group({
      x: 100,
      y: 110,
      draggable: true
    });
    var layer = new Kinetic.Layer();

    /*
     * go ahead and add the groups
     * to the layer and the layer to the
     * stage so that the groups have knowledge
     * of its layer and stage
     */
    layer.add(darthVaderGroup);
    layer.add(yodaGroup);
    stage.add(layer);

    // darth vader
    var darthVaderImg = new Kinetic.Image({
      x: 0,
      y: 0,
      image: images.darthVader,
      width: 200,
      height: 138,
      name: 'image'
    });

    darthVaderGroup.add(darthVaderImg);
   addAnchor(darthVaderGroup, 0, 0, 'topLeft', 'none');
            addAnchor(darthVaderGroup, darthVaderImg.getWidth(), 0, 'topRight', 'none');
            addAnchor(darthVaderGroup, darthVaderImg.getWidth(), darthVaderImg.getHeight(), 'bottomRight', 'none');
            addAnchor(darthVaderGroup, 0, darthVaderImg.getHeight(), 'bottomLeft', 'none');
            addAnchor(darthVaderGroup, darthVaderImg.getWidth() / 2, darthVaderImg.getHeight() / 2, 'rotateAnchor', 'rotate');

    darthVaderGroup.on('dragstart', function() {
      this.moveToTop();
    });
    stage.draw();
  }

  var sources = {
    darthVader: 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'
  };
  loadImages(sources, initStage);