В настоящее время я реализую функцию размещения холста поверх pdf в pdf-reader, чтобы мы могли рисовать поверх холста, чтобы pdf, в котором размещен холст, можно было увеличивать и уменьшать в значительной степени, и яНеобходимо убедиться, что холст также должен изменить размер в соответствии с PDF, чтобы рисунок поверх него оставался нетронутым, для изменения размера холста я использую canvas.style.width , drawing.style.height чтобы изменить его размер при pdf-resizes.
Но теперь меня беспокоит то, что при изменении размера указатель мыши меняет свое положение, например, на прикрепленном изображении моя мышь находится внизу справа, и она рисует сверху-влево, из-за смещения координат мыши.
Я использую RxJS для рисования и захвата событий, но я не могу понятьКак позаботиться о положении мыши в итоге, я хочу, чтобы координаты масштабировались в соответствии с изменением размера холста.
private captureEvents(canvasEl: HTMLCanvasElement) {
// this will capture all mousedown events from the canvas element
this.drawingSubscription = fromEvent(canvasEl, 'mousedown')
.pipe(
switchMap((e) => {
// after a mouse down, we'll record all mouse moves
return fromEvent(canvasEl, 'mousemove')
.pipe(
// we'll stop (and unsubscribe) once the user releases the mouse
// this will trigger a 'mouseup' event
takeUntil(fromEvent(canvasEl, 'mouseup').do((event: WheelEvent) => {
console.log('e', e.type, e);
const prevPos = {
x: null,
y: null
};
this.coordinatesArray[this.file.current_slide - 1].push(prevPos);
console.log('coordinatesArray', this.coordinatesArray);
})),
// we'll also stop (and unsubscribe) once the mouse leaves the canvas (mouseleave event)
takeUntil(fromEvent(canvasEl, 'mouseleave')),
// pairwise lets us get the previous value to draw a line from
// the previous point to the current point
pairwise()
)
})
)
.subscribe((res: [MouseEvent, MouseEvent]) => {
const rect = canvasEl.getBoundingClientRect();
// previous and current position with the offset
const prevPos = {
x: res[0].clientX - rect.left,
y: res[0].clientY - rect.top
};
const currentPos = {
x: res[1].clientX - rect.left,
y: res[1].clientY - rect.top
};
this.coordinatesArray[this.file.current_slide - 1].push(prevPos);
// console.log('coordinatesArray', this.coordinatesArray);
this.drawOnCanvas(prevPos, currentPos);
});
}
Более того, я не генерирую новый холст при каждом увеличении / уменьшении, я простомодифицирующийэто высота / ширина согласно размерам страницы, поверх которой она присутствует.
