Конфликт между getBoundingClientRect и положением Relative - PullRequest
Новая
       8

Конфликт между getBoundingClientRect и положением Relative

0 голосов
/ 23 июня 2019

В моем коде Javascript у меня есть эта переменная: let rect = this.canvas.getBoundingClientRect ();

Эта переменная необходима для отображения Canvas в модальном режиме.

Но намоя HTML-страница, у меня есть слайдер (диапорама) с относительным положением.И так как у меня есть это относительное положение, мой холст не отображается в моем mdodal.

CSS для моей диапорамы: 

#diaporama {
    position: relative;

}

Часть моего JavaScript с getBoundingClientRect: 

class Signature {
  constructor() {
    this.color = "#000000";
    this.sign = false;
    this.begin_sign = false;
    this.width_line = 5;
    this.canvas = document.getElementById('canvas');
    this.offsetLeft = this.canvas.offsetLeft;
    this.offsetTop = this.canvas.offsetTop;
    this.context = canvas.getContext('2d');
    this.context.lineJoin = 'round';
    this.context.lineCap = 'round';
    this.whenMouseDown();
    this.whenMouseUp();
    this.whenMouseMove();
    this.createSignature();
    this.clearCanvas();
    this.resetCanvas();
  }

  updateMousePosition(mX, mY) {
    let rect = this.canvas.getBoundingClientRect();
    let scaleX = this.canvas.width / rect.width;
    let scaleY = this.canvas.height / rect.height;
    this.cursorX = (mX - rect.left) * scaleX;
    this.cursorY = (mY - rect.top) * scaleY;
  }

Вы можете увидеть HTML-страницу здесь: http://p4547.phpnet.org/bikes/index.html

Как я могу сохранить свою позицию относительно и заставить работать мой холст Signature?

1 Ответ

0 голосов
/ 24 июня 2019

Проблема решена.

Я отредактировал код JS следующим образом: 

    updateMousePosition(mX, mY) {
        let rect = this.canvas.getBoundingClientRect(); // renvoie la taille d'un élément et sa position relative par rapport à la zone d'affichage (viewport)
        let left   = rect.left   + window.scrollX;
      let top    = rect.top    + window.scrollY;
        let scaleX = this.canvas.width / rect.width;
        let scaleY = this.canvas.height / rect.height;
        this.cursorX = (mX - left) * scaleX;
        this.cursorY = (mY - top) * scaleY;
    }
...