Как получить правильные координаты мыши в холсте HTML - PullRequest
Новая
       33

Как получить правильные координаты мыши в холсте HTML

0 голосов
/ 03 апреля 2019

Мои координаты мыши стали совершенно понятными, так как я разработал свой HTML-холст для адаптивного дизайна.Это работало отлично, когда у него не было стиля и было только в верхнем левом углу экрана.Однако теперь, когда у меня сократилось окно Borwser, или когда я использую его на мобильном устройстве, курсор не будет рисовать там, где он должен быть, то есть точно на пути рисования, вместо этого он либо на несколько пикселей выше или ниже.Ниже мой код, любая помощь будет высоко ценится 

function init() {
  // Get the specific canvas element from the HTML document
  canvas = document.getElementById('c');

}

function midPointBtw(p1, p2) {
  return {
    x: p1.x + (p2.x - p1.x) / 2,
    y: p1.y + (p2.y - p1.y) / 2
  };
}

function getPattern() {
  return ctx.createPattern(img, 'repeat');
}

var el = document.getElementById('c');
var ctx = el.getContext('2d');

ctx.lineWidth = 30;
ctx.lineJoin = ctx.lineCap = 'round';

var img = new Image;
img.onload = function() {
  ctx.strokeStyle = getPattern();
};
img.src = "https://i.postimg.cc/rF2R0GRY/dick2.png";

var isDrawing, points = [];

var getXY = function(e) {
  var source = e.touches ? e.touches[0] : e;

  return {
    x: source.clientX,
    y: source.clientY
  };
};

var startDrawing = function(e) {
  isDrawing = true;
  points.push(getXY(e));
  event.preventDefault();


};

var keepDrawing = function(e) {
  if (!isDrawing) return;

  points.push(getXY(e));
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

  var p1 = points[0];
  var p2 = points[1];

  ctx.moveTo(p1.x, p1.y);

  for (var i = 1, len = points.length; i < len; i++) {
    var midPoint = midPointBtw(p1, p2);
    ctx.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y);
    p1 = points[i];
    p2 = points[i + 1];
  }
  ctx.lineTo(p1.x, p1.y);
  ctx.stroke();
  event.preventDefault();
};

var stopDrawing = function() {
  isDrawing = false;
  points = [];

};

el.addEventListener('touchstart', startDrawing);
el.addEventListener('mousedown', startDrawing);

el.addEventListener('touchmove', keepDrawing);
el.addEventListener('mousemove', keepDrawing);

el.addEventListener('touchend', stopDrawing);
el.addEventListener('mouseup', stopDrawing);

function clearCanvas(canvas, ctx) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath()
}
@import url('https://fonts.googleapis.com/css?family=Montserrat+Alternates');
@media screen and (max-width: 425px) {
  html,
  body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
  }
  #logo {
    margin: 0 auto;
    display: block;
    margin-bottom: 15px;
    margin-top: 15px;
  }
  .container1 {
    background-color: #313131;
    border-radius: 20px;
    border: 3px solid #0BF446;
    height: 250px;
  }
  #grphc1 {
    margin: 0 auto;
    display: block;
    margin-top: 35px;
  }
  #canvasintro {
    border-radius: 20px 0px 20px 0px;
    border: 3px solid #0BF446;
    color: white;
    background-color: #0BF446;
    font-size: 16px;
    text-align: left;
    font-family: 'Montserrat Alternates', sans-serif;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 35px;
    padding: 20px;
  }
  canvas {
    border: 3px solid #0BF446;
    border-radius: 15px 0px 15px 0px;
    display: block;
    margin: 0 auto;
    margin-top: 35px;
    background-color: #313131;
    position: relative;
  }
  #download {
    background-color: #04A12B;
    border-radius: 0 15px 0 15px;
    padding: 20px 40px;
    margin: 0 auto;
    display: block;
    font-size: 14px;
    margin-top: 35px;
    color: white;
    font-family: 'Montserrat Alternates', sans-serif;
  }
  #clearbutton {
    background-color: #04A12B;
    border-radius: 0 15px 0 15px;
    padding: 20px;
    margin: 0 auto;
    display: block;
    font-size: 14px;
    color: white;
    font-family: 'Montserrat Alternates', sans-serif;
    margin-top: 35px;
  }
  #footer1 {
    background-color: #00671A;
    border-radius: 30px 30px 0px 0px;
    text-align: center;
    padding: 30px;
    margin-top: 35px;
  }
  #about {
    color: white;
    font-size: 16px;
    font-family: 'Montserrat Alternates', sans-serif;
  }
}
<!DOCTYPE html>
<html>

<head>
  <title>Elemental</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body onload="init()">
  <a href="../homepage.html"><img src="minilogo.png" id="logo"></a>

  <div class="container1">
    <img src="leaf.png" id="grphc1">
  </div>

  <div id="canvasintro">Feel free to draw or doodle down below with this natural element of design</div>

  <canvas id="c" width="350px" height="350px"></canvas>

  <button id="download">Download</button>

  <input type="submit" value="Clear Sketchpad" id="clearbutton" onclick="clearCanvas(canvas,ctx);">

  <footer id="footer1">
    <a href="../about.html" id="about">About Elemental</a>
  </footer>

</body>

</html>

1 Ответ

2 голосов
/ 03 апреля 2019

Во-первых, в вашем новом конструкторе изображений отсутствуют символы, которые нужно вызвать: 

var img = new Img();

Но в вашей функции getXY() верните offsetX и offsetY вместо clientX и clientY: 

var getXY = function(e) {
  var source = e.touches ? e.touches[0] : e;
  return {
    x: source.offsetX,
    y: source.offsetY
  };
};

Здесь «клиент» относится к области просмотра, тогда как «смещение» - это ссылка на край заполнения целевого узла или сам холст.

Также следует добавить обработчики событий mouseout и touchcancel: 

el.addEventListener('mouseout', stopDrawing);
el.addEventListener('touchcancel', stopDrawing);
...