javascript - 使用 JQuery 在 HTML5 画布上的特定 XY 位置单击
问题描述
我想自动点击在 html5 画布上制作的在线游戏。
在这个在线游戏中,有 2 个画布相互重叠:
bg-canvas :背景图片和静态组件。
fg-canvas :一些加载,按钮和其他人员。
页面有 jQuery。我使用 google chrome devtool 控制台注入我的代码。首先,我为点击 #fg-convas 注入一个侦听器,为 #bg-canvas 注入另一个侦听器:
$("#fg-canvas").on("click",function(e){
console.log("fg-canvas clicked");
});
$("#bg-canvas").on("click",function(e){
console.log("bg-canvas clicked");
});
在我单击画布时注入此代码后,我fg-canvas clicked
在控制台中看到。
现在我的问题:
在这个画布(fg-canvas)中有一个按钮,我想用 jquery 代码点击它。我可以通过上级监听器获取画布中按钮的位置,然后单击按钮:
var e = jQuery.Event( "click");
e.offsetX= ox-10; //ox is the x position i get with listener click
e.offsetY= oy-10; //oy is the y position i get with listener click
$('#fg-canvas').trigger(e);
当此代码运行时,我可以看到侦听器打印fg-canvas clicked
但未单击按钮!
在此之后,我想也许我点击了错误的位置,我改变了点击侦听器,用这段代码在那个位置画了一个圆圈:
$("#fg-canvas").on("click",function(e){
console.log("fg-canvas clicked");
var canvas = document.getElementById('bg-canvas');
var context = canvas.getContext('2d');
context.beginPath();
context.arc(e.offsetX, e.offsetY, 50, 0, 2 * Math.PI);
context.fillStyle = "green";
context.fill();
context.stroke();
});
使用此代码,当单击触发按钮上绘制绿色圆圈但未单击时:((
我所有的代码是:
console.log("I AM HERE");
$("body").append('<button style="position:absolute;top:0;" id="test">test</button>');
var ox =0 , oy =0;
$("#fg-canvas").on("click",function(e){
console.log("fg-canvas clicked");
var canvas = document.getElementById('bg-canvas');
var context = canvas.getContext('2d');
context.beginPath();
context.arc(e.offsetX, e.offsetY, 50, 0, 2 * Math.PI);
context.fillStyle = "green";
context.fill();
context.stroke();
});
$("#test").on("click",function(){
var e = jQuery.Event( "click");
e.offsetX= ox-10;
e.offsetY= oy-10;
console.log(e);
$('#fg-canvas').trigger(e);
});
html代码:
<div id="canvas-holder" style="height: 900px !important;">
<canvas id="bg-canvas" width="1200" height="900" dir="rtl" style="z-index:0;width: 1200px; height: 900px;"></canvas>
<canvas id="fg-canvas" width="1200" height="900" dir="rtl" style="z-index:1;width: 1200px; height: 900px;"></canvas>
</div>
解决方案
而不是使用ox变量,您可以考虑动态获取画布的宽度和高度,然后您可以获得中心点,例如:
e.offsetX= $('#fg-canvas').width() / 2;
e.offsetY= $('#fg-canvas').height() / 2;
为了获得更多帮助,请添加一个 html 片段。
片段:
$("body").append('<button style="position:absolute;top:0;" id="test">test</button>');
var ox =0 , oy =0;
$("#fg-canvas").on("click",function(e){
var canvas = document.getElementById('bg-canvas');
var context = canvas.getContext('2d');
context.beginPath();
context.arc(e.offsetX, e.offsetY, 50, 0, 2 * Math.PI);
context.fillStyle = "green";
context.fill();
context.stroke();
});
$("#test").on("click",function(){
var e = jQuery.Event( "click");
e.offsetX= $('#fg-canvas').width() / 2;
e.offsetY= $('#fg-canvas').height() / 2;
$('#fg-canvas').trigger(e);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="fg-canvas"></canvas>
<canvas id="bg-canvas"></canvas>
推荐阅读
- txt - 我想一次将字符添加到txt文档中所有行的开头和结尾
- drools - jBPM 登录失败:未授权:所有预定义用户都不起作用
- reactjs - 使用 CRSF 和自定义标头在 React 中重定向
- kendo-ui - 向 Kendo Grid 指定列中的所有单元格添加更改事件
- java - 如何使webview返回上一页并且不显示about:空白?
- screen-scraping - 当我使用 selenium webdriver.Chrome().close() 时,它会切换到之前的窗口吗?
- c++ - Eigen:我需要定义一个具有定义大小的矩阵 - 不是动态(不是堆)而是固定大小(在堆栈上)
- flutter - 颤动的TexteditingController在ios上不起作用
- java - 如何在 firebase 数据库中隐藏类似数据?
- python - 在字符串中查找多个子字符串而不对其进行多次迭代