2

我已经设法使用 jsFiddle 中的代码进行了某种旋转，但是如何围绕中心点旋转图像？这是适合这种旋转的锚吗？

我也没有找到任何好的教程，而且这个也没有多大帮助。参考非常感谢。

这是我update进行旋转的函数，但请查看小提琴中的其余代码：

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();

    var offsetX = Math.abs((topLeft.getX() + bottomRight.getX() + 10) / 2);
    var offsetY = Math.abs((topLeft.getY() + bottomRight.getY() + 10) / 2);

    // update anchor positions
    switch (activeAnchor.getName()) {
        case 'rotateAnchor':
            //group.setOffset(offsetX, offsetY);
            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;        
    }
    rotateAnchor.setX(topRight.getX() + 5);
    rotateAnchor.setY(topRight.getY() + 20);

    image.setPosition((topLeft.getPosition().x + 20), (topLeft.getPosition().y + 20));
    var width = topRight.getX() - topLeft.getX() - 30;
    var height = bottomLeft.getY() - topLeft.getY() - 30;
    if (width && height) {
        image.setSize(width, height);
    }
}
4

3 回答 3

2 
  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);

检查下面的 JSfiddle 链接，

http://jsfiddle.net/Qnil/XR7vL/

于 2014-07-28T10:49:21.113 回答
2 
        /*
         * move center point to the center
         * of the shape with offset
         * eg:
         */
        var yellowRect = new Kinetic.Rect({
          x: 220, //top left cornerX
          y: 75,  //top left cornerY
          width: 100,
          height: 50,
          stroke: 'black',
          strokeWidth: 4,
          **offset: [50, 25]**
        });

参考：http ://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-rotation-animation-tutorial/

于 2013-10-10T23:01:51.017 回答
0

使用此语法进行偏移：

    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!
    });
于 2014-06-10T09:14:13.000 回答