Search code examples
fabricjs

Getting rid of rotation control in Fabric.js


In this jsfiddle I have a Fabric.js text created with lockRotation: true to avoid rotation. The line disappeared, but the box control to rotate is still there, how to get rid of it?

HTML

<canvas id="c" width="300" height="300"></canvas>

Javascript

var canvas = new fabric.Canvas('c');

var text = new fabric.IText('This is the text',{
    left: 50,
    top: 50,
    fontFamily: 'Arial',
    fontWeight: 'normal',
    fontSize: 18,
    lockRotation: true,
    stroke: 'black',
    fill: 'black'
});

Solution

  • Use object.hasRotatingPoint = false; to hide rotating point.

    var canvas = new fabric.Canvas('c');
    var text = new fabric.IText('This is the text',{
        left: 50,
        top: 50,
        fontFamily: 'Arial',
        fontWeight: 'normal',
        fontSize: 18,
        hasRotatingPoint: false,
        stroke: 'black',
        fill: 'black'
    });
    
    canvas.add(text);
    <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
    <canvas id="c" width="300" height="300"></canvas>