javascript - 检测用户是否单击 Canvas 内的任何圆圈-6ren

javascript - 检测用户是否单击 Canvas 内的任何圆圈

转载作者：行者123 更新时间：2023-12-03 05:37:43

24

4

作为我的 previous question 的补充，现在，我正在尝试检测用户是否单击了任何创建的圈子。

当用户按键时，我正在创建 Node 对象。

jQuery(document).ready(function() {
    $('#canvas').attr('height', $('#canvas').css('height'));
    $('#canvas').attr('width', $('#canvas').css('width'));
    var x = -1;
    var y = -1;
    var V = [];

    function Node(id) {
        var _this = this;

        // constructor
        (function() {
            _this.x = x || null;
            _this.y = y || null;
            _this.id = id || null;
            _this.clicked = false;
        
        })();

        this.draw = function(ctx) {
            ctx.beginPath();
            ctx.arc(x, y, 20, 0, 2 * Math.PI);
            ctx.font = '16pt Calibri';
            ctx.fillStyle = 'black';
            ctx.textAlign = 'center';
            ctx.fillText(id, x, y+3);
            
            ctx.stroke();
            V.push(v);
        }
        
        this.clicked = function(e) {
            var xDif = e.offsetX - _this.x;
            var yDif = e.offsetY - _this.y;
            var d = Math.sqrt((xDif*xDif) + (yDif*yDif));
            if(d < 20) return true;
            else return false;
            
        }
        
        this.update = function() {
        _this.x = x;
        _this.y = y;
        
       }
    }
    var overCanvas = false;
    $('#canvas').mouseover(function() {
    overCanvas = true;
    });
    $('#canvas').mouseleave(function() {
    overCanvas = false;
    });
    $("#canvas").mousemove(function(e) {
    x = e.offsetX;
    y = e.offsetY;
    $('#status').html(x + ', ' + y);
    });
    $(document).keypress(function(e) {

    if (!overCanvas) {
      return;
    }
    var id = -1;
    switch(e.keyCode)
    {
        case 97:
        case 49: id = '1'; break
        case 98:
        case 50: id = '2'; break;
        case 99:
        case 51: id = '3'; break;
        case 100:
        case 52: id = '4'; break;
        case 101:
        case 53: id = '5'; break;
        case 102:
        case 54: id = '6'; break;
        case 120:
        case 88: id = 'x'; break;
        default: return;
    }

    var v = new Node(id);
    v.draw(canvas.getContext("2d"));
    });

然后，我想知道用户是否单击了任何对象。为了实现这一点，我使用一个简单的循环:

$('#canvas').mousedown(function() {
        for(var i = 0; i < V.length; i++)
        {
            
            if(V[i].clicked())
            {
                $('#clicked').html(V[i].id);
                V[i].update();
                V[i].draw(canvas.getContext("2d"));
            }
        }
        
    });

在以下 html 中不会执行任何操作:

<body> 
    <h2 id="status">0, 0</h2>
    <h2 id="clicked">init</h2>
    <canvas style="width: 1000px; height: 1000px; border:1px ridge green;" id="canvas">

    </canvas>
</body>

我认为我计算的距离没有错误。我认为我错过了一些要点(也许是在返回 true 和 false 时？)。

我想要做的事情是能够单独拖动每个圆圈。

最佳答案

您的代码中存在一些错误:

行:

V.push(v);

Node.draw() 中的内容应在节点创建后移至此处:

var v = new Node(id);
v.draw(canvas.getContext("2d"));
V.push(v);

此外，您的 mousedown 事件处理程序实际上并未获取对该事件的引用，您需要:

    $('#canvas').mousedown(function(e) {
    for(var i = 0; i < V.length; i++)
    {
        if(V[i].clicked(e))
        {
            $('#clicked').html(V[i].id);
            V[i].update();
            V[i].draw(canvas.getContext("2d"));
        }
    }

});

Fiddle

关于javascript - 检测用户是否单击 Canvas 内的任何圆圈，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40659556/

24

4

0

文章推荐： javascript - 替换两个标签之间的 HTML

文章推荐： android - 在proguard android上，此警告的-dontwarn规则是什么？

文章推荐： scala - 构建基于 Actor 的系统的设计模式/最佳实践

windows-8 - 从 Metro 应用程序检测桌面可用性(检测 ARM、检测 Windows RT 系统)
这是一个与 Get OS-Version in WinRT Metro App C# 相关的问题但不是它的重复项。是否有任何选项可以从 Metro 应用程序检测系统上是否有可用的桌面功能？据我所知，
Android闹钟广播/检测
我想在闹钟响起时做点什么。例如， toast 或设置新闹钟。我正在寻找可以检测闹钟何时响起的东西。首先，我在寻找广播 Action ，但找不到。也许是我的错？当闹钟响起时，还有其他方法可以做些什么吗
security - 检测、更改或删除现有的变异观察者
如果某个 JS 添加了一个突变观察者，其他 JS 是否有可能检测、删除、替换或更改该观察者？我担心的是，如果某些 JS 旨在破坏某些 DOM 元素而不被发现，那么 JS 可能想要摆脱任何观察该 DOM
CUDA的 torch 检测
Closed. This question does not meet Stack Overflow guidelines。它当前不接受答案。想要改善这个问题吗？更新问题，以便将其作为on-topi
Android:检测 USB
有没有办法在您的 Activity/应用程序中(以编程方式)知道用户已通过 USB 将您的手机连接到 PC？最佳答案有人建议使用 UMS_CONNECTED自最新版本的 Android 起已弃用
javascript - 检测/测量滚动速度
我正在想办法测量速度滚动事件，这将产生某种代表速度的数字(相对于所花费的时间，从滚动点 A 到点 B 的距离)。我欢迎任何以伪代码形式提出的建议...... 我试图在网上找到有关此问题的信息，但找不
Javascript 检测 Skype？
某些 JavaScript 是否可以检测 Skype 是否安装？我问的原因是我想基于此更改链接的 href:如果未安装 Skype，则显示一个弹出窗口，解释 Skype 是什么以及如何安装它，如果已
macos - 检测 CGAsociateMouseAndMouseCursorPosition
我们正在为 OS X 制作一个使用 Quartz Events 移动光标的用户空间设备驱动程序，当游戏(尤其是在窗口模式下运行的游戏)无法正确捕获鼠标指针时，我们遇到了问题(= 将其包含/保留在其窗口
AngularJS - 检测、停止和取消路线更改
我可以在 Controller 中看到事件 $routeChangeStart，但我不知道如何告诉 Angular 留下来。我需要弹出类似“您要保存、删除还是取消吗？”的信息。如果用户选择取消，则停留
java - 圆形阵列环路，检测
我正在解决一个问题，并且已经花了一些时间。问题陈述:给你一个正整数和负整数的数组。如果索引处的数字 n 为正，则向前移动 n 步。相反，如果为负数(-n)，则向后移动 n 步。假设数组的第一个元素向前
javascript - 检测[i]值
我试图建立一个条件，其中 [i] 是 data.length 的值，问题是当有超过 1 个值时一切正常，但当只有 1 个值时，脚本不起作用。 out.href = data[i].hr
java - 物体识别/检测？
这是我的问题，我需要检测图像中的 bolt 和四分之一，我一直在搜索并找到 OpenCV，但据我所知它还没有在 Java 中。你们打算如何解决这个问题？最佳答案实际上有一个 OpenCV 的 Ja
Java - 检测 ping
是否可以检测 ping？ IE。设备 1 ping 设备 2，我想要可以在设备 2 上运行的代码，该代码可以在设备 1 ping 设备时进行检测。最佳答案 ping 实用程序使用的字面消息(“ICM
用于分布式累积批处理作业的 Prometheus 检测
我每天多次运行构建脚本。我的感觉是我和我的同事花费了大量时间等待这个脚本执行。现在想知道:我们每天花多少时间等待脚本执行？ .我可以对总体平均值感到满意，即使我真的很想拥有每天的数据(例如“上周一我们
iphone - 检测/修复内存泄漏
我已经完成了对项目的编码，但是当我在客户端中提交了源代码时，就对它进行了测试，然后检测到内存泄漏。我已经在Instruments using Leaks中进行了测试。我遇到的问题是AVPlayer和
检测 Callable 是否是静态的
我想我可以用 std.traits.functionAttributes 来做到这一点，但它不支持 static。对于任何类型的可调用对象(包含 opCall 的结构)，我如何判断该可调用对象是否使用
r - 检测/确保在多核中使用多核
我正在使用多核 R 包中的并行和收集函数来并行化简单的矩阵乘法代码。答案是正确的，但并行版本似乎与串行版本花费的时间相同。我怀疑它仅在一个内核上运行(而不是在我的机器上可用的 8 个内核!)。有没有
Python 检测 EOF
我正在尝试在读取 csv 文件时编写一个这样的 if 语句: if row = [] or EOF: do stuff 我在网上搜索过，但找不到任何方法可以做到这一点。帮忙？最佳答案 wit
javascript - 检测/捕获字体大小变化的最佳方法是什么？
我想捕捉一个 onFontSizeChange 事件然后做一些事情(比如重新渲染，因为浏览器已经改变了我的字体大小)。不幸的是，不存在这样的事件，所以我必须找到一种方法来做到这一点。我见过有人在不可
c# - 检测/监听服务启动和停止状态变化
我有一个使用 Windows 服务的 C# 应用程序，该服务并非始终打开，我希望能够在该服务启动和关闭时发送电子邮件通知。我已经编写了电子邮件脚本，但我似乎无法弄清楚如何检测服务状态更改。我一直在阅

首页

博学

6Ren·AI

商城

javascript - 检测用户是否单击 Canvas 内的任何圆圈