如何在Canvas中识别形状？

Question

如果我定义一个画布并在其上绘制几个形状,那么我如何精确定位每个形状或图像,以便在每个形状上声明事件和其他属性.考虑我有一个矩形和一个三角形.我可以有一些机制,以便将它们定义为特定实体,我可以单独处理它们.我知道KineticJS,但我想自己实现这个功能(用于学习目的).任何人都可以找到实现它的方法.或者可能是一种算法方法？

Answer 1

我想用鼠标事件来解释精确定位

首先,你必须实现一个方法来获得鼠标位置

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

通过这种方式,我们可以精确定位画布的对象