Как отключить точку поворота на группе? - PullRequest
Новая
       10

Как отключить точку поворота на группе?

0 голосов
/ 26 ноября 2018

У меня есть несколько элементов на холсте, и у них нет точки вращения 

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 Ответ

0 голосов
/ 26 ноября 2018

Всякий раз, когда создается новый 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 неисключение) распространяются из него.

...