i want to rotate image in center point only of the image and rotation tools stick on top left to image

Question

i'm using Kineticjs to make tools in canvas to resize it or rotate but when i try to rotate it tool drag away of it and image have a wrong rotate chick the link of my code

http://jsfiddle.net/vipmaa/qFmsM/3/

$(document).ready(function(){    
function randomInt(min,max){
        return Math.floor(Math.random()*(max-(min+1))+(min+1));
    }
//try to use
    var stage = new Kinetic.Stage({
        container: 'stage',
        width: 500,
        height: 450,
        offsetX:30,
        offsetY:30
    });
function update(activeAnchor) {
        var group = activeAnchor.getParent();

        var RotateSign = group.get('.RotateSign')[0];
        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 mask = group.get('.mask')[0];

        var anchorX = activeAnchor.getX();
        var anchorY = activeAnchor.getY();

        // update anchor positions
        switch (activeAnchor.getName()) {
            case 'RotateSign':
                var radius = mask.getWidth() * mask.getScale().x + 55;
                group.rotate(radius);

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

        mask.setPosition(topLeft.getPosition());

        var width = topRight.getX() - topLeft.getX();
        var height = bottomLeft.getY() - topLeft.getY();
        if (width && height && (width > 1 && height > 1)) {
            mask.setSize(width, height);
        }
    }

function addAnchor(group, x, y, name) {
        var layer = group.getLayer();
        var anchor = new Kinetic.Circle({
            x: x,
            y: y,
            stroke: '#666',
            fill: '#ddd',
            strokeWidth: 2,
            radius: 8,
            name: name,
            draggable: true,
            dragOnTop: false
        });

        anchor.on('dragmove', function () {
            update(this);
            layer.draw();
        });
        anchor.on('mousedown touchstart', function () {
            group.setDraggable(false);
            this.moveToTop();
        });
        anchor.on('dragend', function () {
            group.setDraggable(true);
            layer.draw();
            update(this);
        });
        // add hover styling
        anchor.on('mouseover', function () {
            var layer = this.getLayer();
            document.body.style.cursor = 'pointer';
            this.setStrokeWidth(4);
            layer.draw();
        });
        anchor.on('mouseout', function () {
            var layer = this.getLayer();
            document.body.style.cursor = 'default';
            this.setStrokeWidth(2);
            layer.draw();
        });

        group.add(anchor);
        if(name == 'topLeft'){
            anchor.hide();
        }
    }
function init(){
  var rand = Math.ceil(Math.random() * 100087600);
        var id = $(this).attr('data-name')+'_'+rand;
        var config = {
            id : 'canvas_'+id,
            draggable:true,
            name: 'art'
        }
        var x =randomInt(0,100);
        var y =randomInt(0,100);

        var artGroup = new Kinetic.Group({
            x: x,
            y: y,
            name:'Group',
            draggable: true
        });
        var layer = new Kinetic.Layer(config);
        var imageObj = new Image();
        imageObj.onload = function() {

            var yoda = new Kinetic.Image({
              x: x,
              y: y,
              image: imageObj,
              width: imageObj.width,
              height: imageObj.height,
              name: 'mask',
            });
            // add the shape to the layer
            artGroup.add(yoda);
            layer.add(artGroup);
            // add the layer to the stage
            stage.add(layer);

            addAnchor(artGroup, x, y, 'topLeft');// it will be hide
            addAnchor(artGroup, (x + imageObj.width), y, 'topRight');
            addAnchor(artGroup, (x + imageObj.width), (y + imageObj.height), 'bottomRight');
            addAnchor(artGroup, x, (y + imageObj.height), 'bottomLeft');

            //Start add rotation tools
            var sign = new Kinetic.Path({
                name:'RotateSign',
                x: x, y: y,
                // Path from http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-path-tutorial/
                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: 0.4, fill: 'black',
                offset:25,
                dragOnTop: false,
                draggable: true
              });
            sign.on('dragmove', function () {
                update(this);
                layer.draw();
            });
            sign.on('mousedown touchstart', function () {
                //artGroup.setDraggable(false);
                //this.moveToTop();
            });
            sign.on('dragend', function () {
                //artGroup.setDraggable(true);
                layer.draw();
                update(this);
            });
            artGroup.add (sign);
            //End add rotation tools
            artGroup.on('dragstart', function () {
                this.moveToTop();
            });
            artGroup.on('dragmove', function() {
                var img = layer.get('.mask');
            });
            layer.on('mouseover', function () {
                document.body.style.cursor = 'pointer';
            });
            layer.on('mouseout', function () {
                document.body.style.cursor = 'default';
            });
            stage.draw();  
            };
        imageObj.src = "http://www.w3schools.com/images/w3logotest2.png";
   };
init();});

i want to rotate around image and tool stick in image can you know what is wrong in the code

Answer 1

You can go through the below,

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

Check http://jsfiddle.net/Qnil/XR7vL/ KineticJS is best to handle rotate image and stuff.

Answer 2

i found new canvas library (Fabric.js) it is solve all things i ask before

you can see blow link Fabric JS

You can see different in rendering time

fabricjs vs kineticjs