Конва js: Как изменить положение группы текстов - PullRequest
Новая
       35

Конва js: Как изменить положение группы текстов

0 голосов
/ 01 апреля 2020

Я использую Konva js, у меня есть группа текстов, и я хочу не разрешать перетаскивать группу за пределы холста, я пытался решить, что с помощью dragBoundFun c, но это не помогает мне, теперь я просто пытаюсь изменить положение группы во время перетаскивания, но setPosition, setAbsloutePosition, ничто не позволяет мне изменить положение группы 

stage.on('dragmove', (e) => stageOnDragMove(e, layer));
const stageOnDragMove = (e: Konva.KonvaEventObject<any>, layer: Konva.Layer) => {

    const selectionGroup = layer.findOne('#selection-group');
    const transformer = layer.findOne<Konva.Transformer>('Transformer');

    if (selectionGroup?.hasName('text-group')) {
        const pos = selectionGroup.getClientRect({});

        if (pos.x <= 0 || pos.y <= 0) {
            selectionGroup.setAbsolutePosition({
                x: 0,
                y: 0
            });
            layer.draw();
        }
    }

    transformer.attachTo(selectionGroup);
};

1 Ответ

1 голос
/ 02 апреля 2020

Вы можете использовать эту функцию для ограничения функции перетаскивания и изменения размера и ограничения ее границ: 

shape.on('dragmove transform', () => {
  const box = shape.getClientRect();
  const absPos = shape.getAbsolutePosition();
  const offsetX = box.x - absPos.x;
  const offsetY = box.y - absPos.y;

  const newAbsPos = {...absPos}
  if (box.x < 0) {
    newAbsPos.x = -offsetX;
  }
  if (box.y < 0) {
    newAbsPos.y = -offsetY;
  }
  if (box.x + box.width > stage.width()) {
    newAbsPos.x = stage.width() - box.width - offsetX;
  }
  if (box.y + box.height > stage.height()) {
    newAbsPos.y = stage.height() - box.height - offsetY;
  }
  shape.setAbsolutePosition(newAbsPos)
})

Демо: https://jsbin.com/rofupicupu/edit?html, js, вывод

...