0

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

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>

4

2 回答 2

2

每当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')
//...
于 2018-11-26T18:28:29.977 回答
1

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>

于 2020-02-25T10:13:23.273 回答