如何識別畫布中的形狀？

Question

如果我定義一個畫布並在其上繪製幾個形狀，那麼我如何精確定位每個形狀或圖像以便在每個形狀上聲明事件和其他屬性。考慮我有一個矩形和一個三角形。所以我可以有一些機制來把它們定義爲特定的實體，我可以單獨處理它們。我知道KineticJS，但我想自己實現這個功能（用於學習目的）。任何人都可以指出做到這一點的方式。或者可能是一種算法方法？

Answer 1

您不能使用DOM中的任何現有功能。所以你必須自己寫。

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

然後你就可以處理的onclick事件：

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); 
    }   
} 

讓你可以用它來繪製形狀像這樣的對象模型後：你可以通過做一個對象模型，這樣啓動畫布並確定單擊哪個形狀。

Answer 2

我想使用鼠標事件

首先，你必須實現一個方法來獲得鼠標的位置

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

通過這種方式，我們可以找出畫布的對象