代码之家 › 专栏 › 技术社区 › BrunoLM

如何禁用组上的旋转点?

fabricjs2 fabricjs javascript

0

BrunoLM · 技术社区 · 6 年前

我的画布上有一些元素,它们没有旋转点

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>

1 回复 | 直到 6 年前

1

shkaper 6 年前

每当新 ActiveSelection 被创建, fabric.Canvas 开火 selection:created 实例为的事件 fabric.ActiveSelection 作为 target . 因此,您可以收听此事件并更改所选内容的 hasRotatingPoint 因此。

当用户选择一个对象,然后通过 Shift+click ,你也应该听 selection:updated 事件,因为这将重置 有旋转点 违约。

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 原型,因为所有对象( 活动选择 不是例外)从中扩展。

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