Нажатие на холст html5 при определении формы пути Безье - PullRequest
Новая
       23

Нажатие на холст html5 при определении формы пути Безье

8 голосов
/ 19 августа 2010

У меня есть холст с несколькими рисунками неправильной формы, и я хотел бы получить обратную связь, когда кто-то нажимает на конкретный?

Я искал это везде и нашел только решениядля прямоугольника.

Я думаю, что это может быть связано с isPointInPath (), но я еще не нашел краткое объяснение о том, как его использовать.

Ответы [ 3 ]

13 голосов
/ 23 августа 2010

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

Вот немного из учебника, который я написал по выбору объектов с помощью canvas: 

  // gctx is ghost context, made from the second canvas
  // clear(gctx)

  // ...

  // run through all the boxes
  var l = boxes.length;
  for (var i = l-1; i >= 0; i--) {
    // draw shape onto ghost context
    drawshape(gctx, boxes[i], 'black', 'black');

    // get image data at the mouse x,y pixel
    var imageData = gctx.getImageData(mx, my, 1, 1);
    var index = (mx + my * imageData.width) * 4;

    // if the mouse pixel exists, select and break
    if (imageData.data[3] > 0) {
      mySel = boxes[i];
      offsetx = mx - mySel.x;
      offsety = my - mySel.y;
      mySel.x = mx - offsetx;
      mySel.y = my - offsety;
      isDrag = true;
      canvas.onmousemove = myMove;
      invalidate();
      clear(gctx);
      return;
    }

  }

Моя полная демонстрация использует только прямоугольники, но в более поздней версии я буду использовать круги / пути / текст.

Если вы хотите увидеть демо и мой полный код, то здесь .

0 голосов
/ 24 августа 2015

Этого можно добиться с помощью Path2D. 

var div = document.getElementById("result");
var canvas = document.getElementById("canvas");

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

var path1 = new Path2D();
path1.rect(10, 10, 100, 100);
path1.closePath();
ctx.stroke(path1);

var path2 = new Path2D();
path2.moveTo(220, 60);
path2.arc(170, 60, 50, 0, 2 * Math.PI);
path2.closePath();
ctx.stroke(path2);

var path3 = new Path2D("M230 10 h 80 v 80 h -80 Z");
ctx.fill(path3);
path3.closePath();

$('canvas').click( function(event) 
{
  div.innerHTML = "";
  
  var x = event.pageX;
  var y = event.pageY;

  if (ctx.isPointInPath(path1, x, y))
    div.innerHTML = "Path1 clicked";

  if (ctx.isPointInPath(path2, x, y))
    div.innerHTML = "Path2 clicked";
  
  if (ctx.isPointInPath(path3, x, y))
    div.innerHTML = "Path3 clicked";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <canvas id="canvas"></canvas>
  <div id="result"></div>
</body>
0 голосов
/ 17 мая 2012

Вы можете использовать pathiterator, который превращает все фигуры в приближенные многоугольники.Затем используйте алгоритм «точка в многоугольнике», чтобы проверить, находится ли точка в форме.

...