Rotate lock so it only rotates in 90 degrees? : radykal

Start a new topic

Answered

Rotate lock so it only rotates in 90 degrees?

Richard Rodriguez

started a topic almost 6 years ago

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

Best Answer

Richard Rodriguez said almost 6 years ago

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 Comment

Richard Rodriguez

said almost 6 years ago

Answer

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)

For which product do you need support?