如何根据鼠标点击位置参数在Javascript中触发事件？
如何根据鼠标点击位置参数在Javascript中触发事件？
提问于 2020-07-13 14:59:46
我正在尝试创建一个绘图应用程序与HTML画布和javascript。但我希望图像是根据用户在画布上绘制的位置显示的。例如，如果用户在头部上方的区域中绘制，则会显示一张帽子的图片。
到目前为止，我的解决方案是一个div，它被放置在我想要的参数所在的位置，在鼠标单击时隐藏，并在延迟后(希望足够用户完成绘图)在另一个div中显示一个图像。
$(document).ready(function(){
$(".hat").click(function(){
$("#hathide").delay( 3000 ).fadeIn( 200 );
});
});
$(document).ready(function(){
$(".hat").click(function(){
$(".hat").hide(0);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="main-content">
<div class="left">
<div class="grid-container">
<div><img id="hathide" src="img/hat.gif" style="display:none"></div>
</div>
</div>
<div class="right">
<div class="hat">draw a hat</div>
<div class="drawingcanvas"><div>
<div class="image-container">
<img src="img/person.jpg">
</div>
</div>
这不符合我的需要，因为这意味着用户需要首先单击div将其隐藏，然后在画布上绘制。我希望它能让用户直接在画布上绘图，并让javascript检测绘图是否在触发图像显示的特定参数内完成。
我试着用pointer-events:none设置div的样式，这样用户就可以直接在画布上绘制，但这意味着div不能作为目标，也不会隐藏。
此外，这个方法并不真正监听用户的输入，它看起来是这样的。我想要它，这样当用户鼠标在参数中被按下并释放鼠标时，就会调用一个事件。理想情况下，它将独立于用于绘图的javascript代码，因此不会有任何干扰？
我对JS或jQuery不是很熟悉，不足以编写我自己的语法，但我会考虑类似以下内容的内容
$canvas.mouseup(
If 100 < page.x < 400, and 100 < page.y < 400: then show div;
Else none
)对不起，这不是真正的代码。
我一直在浏览这个网站，试图找到替代的解决方案，但我似乎无法自己找到解决方案。
任何帮助和解决方案都将不胜感激。它不一定是Javascript/jQuery。谢谢!
回答 1
Stack Overflow用户
发布于 2020-07-13 17:13:54
确定您是否在画布上的某个区域的逻辑相当简单。getMousePos()方法返回鼠标相对于给定事件的目标元素的左上角的x和y位置。
/**
* Get the mouse position relative to the top left corner
* of the target element of the given event
*/
function getMousePos( e ) {
let $el = $(e.target);
let elX = e.pageX - $el.offset().left;
let elY = e.pageY - $el.offset().top;
return {
x: elX,
y: elY
};
}
function inTarget( mousePos ) {
// consider using a map to use multiple target areas
return mousePos.x > 100 && mousePos.x < 200 && mousePos.y > 100 && mousePos.y < 200
}
function doSomething() {
$('#hat').show();
}
function doSomethingElse() {
$('#hat').hide();
}
$('canvas').on('mousedown', function() {
// enable draw mode
$(this).data('drawMode', true);
});
$('body').on('mouseup', function() {
$('canvas').data('drawMode', false);
})
$('canvas').on('mousemove', function( e ) {
if(!$(this).data('drawMode')) {
return;
}
let mousePos = getMousePos( e );
if( inTarget( mousePos ) ) {
doSomething();
}else{
doSomethingElse();
}
});canvas {
border: 1px solid #CECECE;
background-color: #F1F1F1;
}
#hat {
position: absolute;
width: 100px;
height: 100px;
background: red;
top: 100px;
left: 100px;
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="hat"></div>
<canvas width="300" height="300">
</canvas>
<br/>
<span>Click and move the mouse to draw</span>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62870723
复制相关文章
相似问题
腾讯云开发者
