0

我有这个画布 mousedown 事件：

$('#canvas').mousedown(function(e) {
    var coords = canvas.getMousePos(e); // user helper function

    if (coords.x >= 0 && coords.x <= 16 && coords.y >= 32 && coords.y <= 48) {
        tool = "fill";
    } else if (coords.x >= 16 && coords.x <= 32 && coords.y >= 32 && coords.y <= 48) {
        tool = "circle";
    }
});

我也在这个画布上绘制图像，就像在我的文档准备功能中一样：

var imgCircle = new Image();
imgCircle.src = "circle.png";

imgCircle.onload = function() {
    toolboxContext.drawImage(imgCircle, 16, 32);
}

我不喜欢在我的 if 语句中使用像这样的硬编码值。我想知道是否有一种方法可以获取画布中图像的本地坐标或实际注册事件以单击所述图像。谢谢阅读。

4

3 回答 3

2

您不能直接在对象上注册事件，但很容易在画布上注册事件，如

canvas.addEventListener("mousedown", function(e) {

（你可能对“mouseup”更感兴趣）

然后你可以得到画布中的坐标

e.pageX-$(canvas).offset().left

和

e.pageY-$(canvas).offset().top

（这里使用 jQuery 轻松跨平台定位画布，但您可以使用标准 javascript）

之后，您只需与您必须保存在某处的图像位置进行比较。我个人使用 Rect 类来实现该效果：

function Rect(x,y,w,h){
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
}
Rect.prototype.contains = function(x, y) {
    return x>=this.x && x<=this.x+this.w && y>=this.y && y<=this.y+this.h;
};
于 2012-06-29T17:37:23.177 回答
0

我认为您期望它像 DOM API 一样工作。画布上下文对象只是在像素网格上绘制东西的一组方法。像素网格是唯一保存的真实状态信息。没有方形或矩形对象为您保存坐标。只是在地图上绘制矩形和圆形的方法。维护和响应该信息的变化要么是 DIY，要么你需要查看一个为你做这件事的库。

但是，您可以使用 jQuery 即时编写和侦听通用对象上的新事件。

var someObj = {};
//bind - unfortunate choice for the generic listening method
$(someObj).bind('HiSomeObj',function(){ alert('hi, whoever triggered this event on me'); });
$(someObj).trigger('HiSomeObj'); //'hi, whoever triggered this event on me'

//note how in the following trigger below how I add properties to the event object

这是一种利用这一点的粗略的 DIY 方法。

//your constructor object - assumes 16px diameter (mostly reusing your code)
function imgCircleObjConstructor16px(xArg, yArg){

    var imgCircle = new Image(),

     //following 2 are var defs and public for convenience

    diameter = this.diameter = 16, //hard-coded for now
    coords = this.coords = [xArg,yArg],
    that = this; //locks down reference to instance for use in JQ

    imgCircle.src = "circle.png";

    this.draw = function(x,y){
        //some function that clears canvas or resets context for redraws
        clearCanvasOrContext();

        toolboxContext.drawImage(imgCircle, x, y);
        this.coords = [x,y];
    }

    $('#canvas').mousedown(function(e) {
        var mouseXY = canvas.getMousePos(e);
        if( mouseXY.x >= coords[0]) && mouseXY.x <= coords[0]+diameter &&
            mouseXY.y >= coords[1] && mouseXY.y <= coords[1] ){

            //trigger custom events with JQ 'trigger' method
            //can't use 'this' because it refers to the jq object for #canvas here
            $(that).trigger('circleBoundingBoxClicked', { someProperty:'optional' } );

            //note: second arg in trigger func serves no purpose
            //just provided as an example of adding properties to event objects

        }
    }
    //might as well tell the circle to draw itself when the object is instantiated:
    this.draw();
}

var myCircle = new imgCircleObjConstructor16px(16,32);

//listen to custom events with 'bind' method
$(myCircle).bind('circleBoundingBoxClicked', function(e){

    var circleObj = e.target; //JQ puts object args from the $ func under target property
    alert('Circle Bounding box at x: '+circleObj.coords[0]+', y:'+circleObj.coords[1]
        +' was clicked. someProperty value: ' + e.someProperty);

//After you fix whatever syntax goofs I didn't test for, this should alert when clicked:
//'Circle Bounding box at x: 15, y:32 was clicked. someProperty value: optional'

} );

现在，当您使用 myCircle.draw 方法重绘圆时，事件侦听器应该响应新的坐标。

于 2012-06-29T19:15:05.493 回答
0

有一种方法可以获取用户触摸位置的坐标 x 和 y：

<canvas id="none"></canvas>
<script>
    var canvas = document.getElementById("none");
    var ctx = canvas.getContext("2d");

    canvas.onclick = (e) => {
        let x = e.offsetX;
        let y = e.offsetY;

        console.log(`x: ${x}, y: ${y}`);
    }
</script>

和offset

于 2021-12-07T15:40:40.407 回答