如何識別畫布中的形狀？

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

來源

2012-03-22 Shiv Kumar Ganesh

請註明任何以上爲跟隨算法。就像JS Programming一樣。 – 2012-03-22 12:57:54

您不能使用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); 
    }   
}

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

來源

2012-03-22 13:04:29

繪畫方法是否意味着它重新繪製畫布上的每個細節，而不是操縱最後的圖像或形狀？ – 2012-03-22 13:24:12

繪製方法負責繪製形狀。您可以通過更改x，y，寬度或高度來操縱形狀。 – 2012-03-22 13:50:58

但是畫布中現有的形狀呢？如果我有一個現有的矩形我是否需要通過調用一個方法將其刪除？ – 2012-03-22 14:07:06

我想使用鼠標事件

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

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

矩形

說解釋精確，我們有一個具有下列值的矩形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') 
     }   
});

說，我們有以下的值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') 
     }   
});

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

來源

2012-03-22 13:17:27 shimul

如何識別畫布中的形狀？

回答

相關問題