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

Posted 2023-05-08

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

【英文标题】：How to trigger events in Javascript based on mouse click location parameters?

【发布时间】：2020-11-02 08:18:15

【问题描述】：

我正在尝试使用 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。谢谢！

【问题讨论】：

完成后等待一段时间的解决方案是使用更高阶的“去抖动”方法。看看 lodash debounce。您可以延迟运行放置对象的函数，直到它们完成绘图后的一段时间。

【参考方案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  >
</canvas>
<br/>
<span>Click and move the mouse to draw</span>