鼠标/触摸坐标在错误的位置HTML画布

时间：2019-03-22 19:50:18

标签： javascript html css canvas responsive-design

我在处理HTML画布时遇到了麻烦，在实验阶段可以正常工作，但是一旦将其进行适当的开发，鼠标坐标就会变得完全不稳定，它会绘制，但是绘制的位置不正确，即单击并拖动画一条线，那条线是在画布内向下绘制的线。我只是想固定坐标，以便鼠标光标准确地绘制它应该在的位置。

下面是我的代码，为了了解我所说的内容，请确保在网站特定于移动设备时调整浏览器窗口的大小。谢谢您的帮助，不胜感激

我曾经尝试过使用getXY函数，但是之后我已经有了一个变量名，但是它没有用。我也尝试了各种样式技巧，但无济于事

    <!DOCTYPE html>
<html>
<head>
<title>Landing Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">



<style type="text/css">

@font-face {
font-family: Geoma Regular Demo;
src: url(Geoma Regular Demo.otf);
}


@font-face {
font-family: Geoma Demo;
src: url(Geoma Light demo.otf);
}





@media screen and (max-width: 425px){

html,body{
overflow-x: hidden;
    width: 100%;
    margin: 0;
}


canvas { border: 3px solid #0BF446;
border-radius: 15px 0px 15px 0px;
display: block;
margin: 0 auto;
margin-top: 35px; }


#clearbutton{background-color:#04A12B ;
border-radius: 0 15px 0 15px;
padding: 20px;
margin: 0 auto;
display: block;
font-size: 14px;
color: white;
font-family: Geoma Demo;
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: Geoma Demo;}

}


</style>

</head>
<body>
<body onload="init()">

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

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


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





<script>

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 = 15;
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()
    }


</script>


</body>
</html>

1 个答案:

答案 0 :(得分：1)

您需要将click事件本地化为相对于canvas元素。您可以通过从top中取出left和el.getBoundingClientRect()并使用它们来调整点击事件的x和y值来做到这一点。参见下文，大部分工作是在getXY函数中完成的。

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 = 15;
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;
  const {
    clientX,
    clientY
  } = source;
  const {
    left,
    top
  } = el.getBoundingClientRect();

  const x = clientX - left;
  const y = clientY - top;

  return {
    x,
    y
  };
};

var startDrawing = function(e) {
  isDrawing = true;
  points.push(getXY(e));
  e.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();
  e.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()
}

init();
@font-face {
  font-family: Geoma Regular Demo;
  src: url(Geoma Regular Demo.otf);
}

@font-face {
  font-family: Geoma Demo;
  src: url(Geoma Light demo.otf);
}

@media screen and (max-width: 425px) {
  html,
  body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
  }
}

canvas {
  border: 3px solid #0BF446;
  border-radius: 15px 0px 15px 0px;
  display: block;
  margin: 0 auto;
  margin-top: 35px;
}

#clearbutton {
  background-color: #04A12B;
  border-radius: 0 15px 0 15px;
  padding: 20px;
  margin: 0 auto;
  display: block;
  font-size: 14px;
  color: white;
  font-family: Geoma Demo;
  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: Geoma Demo;
}
<canvas id="c" width="350" height="500"></canvas>
<input type="submit" value="Clear Sketchpad" id="clearbutton" onclick="clearCanvas(canvas,ctx);">
<footer id="footer1">
  <a href="" id="about">About Elemental</a>
</footer>

相关问题
最新问题