Rotate lock so it only rotates in 90 degrees?

Posted over 5 years ago by Richard Rodriguez

Post a topic
Answered
R
Richard Rodriguez

 Is there a way or option where I can make sure that custom images be rotated but only in 90 degrees rather than freehand?

0 Votes

R

Richard Rodriguez posted over 5 years ago Best Answer

Ok, I found out how to do it. In case anyone else needs it, here is what I did. Check this example:

http://jsfiddle.net/Outrageous/a50nrcv0/

If you check it out, you will see that, if you rotate the text, it will just rotate 90 degrees instead of free hand. The code you need is this one:
fabric.Object.prototype.set({
    snapThreshold: 45,
    snapAngle: x
});

 Where "x" is the degrees you want to lock it to. You will need to add this before the first call where the canvas is instantiated. So go to your FancyProductDesigner-all.js and look for this:

instance.stage = new fabric.Canvas(canvas, canvasOptions)

 The very first instance of that, you will have to add the code I mentioned previously right above that call. NOTE: Remember that the plugin uses the minified version by default(FancyProductDesigner-all.min.js), so you will have to either minify FancyProductDesigner-all.js and then copy/paste the code in there, or copy/paste the full code. Hope this helps anyone with this same dilemma.

 

1 Votes


1 Comments

R

Richard Rodriguez posted over 5 years ago Answer

Ok, I found out how to do it. In case anyone else needs it, here is what I did. Check this example:

http://jsfiddle.net/Outrageous/a50nrcv0/

If you check it out, you will see that, if you rotate the text, it will just rotate 90 degrees instead of free hand. The code you need is this one:
fabric.Object.prototype.set({
    snapThreshold: 45,
    snapAngle: x
});

 Where "x" is the degrees you want to lock it to. You will need to add this before the first call where the canvas is instantiated. So go to your FancyProductDesigner-all.js and look for this:

instance.stage = new fabric.Canvas(canvas, canvasOptions)

 The very first instance of that, you will have to add the code I mentioned previously right above that call. NOTE: Remember that the plugin uses the minified version by default(FancyProductDesigner-all.min.js), so you will have to either minify FancyProductDesigner-all.js and then copy/paste the code in there, or copy/paste the full code. Hope this helps anyone with this same dilemma.

 

1 Votes

Login or Sign up to post a comment