Отзывчиво изменяйте размеры холста при изменении размера экрана, не теряя отслеживания положения курсора - PullRequest
Новая
       23

Отзывчиво изменяйте размеры холста при изменении размера экрана, не теряя отслеживания положения курсора

0 голосов
/ 10 января 2019

У меня есть холст (#myCanvas_one) с отслеживанием позиции курсора внутри него. Строки, которые следуют за курсором, создаются с использованием .beginPath () и .rect (). Каждый раз, когда я пытаюсь адаптировать холст на странице или менять его положение, отслеживание курсора прерывается.

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

Я хочу, чтобы холст изменял размеры при изменении размера экрана, а отслеживание мыши не зависело от положения холста на странице.

Я пытаюсь создать адаптивную сетку.

введите описание изображения здесь 

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <style>
    canvas {
      border: #000 1.5px solid;
      margin-left: 8px;
      margin-right: 8px;
    }
  </style>
</head>

<body>
  <canvas id="myCanvas_one" width="174px" height="92px"></canvas>

  <script>
    var canvastwo = document.querySelector("#myCanvas_one");
    var contexttwo = canvastwo.getContext("2d");

    var canvasPostwo = getPosition(canvastwo);
    var mouseQ = 0;
    var mouseW = 0;

    canvastwo.addEventListener("mousemove", setMousePositiontwo, false);

    function setMousePositiontwo(r) {
      mouseQ = r.clientX - canvasPostwo.a;
      mouseW = r.clientY - canvasPostwo.b;
    }

    function updatetwo() {
      contexttwo.clearRect(0, 0, canvastwo.width, canvastwo.height);
      contexttwo.beginPath();
      contexttwo.lineWidth = "1.5";
      contexttwo.strokeStyle = "black";
      contexttwo.rect(mouseQ - 42, mouseW - 21, 84, 42);
      contexttwo.stroke();

      contexttwo.beginPath();
      contexttwo.moveTo(0, 0);
      contexttwo.lineTo(mouseQ - 42, mouseW - 21);
      contexttwo.stroke();

      contexttwo.beginPath();
      contexttwo.moveTo(0, 92);
      contexttwo.lineTo(mouseQ - 42, mouseW + 21);
      contexttwo.stroke();

      contexttwo.beginPath();
      contexttwo.moveTo(174, 0);
      contexttwo.lineTo(mouseQ + 42, mouseW - 21);
      contexttwo.stroke();

      contexttwo.beginPath();
      contexttwo.moveTo(174, 92);
      contexttwo.lineTo(mouseQ + 42, mouseW + 21);
      contexttwo.stroke();

      requestAnimationFrame(updatetwo);
    }

    updatetwo();

    function getPosition(qw) {
      var aPosition = 0;
      var bPosition = 0;

      while (qw) {
        aPosition += (qw.offsetLeft - qw.scrollLeft + qw.clientLeft);
        bPosition += (qw.offsetTop - qw.scrollTop + qw.clientTop);
        qw = qw.offsetParent;
      }
      return {
        a: aPosition,
        b: bPosition
      };
    }
  </script>
</body>

</html>

1 Ответ

0 голосов
/ 11 января 2019

Я устанавливаю размер вашего холста в Javascript вместо того, чтобы устанавливать его в html. Также я добавил несколько переменных, чтобы сделать ваш рисунок пропорциональным размеру окна. Надеюсь, это поможет. 

var canvastwo = document.querySelector("#myCanvas_one");
let cw = canvastwo.width=window.innerWidth;
let ch = canvastwo.height=window.innerHeight;

let W = cw/2,w=cw/4;H=ch/2,h=ch/4

    var contexttwo = canvastwo.getContext("2d");

    var canvasPostwo = getPosition(canvastwo);
    var mouseQ = 0;
    var mouseW = 0;

    canvastwo.addEventListener("mousemove", setMousePositiontwo, false);

    function setMousePositiontwo(r) {
      mouseQ = r.clientX - canvasPostwo.a;
      mouseW = r.clientY - canvasPostwo.b;
    }

    function updatetwo() {
      contexttwo.clearRect(0, 0, canvastwo.width, canvastwo.height);
      contexttwo.beginPath();
      contexttwo.lineWidth = "1.5";
      contexttwo.rect(mouseQ - w, mouseW - h, W, H);
      contexttwo.stroke();

      contexttwo.beginPath();
      contexttwo.moveTo(0, 0);
      contexttwo.lineTo(mouseQ - w, mouseW - h);
      contexttwo.stroke();

      contexttwo.beginPath();
      contexttwo.moveTo(0, ch);
      contexttwo.lineTo(mouseQ - w, mouseW + h);
      contexttwo.stroke();

      contexttwo.beginPath();
      contexttwo.moveTo(cw, 0);
      contexttwo.lineTo(mouseQ + w, mouseW - h);
      contexttwo.stroke();

      contexttwo.beginPath();
      contexttwo.moveTo(cw, ch);
      contexttwo.lineTo(mouseQ + w, mouseW + h);
      contexttwo.stroke();

      requestAnimationFrame(updatetwo);
    }

    updatetwo();

    function getPosition(qw) {
      var aPosition = 0;
      var bPosition = 0;

      while (qw) {
        aPosition += (qw.offsetLeft - qw.scrollLeft + qw.clientLeft);
        bPosition += (qw.offsetTop - qw.scrollTop + qw.clientTop);
        qw = qw.offsetParent;
      }
      return {
        a: aPosition,
        b: bPosition
      };
    }

function Init(){
  cw = canvastwo.width=window.innerWidth;
  ch = canvastwo.height=window.innerHeight;

  W = cw/2,w=cw/4;H=ch/2,h=ch/4;
  updatetwo()
}

window.setTimeout(function() {
  Init();
  window.addEventListener('resize', Init, false);
}, 15);
* {
  margin: 0;
  padding: 0;
}
canvas {
  border: #000 1.5px solid;
}
<canvas id="myCanvas_one"></canvas>
...