Получить координаты изображения lx, rx, ty, by с холста

#javascript #angular #canvas #coordinates

Вопрос:

Я пытаюсь создать изображение перетаскивания в PDF-документе, получить координаты, а затем использовать эти координаты для подписи документа.

У меня есть сценарий, как на картинке ниже:

Образец изображения

Теперь мне нужно получить координаты left x right x top y bottom y ( lx rx ty by ) и преобразовать их в точки PDF.

До сих пор я пытался, как показано ниже:

           const rect = canvas.getBoundingClientRect();

          const x = e.client.x - rect.left;
          const y = e.client.y - rect.top;

          const ptX = x * 0.75;
          const ptY = y * 0.75;
          
          this.coordinates = { x: ptX, y: ptY };
 

однако это только получить lx и ty как я могу получить rx и by

Я использую interact.js в качестве библиотеки для перетаскивания и создал этот стекблитц в качестве примера того, что я делаю

https://stackblitz.com/edit/angular-ivy-ekxpyh?file=src/app/interact.service.ts

Спасибо

Ответ №1:

Я не уверен, что это за client объект здесь, но если это DOMRect или что-то в этом роде

 const rect = canvas.getBoundingClientRect();

const left_x = e.client.left - rect.left;
const top_y = e.client.top - rect.top;
const right_x = e.client.right - rect.left;
const bottom_y = e.client.bottom - rect.top;

 

или даже

 const right_x = left_x   e.client.width;
const bottom_y = top_y   e.client.height;
 

Комментарии:

1. Спасибо за ваш ответ, я добавил stackblitz и еще несколько описаний к моему вопросу о том, что является клиентом в данном случае. Клиент — это событие, которое исходит от interact.js Я думаю, что это положение мыши