CODEWITHSUNDEEP
javascriptfabricjsfabricjs2
BrunoLM
BrunoLM

Reputation: 100322

How to disable rotating point on a group?

I have some elements in my canvas and they don't have a rotating point

hasRotatingPoint: false

I actually want to apply it for the entire canvas, so if I click & drag to select multiple elements and create a group I want hasRotatingPoint: false to be applied there as well.

In the example bellow it works when I select a single element, but it doesn't disable the point when I create a group.

How can I disable hasRotatingPoint for groups? (Or the entire canvas)

var fabric = window.fabric
var canvas = new fabric.Canvas('canvas', {})

var opts = {
  hasRotatingPoint: false,
  left: 10,
}
canvas.add(new fabric.Textbox('blahblah', { ...opts, top: 60 }))
canvas.add(new fabric.Textbox('blahblah', { ...opts, top: 100 }))

canvas.setWidth(300)
canvas.setHeight(200)
canvas {
  border: 1px dashed red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.4/fabric.min.js"></script>

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

Upvotes: 0

Views: 2280

Answers (2)

Angel Fraga Parodi
Angel Fraga Parodi

Reputation: 790

I was facing the same issue, there is a kind of bug in the Group class because of setting hasRotatingPoint value doesn't get applied.

The answer above only will work for not Group instances.

But I have achieved it thanks to setControlsVisibility method.

http://fabricjs.com/docs/fabric.Group.html#setControlsVisibility

Here an example for a Group instance.

const canvas = new fabric.Canvas('canvas', {})

const rectangle = new fabric.Rect({
  stroke: "red",
  strokeWidth: 1,
  height: 100,
  width: 50,
  fill: "rgba(0,0,0,0)"
});


const label = new fabric.Text('label', {
 fontSize: 15
});

const group = new fabric.Group([rectangle, label] ,{
   left: 50,
   top: 50
});

group.setControlsVisibility({ mtr: false });

canvas.add(group);
canvas {
  border: 1px dashed red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.4/fabric.min.js"></script>

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

Upvotes: 1

shkaper
shkaper

Reputation: 4988

Whenever a new ActiveSelection is created, fabric.Canvas fires a selection:created event with the instance of fabric.ActiveSelection attached to it as target. So you can listen to this event and change the selection's hasRotatingPoint accordingly.

To cover the case when a user selects one object then adds another one to the selection via Shift+click, you should also listen to selection:updated event, as this will reset hasRotatingPoint to default.

var fabric = window.fabric
var canvas = new fabric.Canvas('canvas', {})

var opts = {
  hasRotatingPoint: false,
  left: 10,
}
canvas.add(new fabric.Textbox('blahblah', { ...opts, top: 60 }))
canvas.add(new fabric.Textbox('blahblah', { ...opts, top: 100 }))

canvas.setWidth(300)
canvas.setHeight(200)

canvas.on('selection:created', function (e) {
  const activeSelection = e.target
  activeSelection.set({hasRotatingPoint: false})
})

// fired e.g. when you select one object first,
// then add another via shift+click
canvas.on('selection:updated', function (e) {
  const activeSelection = e.target
  if (activeSelection.hasRotatingPoint) {
    activeSelection.set({hasRotatingPoint: false})
  }
})
canvas {
  border: 1px dashed red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.4/fabric.min.js"></script>

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

If you want to make it a default behavior for all objects, you can patch fabric.Object prototype, since all objects (ActiveSelection not being an exception) are extended from it.

fabric.Object.prototype.hasRotatingPoint = false
canvas.add(new fabric.Textbox('blahblah')
//...

Upvotes: 2

Related Questions