Блог

В настоящее время я создаю редактор и динамически создаю масштабируемые строки. Затем цель состоит в том, чтобы иметь возможность плавно изменять размер/перетаскивать.

Вдохновение почерпнуто из слайдов

Вот мой текущий прототип прототипа Стекблитца

Перетаскивание — я решил с помощью перетаскивания из CDK, добавив расчет масштаба в onDragEnded

Мои текущие проблемы:

1. Как вы можете видеть, в настоящее время мои расчеты и мысленная модель того, как это должно работать, плохи — в какой-то момент я теряю связь. Можете ли вы посоветовать, чего мне не хватает? (может быть, у моих сменщиков плохая позиция)
2. Я не уверен, правильно ли я рисую эту стрелку в SVG?
3. Я не уверен, следует ли мне использовать viewBox?

Может быть, для этого есть библиотека, о которой я не знаю. Заранее спасибо.

Я считаю, что суть вашей проблемы коренится в ваших p1 расчетах и p2 расчетах… по сути, расчет никогда не позволяет осям достигать 0 , что создает смещение для следующей итерации расчета.

Ниже описан грубый POC, чтобы обеспечить обработку этого смещения… но… вероятно, существует более элегантный способ написания этого алгоритма.

Этот POC, по крайней мере, продемонстрирует концепцию.

 if (this.dragPointActive === 'p1') {
    if (block.x2 - block.x1 < 0) {
      // if x2 hasn't reached 0
      // use current x2 value to complete left calc
      if (block.x2 < 0) {
        block.left  = block.x2;
        block.x2 = 0;
      }
      block.x1  = deltaX;
    } else {
      block.x2 -= deltaX;
      block.left  = deltaX;
      // if x1 hasn't reached 0
      if (block.x1 < 0) {
        block.x1 = 0;
      }
    }

    if (block.y2 - block.y1 < 0) {
      // if y2 hasn't reached 0
      // use current y2 value to complete left calc
      if (block.y2 < 0) {
        block.top  = block.y2;
        block.y2 = 0;
      }
      block.y1  = deltaY;
    } else {
      block.y2 -= deltaY;
      block.top  = deltaY;
      // if y1 hasn't reached 0
      if (block.y1 < 0) {
        block.y1 = 0;
      }
    }
  } else if (this.dragPointActive === 'p2') {
    if (block.x2 - block.x1 < 0) {
      block.x1 -= deltaX;
      block.left  = deltaX;
      // if x2 hasn't reached 0
      if (block.x2 < 0) {
        block.x2 = 0;
      }
    } else {
      // if x1 hasn't reached 0
      // use current x1 value to complete left calc
      if (block.x1 < 0) {
        block.left  = block.x1;
        block.x1 = 0;
      }
      block.x2  = deltaX;
    }

    if (block.y2 - block.y1 < 0) {
      block.y1 -= deltaY;
      block.top  = deltaY;
      // if y2 hasn't reached 0
      if (block.y2 < 0) {
        block.y2 = 0;
      }
    } else {
      // if y1 hasn't reached 0
      // use current y1 value to complete top calc
      if (block.y1 < 0) {
        block.top  = block.y1;
        block.y1 = 0;
      }
      block.y2  = deltaY;
    }
  }
 

СТАКБЛИТЦ

https://stackblitz.com/edit/angular-ivy-davn1v?file=src/app/app.component.ts