Перетаскивание с масштабированием пальцем не работает должным образом

Question

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

Я подробно описал проблему здесь:https://stackblitz.com/edit/angular-t7hwqg

Я ожидаю, что перетаскивание будет работать одинаково независимо от увеличения. Я видел в версии 8 материала angular, что они добавили @Input('cdkDragConstrainPosition') constrainPosition: (point: Point, dragRef: DragRef) => Point, который решит мою проблему, поскольку в режиме увеличения я могу написать собственную логику для правильно сопоставьте перетаскивание с помощью указателя, но я не могу выполнить обновление до версии 8, поскольку есть другие части приложения с версией 7.

Итак, если кто-то может подсказать, что можно сделать? Либо каким-то образом перетаскивание можно изменить и учесть текущее масштабирование, либо я могу взять cdkDragConstrainPosition из 8 версии материала и интегрировать его в мои текущие пакеты.

Answer 1

Мне пришлось вручную вычислить обновленные координаты примерно так:

Здесь imageHeight - это ширина / высота элемента DOM, а высота - это фактическая высота изображения, которое было загружено в элемент DOM.item - это перемещаемый элемент DOM.

this.zoomFactorY = this.imageHeight / this.height;
this.zoomFactorX = this.imageWidth / this.width;

// to be called at every position update
const curTransform = this.item.nativeElement.style.transform.substring(12,
                         this.item.nativeElement.style.transform.length - 1).split(',');
const leftChange = parseFloat(curTransform[0]);
const topChange = parseFloat(curTransform[1]);

а затем обновите расположение элемента DOM:

item.location.left = Math.trunc(
  item.location.left + leftChange * (1 / this.zoomFactorX)
);
item.location.top = Math.trunc(
  item.location.top + topChange * (1 / this.zoomFactorY)
);