#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 Я думаю, что это положение мыши