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

Question

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

Answer 1

не может использовать любую существующую функциональность в 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 на холст и определить, на какую фигуру нажать.

Answer 2

Я хотел бы объяснить Pinpoint с помощью мыши события

Прежде всего, вы должны реализовать метод, чтобы получить позицию мыши

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. Прямоугольник

Say, мы имеем прямоугольник со следующими значениями 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. Круг

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

$(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') 
     }   
}); 

этим способом мы можем определить объект холста