如何禁用组上的旋转点？

Question

我的 canvas 中有一些元素，它们没有旋转点

hasRotatingPoint: false

我实际上想将它应用到整个 canvas，所以如果我单击并拖动到 select 多个元素并创建一个组，我希望 hasRotatingPoint: false 应用到那里作为嗯。

在下面的示例中，当我 select 单个元素时它可以工作，但它不会在我创建组时禁用该点。

如何为群组禁用 hasRotatingPoint？（或整个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>

Answer 1

每当创建新的 ActiveSelection 时，fabric.Canvas 都会触发一个 selection:created 事件，并附加 fabric.ActiveSelection 的实例作为 target。因此，您可以收听此事件并相应地更改选择的 hasRotatingPoint。

为了涵盖用户选择一个对象然后通过 Shift+click 添加另一个对象到选择中的情况，您还应该监听 selection:updated 事件，因为这将重置 hasRotatingPoint默认。

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>

如果你想让它成为所有对象的默认行为，你可以修补 fabric.Object 原型，因为所有对象（ActiveSelection 不是例外）都是从它扩展的。

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

Answer 2

我遇到了同样的问题，组 class 中存在一种错误，因为设置 hasRotatingPoint 值没有得到应用。

以上答案仅适用于非组实例。

但是多亏了setControlsVisibility方法我做到了。

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

这里是 Group 实例的示例。

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>

如何禁用组上的旋转点？

How to disable rotating point on a group?

javascript

fabricjs

fabricjs2