Question

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

hasRotatingPoint: false

我实际上是想将其应用于整个画布，因此，如果我单击并拖动以选择多个元素并创建一个组，我也想将hasRotatingPoint: false应用于那里。

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

如何为组禁用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 {
  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

我遇到了同样的问题，由于未应用设置hasRotatingPoint的值，因此Group类中存在一种错误。

以上答案仅适用于Group实例。

但是我通过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>

如何禁用组上的旋转点？

2 个答案: