如何根据鼠标点击位置参数触发Javascript中的事件？

Question

我正在尝试使用 HTML 画布和 javascript 创建一个绘图应用程序。但我希望根据用户在画布上绘制的位置显示图像。例如，如果用户在头部上方的区域绘图，则会显示一顶帽子的图片。

到目前为止，我的解决方案是放置一个 div，该 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。谢谢！

Answer 1

确定您是否在画布的某个区域的天气的逻辑相当简单。 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>