Wie kann das Bild um den Mittelpunkt herum gedreht werden, unter Verwendung von Kineticjs?

Question

Ich habe es geschafft, eine Art Rotation zu bekommen, indem ich den Code im jsFiddle verwendet habe, aber wie rotiere ich das Bild um den Mittelpunkt? Ist dies ein geeigneter Anker für eine solche Rotation?

Ich habe auch keine guten Tutorials gefunden, und dies hat auch nicht viel geholfen. Referenzen sind sehr willkommen.

---

Hier ist meine update-Funktion, die die Rotation durchführt, aber bitte sehen Sie sich den Rest des Codes im Fiddle an:

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

Answer 1

        /*
         * Verschieben Sie den Mittelpunkt in die Mitte
         * der Form mit Versatz
         * z.B.:
         */
        var yellowRect = new Kinetic.Rect({
          x: 220, //obere linke EckeX
          y: 75,  //obere linke EckeY
          width: 100,
          height: 50,
          stroke: 'black',
          strokeWidth: 4,
          **offset: [50, 25]**
        });

Referenz: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-rotation-animation-tutorial/

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

Überprüfen Sie untenstehenden JSfiddle-Link:

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

Answer 3

Verwenden Sie diese Syntax für Offset:

    var yellowRect = new Kinetic.Rect({
      x: 220, //obere linke Ecke X
      y: 75,  //obere linke Ecke Y
      width: 100,
      height: 50,
      stroke: 'schwarz',
      strokeWidth: 4,
      offset: {x:50, y:25}       // hier!
    });