时间戳

首页 > 解决方案 > 当键码处于活动状态时，用鼠标绘制 Javascript 画布

javascript - 当键码处于活动状态时，用鼠标绘制 Javascript 画布

问题描述

我有一个绘图应用程序，可以用鼠标在画布上画线。目前它正在工作。但我想将鼠标移动绑定到键盘按下事件，以避免在画布上意外绘制。以下是一个最小的示例代码：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>draw</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
  <canvas id="canvas" width="800" height="600" style="border:solid 1px;margin:0;padding:0;"></canvas> 
</body>
</html>

<script type="text/javascript">
var rectcanvas, context;
var dragging = false;
var dragStartLocation;
var dragStopLocation;

function getCanvasCoordinates(event) {
    var x = event.clientX - canvas.getBoundingClientRect().left,
        y = event.clientY - canvas.getBoundingClientRect().top;

    return {x: x, y: y};
}

function takeSnapshot() {
    snapshot = context.getImageData(0, 0, canvas.width, canvas.height);
}

function restoreSnapshot() {
    context.putImageData(snapshot, 0, 0);
}


function drawLine(position) {
    context.beginPath();
    context.moveTo(dragStartLocation.x, dragStartLocation.y);
    context.lineTo(position.x, position.y);
    context.stroke();
}

function dragStart(event) {
    dragging = true;
    dragStartLocation = getCanvasCoordinates(event);
    takeSnapshot();
}

function drag(event) {
    var position;
    if (dragging === true) {
        restoreSnapshot();
        position = getCanvasCoordinates(event);
        drawLine(position);
    }
}

function dragStop(event) {
    dragging = false;
    restoreSnapshot();
    var position = getCanvasCoordinates(event);
    drawLine(position);
}

function init() {
    canvas = document.getElementById("canvas");
    context = canvas.getContext('2d');
    context.strokeStyle = 'purple';
    context.lineWidth = 6;
    context.lineCap = 'round';

    canvas.addEventListener('mousedown', dragStart, false);
    canvas.addEventListener('mousemove', drag, false);
    canvas.addEventListener('mouseup', dragStop, false);
}

window.addEventListener('load', init, false);

</script>

我想强制用户在 mousedown、mousemove 或 mouseup 事件期间按下一个键。我尝试了该dragstart事件，但无法使其正常工作。

function dragStart(event) {
  switch(event.keyCode) {
    case 16:  
      var dragStartLocation = getCanvasCoordinates(event);
      var x = dragStartLocation.x;
      var y = dragStartLocation.y;
      alert(x + " | "  + y);
      break;
    case 17:
      var dragStartLocation = getCanvasCoordinates(event);
      var x = dragStartLocation.x;
      var y = dragStartLocation.y;
      alert(x + " | "  + y);
      break;
    case 65:
      var dragStartLocation = getCanvasCoordinates(event);
      var x = dragStartLocation.x;
      var y = dragStartLocation.y;
      alert(x + " | "  + y);
      break
  }
}

标签： javascriptmouseeventkeycode

解决方案

推荐阅读