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 Rodriguezposted
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:
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.
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
Richard Rodriguez posted over 5 years ago Best Answer
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:
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
Richard Rodriguez posted over 5 years ago Answer
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:
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