キャンバスで図形を識別する方法は？

Question

キャンバスを定義してその上に少数のシェイプを描画すると、各シェイプのイベントやその他のプロパティを宣言するために、シェイプまたはイメージのそれぞれをどのように特定することができますか？私は長方形と三角形を持っていると考えてください。特定のエンティティとして定義するためのメカニズムを持つことができますし、個別に処理することもできます。私はKineticJSについて知っていますが、この機能を私自身で実装したいと思います（学習目的のために）。誰でもそれを行う方法を突き止めることができます。または、アルゴリズム的なアプローチかもしれませんか？

Answer 1

はDOMの既存機能を使用できません。だからあなたはそれをあなた自身で書く必要があります。そして、あなたは上のonclickイベントを処理することができ

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

：あなたはこのような図形を描画するためにそれを使用することができ、オブジェクトモデルを作った後

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. サークル

言って、私たちは