如何识别画布中的形状？

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

通过这种方式，我们可以找出画布的对象