上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

我要点击canvas里面的某一个位置触发事件,我应该如何使用脚本进行操作

[复制链接]
  • TA的每日心情
    开心
    5 天前
  • 签到天数: 276 天

    [LV.8]以坛为家I

    114

    主题

    454

    回帖

    981

    积分

    荣誉开发者

    积分
    981

    荣誉开发者油中2周年卓越贡献生态建设者油中3周年

    发表于 2023-3-20 21:37:44 | 显示全部楼层 | 阅读模式

    本帖最后由 wwwwwllllk 于 2023-3-20 21:40 编辑

    要实现这个功能,你需要通过 JavaScript 监听点击事件,在事件处理函数中根据鼠标点击位置获取对应的 canvas 像素点,并进行后续逻辑处理。

    <!-- 在页面中定义一个 id 为 "myCanvas" 的 canvas 元素 -->
    <canvas id="myCanvas" width="500" height="500"></canvas>
    
    <script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    
    // 绘制一个矩形,作为点击区域
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(50, 50, 100, 100);
    
    // 监听鼠标点击事件
    canvas.addEventListener('click', function(evt) {
        var rect = canvas.getBoundingClientRect();
        var x = evt.clientX - rect.left;
        var y = evt.clientY - rect.top;
        var pixel = ctx.getImageData(x, y, 1, 1).data;
        alert("你点击了第一个矩形,像素值为:" + pixel.join(","));
    }, false);
    </script>

    在这段代码中,我们首先获取了页面中的一个 canvas 元素,并利用 canvas.getContext("2d") 获取了绘图上下文对象 ctx。然后我们绘制了一个位置在画布上的红色矩形,作为我们的点击区域。

    接着我们监听了 click 事件,并在事件处理函数中通过 evt.clientX 和 evt.clientY 获取了鼠标相对于页面左上角的位置。接着我们调用 ctx.getImageData(x, y, 1, 1) 获取了鼠标点击位置对应的像素点,并利用 pixel.join(",") 将 RGBA 像素值转化成逗号分隔的字符串进行提示。

    需要注意的是,由于 JavaScript 中的像素值是基于 RGBA 格式的,因此需要在处理像素值时注意区分 RGB 和 Alpha 通道。如果你不需要透明通道信息,可以只获取前三个元素。

    此外,如果你定义了多个点击区域,可以在事件处理函数中根据鼠标点击的像素点坐标与各区域的位置进行比对,以判断鼠标点击的是哪一个区域。但这需要你事先规划好各区域的位置和像素范围。

    image.png

    image.png

    在脚本中使用canvas实战这是个很好的案例,我也是看了以后想学,才试了一下,又学到了。
    地址:https://mall.bilibili.com/robotgirl/

    image.png

    当然我也陷入了上面博主操作的误区,我只设置了down,没有设置mouseup, 所以要想脚本模拟人的操作就需要像人点击鼠标一样,鼠标松开以后才会触发事件。

    下面把我操作的代码展示出来

    var eve =document.createEvent("MouseEvent");
    eve = new MouseEvent('mousedown', {
        'cancelBubble': true,
        'cancelable': true,
        "clientX":472,
        "clientY":441,view:window,detail:1
     })
     eve.initMouseEvent("mouseup", true, true, window, 1, 0, 0, 472,441 ,false, false, false, false, 0, null);  
     document.querySelector("#layaCanvas").dispatchEvent(eve);
    这段代码用于模拟在指定的DOM元素(ID为 layaCanvas)上执行鼠标事件,包括鼠标按下和鼠标弹起。下面分别解释这些代码的含义:
    
    var eve = document.createEvent("MouseEvent"):创建一个模拟的MouseEvent事件对象。
    eve = new MouseEvent('mousedown', { 'cancelBubble': true, 'cancelable': true, "clientX":472, "clientY":441, view:window, detail:1 }):设置模拟事件的属性,包括事件类型 mousedown、是否取消冒泡、是否可以取消、鼠标点击的客户端坐标(x和y坐标)、事件的目标是浏览器窗口、事件的细节信息(按下左键)。
    eve.initMouseEvent("mouseup", true, true, window, 1, 0, 0, 472, 441, false, false, false, false, 0, null):初始化一个鼠标弹起事件对象。这里的参数和上面的 MouseEvent 构造函数的参数类似,但是事件类型变成了 mouseup。
    document.querySelector("#layaCanvas").dispatchEvent(eve):调度模拟的鼠标事件到指定的DOM元素(ID为 layaCanvas),即触发该元素的 mousedown 和 mouseup 事件。
    
    综上,这段代码用于模拟鼠标在指定DOM元素上按下和弹起的操作。
    已有3人评分好评 油猫币 贡献 理由
    wyn665817 + 1 + 3 ggnb!
    朱焱伟 + 1 + 4 ggnb!
    王一之 + 1 + 4 + 1 ggnb!

    查看全部评分 总评分:好评 +3  油猫币 +11  贡献 +1 

    接脚本定制
    I frequently record, because want to leave something.
  • TA的每日心情
    擦汗
    5 天前
  • 签到天数: 192 天

    [LV.7]常住居民III

    688

    主题

    5409

    回帖

    6360

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6360

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2023-3-20 22:40:36 | 显示全部楼层
    哥哥棒棒~
    有兴趣可以再深挖一下
    这方面论坛资料还是挺少的
    比如canvas有什么常见的游戏库
    初始化流程在哪
    有没有什么好用的注入点或者hook
    可不可以提取出来的数据之类的
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    5 天前
  • 签到天数: 276 天

    [LV.8]以坛为家I

    114

    主题

    454

    回帖

    981

    积分

    荣誉开发者

    积分
    981

    荣誉开发者油中2周年卓越贡献生态建设者油中3周年

    发表于 2023-3-20 22:49:03 | 显示全部楼层
    本帖最后由 wwwwwllllk 于 2023-3-20 22:50 编辑
    李恒道 发表于 2023-3-20 22:40
    哥哥棒棒~
    有兴趣可以再深挖一下
    这方面论坛资料还是挺少的
    还得是道哥来比较好,能力有限,估计要踩坑
    接脚本定制
    I frequently record, because want to leave something.
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2024-3-13 10:14
  • 签到天数: 211 天

    [LV.7]常住居民III

    298

    主题

    4033

    回帖

    3924

    积分

    管理员

    积分
    3924

    管理员荣誉开发者油中2周年生态建设者喜迎中秋油中3周年挑战者 lv2

    发表于 2023-3-20 22:56:48 | 显示全部楼层
    ggnb 好久没看见这种分享文章了啊
    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。/ 微信公众号:一之哥哥
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2022-3-8 11:41
  • 签到天数: 2 天

    [LV.1]初来乍到

    22

    主题

    869

    回帖

    1369

    积分

    荣誉开发者

    积分
    1369

    荣誉开发者卓越贡献油中2周年生态建设者油中3周年挑战者 lv2

    发表于 2023-3-21 20:14:02 | 显示全部楼层
    createEvent+initEvent是IE时代的一套事件创建流程,在现代浏览器中基本已经废弃了,改成直接new实例化。你代码第一句创建了一个未初始化的事件,第二句实际把这个事件覆盖了,第三句又重新初始化该事件为mouseup,最后触发的其实只有mouseup事件。正确触发mousedown+mouseup的代码应该是这样:
    1. const eventInit = {
    2.     cancelBubble: true,
    3.     cancelable: true,
    4.     clientX: 472,
    5.     clientY: 441,
    6.     view: window,
    7.     detail: 1
    8. };
    9. canvas.dispatchEvent(new MouseEvent('mousedown', eventInit));
    10. canvas.dispatchEvent(new MouseEvent('mouseup', eventInit));
    复制代码
    回复

    使用道具 举报

  • TA的每日心情
    开心
    5 天前
  • 签到天数: 276 天

    [LV.8]以坛为家I

    114

    主题

    454

    回帖

    981

    积分

    荣誉开发者

    积分
    981

    荣誉开发者油中2周年卓越贡献生态建设者油中3周年

    发表于 2023-3-21 22:03:57 | 显示全部楼层
    cxxjackie 发表于 2023-3-21 20:14
    createEvent+initEvent是IE时代的一套事件创建流程,在现代浏览器中基本已经废弃了,改成直接new实例化。你 ...

    感谢哥哥解答!!!!
    接脚本定制
    I frequently record, because want to leave something.
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2024-2-27 14:20
  • 签到天数: 88 天

    [LV.6]常住居民II

    22

    主题

    97

    回帖

    306

    积分

    荣誉开发者

    积分
    306

    油中2周年新人报道荣誉开发者生态建设者

    发表于 2023-3-26 14:33:41 | 显示全部楼层
    ggggggggggggnbbbbbbbbbbbbb!
    回复

    使用道具 举报

  • TA的每日心情
    奋斗
    2023-10-8 11:44
  • 签到天数: 15 天

    [LV.4]偶尔看看III

    0

    主题

    3

    回帖

    10

    积分

    助理工程师

    积分
    10
    发表于 2023-8-17 12:36:38 | 显示全部楼层
    有点懵逼了
    回复

    使用道具 举报

  • TA的每日心情

    2024-6-10 19:37
  • 签到天数: 4 天

    [LV.2]偶尔看看I

    0

    主题

    1

    回帖

    3

    积分

    助理工程师

    积分
    3
    发表于 2024-2-19 12:32:28 | 显示全部楼层
    吸星大法..
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表