Transform (Move/Scale/Rotate) shapes with KineticJS

I'm trying to build a transform manager for KineticJS that would build a bounding box and allow users to scale, move, and rotate an image on their canvas. I'm getting tripped up with the logic for the anchor points.

I just want to allow a user to scale their image proportionally from any corner, and also rotate as the hold-drag an anchor point.

Can anyone help point me in the right direction?

Thank you!



Here is a proof of concept of a rotational control I've made:

While the control is dragged around, the dragBoundFunc is used to rotate the content alongside it:

controlGroup.setDragBoundFunc (function (pos) {
  var groupPos = group.getPosition()
  var rotation = degrees (angle (groupPos.x, groupPos.y, pos.x, pos.y))
  status.setText ('x: ' + pos.x + '; y: ' + pos.y + '; rotation: ' + rotation); layer.draw()
  group.setRotationDeg (rotation); layer.draw()
  return pos

I am doing the same thing, and I've posted a question which is allmoast the same, but I found a link where you have the resize and move tool ready developed. So I have used the same. It does not contain the rotate tool however, but this can be a good start for you too, it is very simple and logical. Here is the link:

I will come back with the rotation tool as well if I manage to get it working perfectly.


I hope I am not late yet for posting this code snippet that I made. I had the same problem with you guys dealing with this kind of task. Its been 3 days since I tried so many workarounds to mimic the fabricjs framework capability when dealing with images and objects. I could use Fabricjs though but it seems that Kineticjs is more faster/consistent to deal with html5.

Luckily, we already have existing plugin/tool that we could easily implement together with kineticjs and this is jQuery Transform tool. SUPER THANKS TO THE AUTHOR OF THIS! Just search this on google and download it.

I hope the code below that I created would help lots of developers out there who is pulling their hair off to solve this kind of assignment.

$(function() {

    //Declare components STAGE, LAYER and TEXT
    var _stage = null;
    var _layer = null;
    var simpleText = null;
    _stage = new Kinetic.Stage({
        container: 'canvas',
        width: 640,
        height: 480
    _layer = new Kinetic.Layer();

    simpleText = new Kinetic.Text({
            x: 60,
            y: 55,
            text: 'Simple Text',
            fontSize: 30,
            fontFamily: 'Calbiri',
            draggable: false,
            fill: 'green' 

    //Add onclick event listener to the Stage to remove and add transform tool to the object 
    _stage.on('click', function(evt) {

        //Remove all objects' transform tool inside the stage 

        // get the shape that was clicked on
        ishape = evt.targetNode;

        //Add and show again the transform tool to the selected object and update the stage layer


    function removeTransformToolSelection(){
        //Search all objects inside the stage or layer who has the name of "objectInCanvas" using jQuery iterator and hide the transform tool. 
        $.each(_stage.find('.objectInCanvas'), function( i, child ) {

    //Event listener/Callback when selecting image using file upload element
    function handleFileSelect(evt) {

           //Remove all objects' transform tool inside the stage 

           //Create image object for selected file
           var imageObj = new Image();
           imageObj.onload = function() {
                    var myImage = new Kinetic.Image({
                    x: 0,
                    y: 0,
                    image: imageObj,
             //Add to layer and add transform tool


          //Adding source to Image object.
          var f = document.getElementById('files').files[0];
          var name =;
          var url = window.URL;
          var src = url.createObjectURL(f);
          imageObj.src = src;
    //Attach event listener to FILE element
    document.getElementById('files').addEventListener('change', handleFileSelect, false);



Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.