Question

到目前为止应用程序工作得很好，除非线条绘制得非常快并且离开画布的边缘，然后线条不会被绘制到画布的边缘。有一部分遗失了。

我正在尝试用以下方法解决问题：

canvasVar.addEventListener ('mouseout', clearPathIfMouseCursorLeavesCanvasFunc);

和

 function clearPathIfMouseCursorLeavesCanvasFunc(e){
 contextVar.beginPath(); // clears the path so buttonpresses dont connect the line
 mouseButtonHeld = false;

我尝试过添加settimeout();之类的东西，但到目前为止还没有任何效果。我不知道是什么导致了这一点，我一直在寻找是否有其他人有这个问题并修复它，但我遇到的每个画布绘图应用程序都有同样的问题。

将线条绘制到边缘并识别用户鼠标移动非常重要，而不仅仅是鼠标离开画布的最后一个坐标线。

现在已经好几天我都遇到了这个问题。非常感谢帮助！

整个代码：

// Varibale declaration
var canvasVar = document.getElementById('canvasHtmlElement');
var contextVar = canvasVar.getContext('2d');
var pointRadiusVar = 0.5;
var mouseButtonHeld = false;
var pointsArrPosition = 0;

//Arrays
var pointsArr = [];

// Varibale declration end

//canvas setup
canvasVar.width = window.innerWidth;
canvasVar.height = window.innerHeight;

//canvas setup end


//resize fix
window.onresize = function() {
    var tempImageVar = contextVar.getImageData(0, 0, canvasVar.width, canvasVar.height);
    canvasVar.width = window.innerWidth;
    canvasVar.height = window.innerHeight;
    contextVar.putImageData(tempImageVar, 0, 0);
  }
  //resize fix end

//functions

// Objects

function pointObject() {

  this.x = 0;
  this.y = 0;
  this.fill = '#444444';

}

function addFilledCircleFunc(x, y) {
  //alert('works1');
  var filledCircle = new pointObject;
  filledCircle.x = x;
  filledCircle.y = y;
  pointsArr.push(filledCircle);

  contextVar.lineWidth = 10; //pointRadiusVar * 2; // Line Width
  contextVar.lineTo(pointsArr[pointsArrPosition].x, pointsArr[pointsArrPosition].y);
  contextVar.stroke();
  //contextVar.beginPath();

  contextVar.fillRect(filledCircle.x, filledCircle.y, 1, 1);
  //contextVar.arc(filledCircle.x, filledCircle.y, pointRadiusVar, 0, Math.PI * 2);
  //contextVar.fill();
  //contextVar.lineWidth = 0.5;
  //contextVar.stroke();
  //contextVar.beginPath();


  pointsArrPosition++;
  //contextVar.moveTo(pointsArr[pointsArrPosition].x, pointsArr[pointsArrPosition].y);


  //alert(pointsArr[0].x);



}

//Objects end

// create circle on mouse clicked point while mousebutton is held
var addPointToCanvasVar = function(e) {
  if (mouseButtonHeld) {
    //alert('addpointfunc');
    addFilledCircleFunc(e.clientX, e.clientY);
  }
};

// MAKE SURE that lines work when drawn over the edge of the canvas

function clearPathIfMouseCursorLeavesCanvasFunc(e) {
  contextVar.beginPath(); // clears the path so buttonpresses dont connect the line
  mouseButtonHeld = false;
}

// end


// mouse Up/Down functions
var mouseDownVar = function(e) {
  //alert("mouseDown");
  addPointToCanvasVar(e); // add point on first click, not just when mousebutton is held
  mouseButtonHeld = true;

}

var mouseUpVar = function() {
  //alert("mouseUp");
  mouseButtonHeld = false;
  contextVar.beginPath(); // clears the path so buttonpresses dont connect the line
}

// mouse Up/Down Switch end


//functions end


//listeners

canvasVar.addEventListener('mousemove', addPointToCanvasVar);
canvasVar.addEventListener('mouseup', mouseUpVar);
canvasVar.addEventListener('mousedown', mouseDownVar);
canvasVar.addEventListener('mouseout', clearPathIfMouseCursorLeavesCanvasFunc);

//listeners end

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>Confident Drawing</title>
</head>

<body style="margin: 0">
  <canvas id="canvasHtmlElement" style="display: block;">
    Your Browser does not support Canvas! Please update to a newer version.
  </canvas>

  <script src="main_0.06.js"></script>

</body>

</html>

如果你没理解我的意思：运行代码片段并在退出画布时尽可能快地画一条线。

Answer 1

当您快速在边缘上划线时，线条在边缘附近过早结束的原因是因为当鼠标仍在画布中并且距离边缘很短时，最后mousemove个事件被触发了鼠标离开画布后触发了下一个mousemove事件。要解决这个问题，只需在mouseout事件触发后立即从画布中最后记录的鼠标位置绘制到画布外部的行。

您可以添加新的全局变量mousePosition并将其初始化为{x:0,y:0}。每次mousemove触发（每当您致电addPointToCanvasVar时），都会将e.clientX和e.clientY记录到您的mousePosition。然后当mouseout触发时（每当您致电clearPathIfMouseCursorLeavesCanvasFunc时），请将该行的其余部分从mousePosition绘制到当前e.clientX和e.clientY位置。这将完成画布边缘末尾的行。

html5画布绘图：鼠标快速移动在它到达画布边缘之前取消线条

1 个答案: