Convert (move / scale / rotate) with KineticJS

Question

I am trying to create a transformation manager for KineticJS that will create a bounding box and allow users to scale, move and rotate the image on their canvas. I worked with the logic for the control points.

http://jsfiddle.net/mharrisn/whK2M/

I just want the user to be able to scale the image proportionally from any angle, and also rotate the anchor point as a holding snap.

Can anyone point me in the right direction?

Thanks!

Answer 1

Here is the proof of the rotational control concept I made: http://codepen.io/ArtemGr/pen/ociAD

While moving the control, dragBoundFunc is used to rotate the content next to 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 }) 

Answer 2

I am doing the same thing and I asked a question that is allmoast the same, but I found a link where you have resizing and moving the finished tool. So I used the same thing. However, it does not contain a rotation tool, but it can be a good start for you, it is very simple and logical. Here is the link: http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/

I will be back with the rotation tool if I manage to get it to work perfectly.

Answer 3

I hope it’s not too late to post this piece of code that I did. I had the same problem with you guys dealing with this task. It has been 3 days since I tried so many workarounds to mimic the capabilities of the frameworkjs framework when working with images and objects. I could use Fabricjs, although it seems that Kineticjs is faster / more consistent with html5.

Fortunately, we already have a plugin / tool that we could easily implement with kineticjs, and this is the jQuery Transform tool. SUPER THANKS TO THE AUTHOR OF THIS! Just do a Google search and download it.

I hope that the code below that I created will help many developers who pull their hair to solve this problem.

$ (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, name:'objectInCanvas', id:'objectCanvas', fill: 'green' }); //ADD LAYER AND TEXT ON STAGE _layer.add(simpleText); _stage.add(_layer); _stage.draw(); //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 removeTransformToolSelection(); // 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 $(ishape).transformTool('show'); ishape.getParent().moveToTop(); _layer.draw(); }); 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 ) { $(child).transformTool('hide'); }); } //Event listener/Callback when selecting image using file upload element function handleFileSelect(evt) { //Remove all objects' transform tool inside the stage removeTransformToolSelection(); //Create image object for selected file var imageObj = new Image(); imageObj.onload = function() { var myImage = new Kinetic.Image({ x: 0, y: 0, image: imageObj, name:'objectInCanvas', draggable:false, id:'id_' }); //Add to layer and add transform tool _layer.add(myImage); $(myImage).transformTool(); _layer.draw(); } //Adding source to Image object. var f = document.getElementById('files').files[0]; var name = f.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); });