Добавление клика в isPointinPath

0

У меня на холсте три прямоугольника.

Когда моя мышь находится на пути оранжевого прямоугольника, появляется зеленый. Я хочу изменить его, когда мышь находится в оранжевой форме и нажата.

Чтобы избежать путаницы, я взял green(ctx) из функции init THOUGH Я оставил функцию green(ctx) ссылкой. Это нецелесообразно.

<!DOCTYPE html>

<!-- Created with Ai->Canvas Export Plug-In Version 1.0 (Mac) -->
<!-- By Mike Swanson (http://blogs.msdn.com/mswanson/)        -->
<!-- and MIX Online  (http://visitmix.com/)                   -->

<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <title>testclick</title>
  <script>

    function init() {

      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");

      tan(ctx);

      orange(ctx);

      canvas.onmousemove = function (e)
        {
            var canvas = e.target;
            var ctx = canvas.getContext('2d');

            // This gets the mouse coordinates (relative to the canvas)
            var mouseX  =  e.clientX - canvas.getBoundingClientRect().left;
            var mouseY  =  e.clientY - canvas.getBoundingClientRect().top;


            // Replay the rectangle path (no need to fill() it) and test it
            ctx.beginPath();
            ctx.moveTo(663.3, 254.3);
            ctx.lineTo(516.0, 254.3);
            ctx.lineTo(516.0, 176.7);
            ctx.lineTo(663.3, 176.7);
            ctx.lineTo(663.3, 254.3);

            if (ctx.isPointInPath(mouseX, mouseY)) {
                ctx.save();
                ctx.beginPath();
                ctx.moveTo(417.3, 320.7);
                ctx.lineTo(113.3, 320.7);
                ctx.lineTo(113.3, 0.0);
                ctx.lineTo(417.3, 0.0);
                ctx.lineTo(417.3, 320.7);
                ctx.closePath();
                ctx.fillStyle = "rgb(60, 127, 60)";
                ctx.fill();
                ctx.restore();

            }

        }
    }

    function tan(ctx) {

      // tan/Path
      ctx.save();
      ctx.beginPath();
      ctx.moveTo(393.3, 422.7);
      ctx.lineTo(0.0, 422.7);
      ctx.lineTo(0.0, 52.7);
      ctx.lineTo(393.3, 52.7);
      ctx.lineTo(393.3, 422.7);
      ctx.closePath();
      ctx.fillStyle = "rgb(255, 238, 191)";
      ctx.fill();
      ctx.restore();
    }

    function green(ctx) {

      // green/Path
      ctx.save();
      ctx.beginPath();
      ctx.moveTo(417.3, 320.7);
      ctx.lineTo(113.3, 320.7);
      ctx.lineTo(113.3, 0.0);
      ctx.lineTo(417.3, 0.0);
      ctx.lineTo(417.3, 320.7);
      ctx.closePath();
      ctx.fillStyle = "rgb(60, 127, 60)";
      ctx.fill();
      ctx.restore();
    }

    function orange(ctx) {

      // orange/Path
      ctx.save();
      ctx.beginPath();
      ctx.moveTo(663.3, 254.3);
      ctx.lineTo(516.0, 254.3);
      ctx.lineTo(516.0, 176.7);
      ctx.lineTo(663.3, 176.7);
      ctx.lineTo(663.3, 254.3);
      ctx.closePath();
      ctx.fillStyle = "rgb(240, 89, 41)";
      ctx.fill();
      ctx.restore();
    }


  </script>
 </head>
 <body onload="init()">
   <canvas id="canvas" width="664" height="423"></canvas>
 </body>
</html>
  • 0
    Объясни свою проблему ... не понятно что ты хочешь. Включите только соответствующий код.
  • 0
    вы уже исправили проблему
Теги:
canvas

1 ответ

1
Лучший ответ

Если вы хотите, чтобы цвет изменялся только при нажатии, просто замените:

canvas.onmousemove

с

canvas.onclick

Здесь есть скрипка (надеюсь, я правильно понял тебя здесь).

Поделиться
  • 0
    Это для события click , верно? Он все еще мог использовать событие mousemove чтобы применить свои «оранжевые формы», но избегая обработки mousemove внутри него.
  • 0
    @ AlejandroIván, если честно, вопрос мне немного неясен. Возможно, ОП сможет пролить свет на это. В любом случае он может удерживать движение мыши и обрабатывать результат pointInPath по-разному.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню