javascript - 仅当按下键盘时 Canvas 才绘制矩形-6ren

javascript - 仅当按下键盘时 Canvas 才绘制矩形

转载作者：行者123 更新时间：2023-12-03 00:42:49

我正在使用鼠标在 Canvas 上绘制矩形。但是，我想仅在按下键盘上的 d 键时才激活鼠标操作来绘制矩形。

如果我使用

if (event.ctrlKey) {
 //draw rectangles
}

我可以通过按住键盘上的 ctrl 键来绘图。但是，如果我使用

if (e.which == 88) {
 //draw rectangles
}

这不起作用。我无法将键盘按键事件绑定(bind)到 Canvas 上的鼠标事件。我知道 canvas 元素没有 onKeyPress 事件，并且根据一些博客中的建议，我尝试了以下代码，但它不起作用。有人可以帮助我开始吗？

我有很多事件，我必须在 Canvas 上绑定(bind)键盘按下事件。

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>parallelogram</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;;z-index:1"></canvas>
</body>

</html>

<script type="text/javascript">
var canvas, context;
var dragging = false;
var startLocation;
var dragStartLocation;
var dragStopLocation;
var dragThirdLocation;
var snapshot;
var coords = [];
var pointsNum = 0;
var d = {
    x: 0,
    y: 0
};

//Get mouse click coordinates
function getCanvasCoordinates(event)
{
    var x = event.clientX - canvas.getBoundingClientRect().left;
    var y = event.clientY - canvas.getBoundingClientRect().top;
    return {
        x: x,
        y: y
    };
}

//save the canvas original state
function takeSnapShot()
{
    snapshot = context.getImageData(0, 0, canvas.width, canvas.height);
}

//restore the canvas original state
function restoreSnapShot()
{
    context.putImageData(snapshot, 0, 0);
}

//draw a point on mouse click
function drawPoint(position)
{
    context.beginPath();
    context.arc(position.x, position.y, 5.5, 0, Math.PI * 2, false);
    context.stroke();
}

//draw a line on mouse move
function drawLine(start, end)
{
    context.beginPath();
    context.moveTo(start.x, start.y);
    context.lineTo(end.x, end.y);
    context.stroke();
}

//start the event with first mouse click
function dragStart(event)
{
    dragging = true;
    dragStartLocation = getCanvasCoordinates(event);
    coords['imageClicked'] = localStorage.getItem('clickedImage');
    console.log(coords);
    var brandNode = localStorage.getItem('brandNode');
    var locationNode = localStorage.getItem('locationNode');
    drawPoint(dragStartLocation);
    pointsNum++;
    takeSnapShot();
    if (pointsNum == 1) startLocation = dragStartLocation;
}

//draw a line along with the mouse move from the first click
function drag(event)
{
    var position;
    if (snapshot && pointsNum && pointsNum < 3)
    {
        restoreSnapShot();
        position = getCanvasCoordinates(event);
        drawLine(dragStartLocation, position);
        drawPoint(position);
        if (pointsNum == 2) drawFourthCoord(position)

    }
}

//stop the mouse movement and drawing line.
function dragStop(event)
{
    dragging = false;
    restoreSnapShot();
    var position = getCanvasCoordinates(event);
    dragStopLocation = position;
    drawPoint(dragStopLocation);
    pointsNum++;
    drawLine(dragStartLocation, dragStopLocation);
    takeSnapShot();
    d = {
        x: dragStartLocation.x - dragStopLocation.x,
        y: dragStartLocation.y - dragStopLocation.y
    };

    dragStartLocation = position;
    console.log(dragStartLocation);
    if (pointsNum > 3) pointsNum = 0;
}

//draw the fourth coordinate
function drawFourthCoord(position)
{
    var p = {
        x: position.x + d.x,
        y: position.y + d.y
    };
    drawLine(position, p);
    drawPoint(p);
    drawLine(startLocation, p);
}

/*
  This code works...but does not have binding to keyCode x
  function init() {
  canvas = document.getElementById('canvas');
  context = canvas.getContext('2d');
  context.lineCap = "round";
  context.lineWidth = 3;
  context.strokeStyle = '#f4d03f';
  canvas.addEventListener('mousedown', dragStart, false);
  canvas.addEventListener('mousemove', drag, false);
  canvas.addEventListener('mouseup', dragStop, false);  

}

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

var canvaskey = document.getElementById('canvas');
canvaskey.addEventListener('keydown', doKeyDown, true);

function doKeyDown(e)
{
    if (e.which == 88)
    {
        canvas = document.getElementById('canvas');
        context = canvas.getContext('2d');
        context.lineCap = "round";
        context.lineWidth = 3;
        context.strokeStyle = '#f4d03f';
        canvas.addEventListener('mousedown', dragStart, false);
        canvas.addEventListener('mousemove', drag, false);
        canvas.addEventListener('mouseup', dragStop, false);
    }
}
</script>

最佳答案

只需在绘图函数有权访问的范围内保存一个信号量变量即可。

按下所需键时，将其设置为 true，按下时设置为 false。
在绘制函数中，检查信号量是否设置为true，否则立即返回。

// our keydown semaphor
var d_down = false;

function doKeyDown(e)
{
    if (e.key == "d")
    {
      d_down = true;
    }
}
function doKeyUp(e)
{
    if (e.key == "d")
    {
      d_down = false;
    }
}


var canvas, context;
var dragging = false;
var startLocation;
var dragStartLocation;
var dragStopLocation;
var dragThirdLocation;
var snapshot;
var coords = [];
var pointsNum = 0;
var d = {
    x: 0,
    y: 0
};

//Get mouse click coordinates
function getCanvasCoordinates(event)
{
    var x = event.clientX - canvas.getBoundingClientRect().left;
    var y = event.clientY - canvas.getBoundingClientRect().top;
    return {
        x: x,
        y: y
    };
}

//save the canvas original state
function takeSnapShot()
{
    snapshot = context.getImageData(0, 0, canvas.width, canvas.height);
}

//restore the canvas original state
function restoreSnapShot()
{
    context.putImageData(snapshot, 0, 0);
}

//draw a point on mouse click
function drawPoint(position)
{
    context.beginPath();
    context.arc(position.x, position.y, 5.5, 0, Math.PI * 2, false);
    context.stroke();
}

//draw a line on mouse move
function drawLine(start, end)
{
    context.beginPath();
    context.moveTo(start.x, start.y);
    context.lineTo(end.x, end.y);
    context.stroke();
}

//start the event with first mouse click
function dragStart(event)
{
  // check our semaphor
  if(!d_down)
    return; // we're not allowed to go farther
    
    dragging = true;
    dragStartLocation = getCanvasCoordinates(event);
/*    coords['imageClicked'] = localStorage.getItem('clickedImage');
    console.log(coords);
    var brandNode = localStorage.getItem('brandNode');
    var locationNode = localStorage.getItem('locationNode');*/
    drawPoint(dragStartLocation);
    pointsNum++;
    takeSnapShot();
    if (pointsNum == 1) startLocation = dragStartLocation;
}

//draw a line along with the mouse move from the first click
function drag(event)
{
  // check our semaphor
  if(!d_down)
    return; // we're not allowed to go farther
    var position;
    if (snapshot && pointsNum && pointsNum < 3)
    {
        restoreSnapShot();
        position = getCanvasCoordinates(event);
        drawLine(dragStartLocation, position);
        drawPoint(position);
        if (pointsNum == 2) drawFourthCoord(position)

    }
}

//stop the mouse movement and drawing line.
function dragStop(event)
{
    dragging = false;
  // check our semaphor
  if(!d_down)
    return; // we're not allowed to go farther
    restoreSnapShot();
    var position = getCanvasCoordinates(event);
    dragStopLocation = position;
    drawPoint(dragStopLocation);
    pointsNum++;
    drawLine(dragStartLocation, dragStopLocation);
    takeSnapShot();
    d = {
        x: dragStartLocation.x - dragStopLocation.x,
        y: dragStartLocation.y - dragStopLocation.y
    };

    dragStartLocation = position;
//    console.log(dragStartLocation);
    if (pointsNum > 3) pointsNum = 0;
}

//draw the fourth coordinate
function drawFourthCoord(position)
{
    var p = {
        x: position.x + d.x,
        y: position.y + d.y
    };
    drawLine(position, p);
    drawPoint(p);
    drawLine(startLocation, p);
}

  function init() {
  canvas = document.getElementById('canvas');
  context = canvas.getContext('2d');
  context.lineCap = "round";
  context.lineWidth = 3;
  context.strokeStyle = '#f4d03f';
  canvas.addEventListener('mousedown', dragStart, false);
  canvas.addEventListener('mousemove', drag, false);
  canvas.addEventListener('mouseup', dragStop, false); 
  snapshot = context.createImageData(1,1)

}

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

var canvaskey = document.getElementById('canvas');
canvaskey.addEventListener('keydown', doKeyDown);
canvaskey.addEventListener('keyup', doKeyUp);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<canvas id="canvas" width="800" height="600" style="border:solid 1px;margin:0;padding:0;;z-index:1" tabindex="1"></canvas>

关于javascript - 仅当按下键盘时 Canvas 才绘制矩形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53368730/

文章推荐： javascript - NodeJS - setTimeout 完成后运行函数

文章推荐： javascript - Angular 2中的密码验证，满足以下条件:

文章推荐： Javascript for 循环添加多个项目

python - 如何知道边界框(矩形)是否位于另一个边界框(矩形)内？
我正在尝试将外框内的框(坐标)放入。我已经使用交集联合方法完成了工作，并且我希望其他方法也可以这样做。另外，能否请您告诉我如何比较这两个内盒？最佳答案通过比较边界框和内部框的左上角和右下角的坐标
Java数字模式两个三角形并排制作正方形/矩形
我希望输出看起来像这样: 如何安排这些循环以获得两个三角形数字模式？我该如何改进我的代码。 JAVA 中的新功能:-) for (int i = 1; icount; num--) {
mysql写入和读取地理边界(矩形)
我需要将 map 边界存储在 MySQL 数据库中。我花了一些时间在地理空间扩展的文档上，但是学习所有相关信息(WKT、WKB 等)很困难，而且就我而言没有必要。我只需要一种方法来存储坐标矩形并稍后将
gnuplot - 如何从文件中绘制对象(矩形)
在 gnuplot 中，我可以通过绘制一个矩形 set object rect from x0,y0 to x1,y1 如何从文件中读取坐标 x0,x1,y0,y1？最佳答案一种方法是将设置矩形的
用水平线或垂直线填充的 WPF 矩形
我正在尝试创建一个填充了水平线或垂直线的矩形。矩形的宽度是动态的，所以我不能使用图像刷。如果有人知道任何解决方案，请告诉我。最佳答案我想出了一个直接的方法来做到这一点；最后，我使用以下视觉画笔
在所有浏览器中模糊的 SVG 矩形
这个 SVG 在所有浏览器中看起来都很模糊，在所有缩放级别。在 Chrome、Safari 和 Firefox 中，它看起来像这样: 如果放大，您可以看到笔画有两个像素的宽度，即使默认笔画
r - 向ggplot2图形添加多个阴影/矩形
我正在尝试在ggplot2图上添加多个阴影/矩形。在这个可重现的示例中，我只添加了3，但是使用完整数据可能需要总计一百。这是我的原始数据的子集-在名为temp的数据框中-dput在问题的底部：
wpf3d 矩形 HitTest
我有一个包含驻留在 Viewport3D 中的 3D 对象的应用程序，我希望用户能够通过在屏幕上拖动一个矩形来选择它们。我尝试在 Viewport3D 上应用 GeometryHitTestPara
WPF 矩形 - 圆化顶角
如何才能使 WPF 矩形的顶角变成圆角？我创建了一个边框并设置了 CornerRadius 属性，并在边框内添加了矩形，但它不起作用，矩形不是圆角的。最佳答案您遇到的问题是矩形“溢
javascript - 旋转传单折线/矩形
我正在尝试使用此 question 中的代码旋转 Leaflet 矩形。 rotatePoints (center, points, yaw) { const res = [] const a
opencv - 从图像中删除框/矩形
我有以下图像。 this image 我想删除数字周围的橙色框/矩形，并保持原始图像干净，没有任何橙色网格/矩形。以下是我当前的代码，但没有将其删除。 Mat mask = new Mat(); M
math - 矩形——一道数学题
我发现矩形有些不好笑: 比方说，给定的是左、上、右和下坐标的值，所有这些坐标都旨在包含在内。所以，计算宽度是这样的: width = right - left + 1 到目前为止，一切都很合乎逻辑。
Java JFrame 矩形
所以，我一直在学习 Java，但我还是个新手，所以请耐心等待。我最近的目标是图形化程序，这次是对键盘控制的测试。由于某种原因，该程序不会显示矩形。通常，paint() 会独立运行，但由于某种原因它不会
java编码确定点是否位于多边形(矩形)内部的解决方案
我正在阅读 website 中的解决方案 3 (2D)并试图将其翻译成java代码。 java是否正确请评论。我使用的是纬度和经度坐标，而不是 x 和 y 坐标(注意:loc.getLongitude
iText 矩形 - 无法删除边框
我似乎无法删除矩形上的边框!请参阅下面的代码，我正在使用 PDFannotation 创建链接。这些链接都有效，但每个矩形都有一个边框。 PdfAnnotation annotation; Recta
c# - 在维护区域时旋转位图(矩形)
如何在保持原始位图面积的同时将位图旋转给定的度数。即，我旋转宽度:100，高度:200 的位图，我的最终结果将是一个更大的图像，但旋转部分的面积仍然为 100*200 最佳答案图形转换函数非常适合这
c# - 如何清除picturebox中的图形(矩形)
我创建了矩形用户控件，我在我的应用程序中使用了这个用户控件。在我的应用程序中，我正在处理图像以进行不同的操作，例如从图像中读取条形码等。这里我有两种处理图像的可能性，一种正在处理整个图像，另一个正在处
c# - 画线和时的奇怪行为。矩形
好的，我该如何开始呢？我有一个应用程序可以在屏幕上绘制一些形状(实际上是几千个)。它们有两种类型:矩形和直线。矩形有填充，线条有描边 + 描边厚度。我从两个文件中读取数据，一个是顶部的数据，一个是
JavaFX ActionEvent 矩形
简而言之: 我正在致力于使用 AI 和 GUI 创建纸牌游戏。用户的手显示在游戏界面上，我尚未完成界面，但我打算将牌面图像添加到屏幕上的矩形中。我没有找到 5 种几乎相同的方法，而是找到了一篇类似的文
java - ArrayList 矩形
我遇到了麻烦。我正在尝试使用用户输入的数组列表创建条形图。我可以创建一个条，但只会创建一个条。我需要所有数组输入来创建一个条。 import java.awt.Color; import java.a

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 仅当按下键盘时 Canvas 才绘制矩形