Как определить фигуры в Canvas? - PullRequest
Новая
       33

Как определить фигуры в Canvas?

3 голосов
/ 22 марта 2012

Если я определю холст и нарисую на нем несколько фигур, то как я могу точно определить каждую фигуру или изображение, чтобы объявить события и другие свойства каждой фигуры.Представьте, что у меня есть прямоугольник и треугольник.ТАК, могу ли я иметь какой-то механизм, чтобы определить их как конкретную сущность, и могу ли я иметь дело с ними индивидуально.Я знаю о KineticJS, но я хотел бы реализовать эту функцию самостоятельно (для целей обучения).Может кто-нибудь точно определить способ сделать это.Или может быть алгоритмический подход ??

Ответы [ 2 ]

6 голосов
/ 22 марта 2012

Я бы хотел объяснить точную точку с помощью событий мыши

Прежде всего вам необходимо реализовать метод для определения положения мыши 

    function getMousePos(canvas, evt){
    // get canvas position
    var obj = canvas;
    wrapper = document.getElementById('wrapper');
    var top = 0;
    var left = 0;
    while (obj && obj.tagName != 'BODY') {
        top += obj.offsetTop;
        left += obj.offsetLeft;
        obj = obj.offsetParent;
    }

    // return relative mouse position
    var mouseX = evt.clientX - left + window.pageXOffset+wrapper.scrollLeft;
    var mouseY = evt.clientY - top + window.pageYOffset+wrapper.scrollTop;
    return {
        x: mouseX,
        y: mouseY
    };
}
  1. Прямоугольник

Скажем, у нас есть прямоугольник со следующими значениями x1, y1, w, h 

$(canvas).mousemove(function(e){

        //Now call the method getMousePos
         var mouseX, mouseY;
         var mousePos = getMousePos(canvas, e);
         mouseX=mousePos.x;
         mouseY=mousePos.y; 

        // check if move on the rect

        if(mouseX>x1 && mouseX<x1+w && mouseY>y1 && mouseY<y1+h)
        {
            alert('mouse on rect')
        }        
});
  1. Круг

Скажем, у нас есть круг со следующими значениями x, y, r 

$(canvas).mousemove(function(e){

        //Now call the method getMousePos
         var mouseX, mouseY;
         var mousePos = getMousePos(canvas, e);
         mouseX=mousePos.x;
         mouseY=mousePos.y; 

        // check if move on the rect

       if(Math.pow(mouseX-x,2)+Math.pow(mouseY-y,2)<Math.pow(r,2))
        {
            alert('mouse on circle')
        }        
});

Таким образом, мы можем точно определить объект canvas

1 голос
/ 22 марта 2012

Вы не можете использовать для этого любые существующие функции в DOM. Таким образом, вы должны написать это самостоятельно. Вы можете начать с создания объектной модели, подобной этой: 

function Shape(x, y) {
  var obj = {};
  obj.x = x;
  obj.y = y;

  obj.paint = function(canvasTarget) {
  }

  return obj;
}

function Rectangle(x, y, width, height) {
  var obj = Shape(x, y);
  obj.width = width;
  obj.height = height;

  obj.paint = function(canvasTarget) {
     //paint rectangle on the canvas
  }

  return obj;
}

function Canvas(target) {
  var obj = {};
  obj.target = target
  obj.shapes = [];

  obj.paint = function() {
     //loop through shapes and call paint
  }

  obj.addShape(shape) {
     this.shapes.push(shape);
  }        
}

После создания объектной модели вы можете использовать ее для рисования таких фигур: 

var cnv = new Canvas();
cnv.addShape(new Rectangle(10,10,100,100));
cnv.paint();

Затем вы можете обработать событие onclick на холсте и определить, по какой фигуре щелкнули.

...