CODEWITHSUNDEEP
fabricjs
ps0604
ps0604

Reputation: 1071

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'
});

Upvotes: 6

Views: 7104

Answers (4)

Luke.Sun
Luke.Sun

Reputation: 21

Disabling rotation on objects sometimes is not enough. People can still select multiple objects and the rotation control point shows again. You may also want to disable the group rotation

fabric.Group.prototype._controlsVisibility = {
    tl: true,
    tr: true,
    br: true,
    bl: true,
    ml: false,
    mt: false,
    mr: false,
    mb: false,
    mtr: false
};

Upvotes: 0

Yogesh Yadav
Yogesh Yadav

Reputation: 863

Use setControlsVisibility, it works with all object type of fabricjs

fabric.Image.fromURL(src, (img) => {
      var oImg = img.set({
        left: 0,
        top: 0,
      })
      oImg.setControlsVisibility({ mtr: false })
      canvas.add(oImg)
      canvas.setActiveObject(oImg)
      canvas.renderAll()

    }



let newtext = new fabric.Textbox(text, {
      left: 0,
      top: 0,
      originX: 'center',
      originY: 'center',
      fontFamily: 'Inter',
      fill: '#fff',
      textAlign: 'center',}
      )
      newtext.setControlsVisibility({ mtr: false })
      canvas.add(newtext)
      canvas.setActiveObject(newtext)
      canvas.renderAll()

Upvotes: 6

Ben
Ben

Reputation: 659

The accepted answer is no longer valid with Fabricjs versions from 4.0 (see changelog). hasRotatingPoint has been removed in favor of a more comprehensive controls api, although the documentation for it is still very slim.

To hide a certain control from a specific object, you have to redefine its controls property. Here is how you would hide the mtr control (Rotate):

text.controls = {
    ...fabric.Text.prototype.controls,
    mtr: new fabric.Control({ visible: false })
}


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,
    stroke: 'black',
    fill: 'black'
});
text.controls = {
    ...fabric.Text.prototype.controls,
    mtr: new fabric.Control({ visible: false })
}

canvas.add(text);
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="300" height="300"></canvas>

Here we create a new controls object using the default ones for Text but redefining the mtr set.

Upvotes: 17

Durga
Durga

Reputation: 15604

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>

Upvotes: 8

Related Questions