Как запускать события в Javascript на основе параметров местоположения щелчка мыши?

Question

Я пытаюсь создать приложение для рисования с HTML холстом и javascript. Но я бы хотел, чтобы изображения отображались в зависимости от того, где пользователь dr aws на холсте. Например, если пользователь dr aws в области над головой, отображается изображение шляпы.

Моим решением до сих пор был div, который помещается там, где я хочу, чтобы параметры были скрыты при щелчке мышью и после задержки (надеюсь, достаточно долго, чтобы пользователь мог закончить sh рисование) показывает изображение в другом 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, чтобы скрыть его, а затем нарисовать на холсте. Я бы хотел, чтобы пользователь dr aws прямо на холсте и javascript определял, был ли рисунок выполнен с определенными параметрами, чтобы вызвать отображение изображения.

Я пытался стиль div с указателями-событиями: none; поэтому пользователь может напрямую рисовать на холсте, но это означает, что 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

По логи c определить, находитесь вы в определенной области холста или нет, довольно просто. Метод 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>