html 画布鼠标点击状态,html5捕获画布中的鼠标点击(html5 capturing mouse clicks in a canvas)...

html5捕获画布中的鼠标点击(html5 capturing mouse clicks in a canvas)

这是简化的代码，考虑了nycnik建议的答案。 代码效果更好，但是比例和偏移仍然是关闭的。 单击拖动和释放，绘制的线条似乎约为2关。

var x, y;

function getXY(canvas, e) {

var rect = canvas.getBoundingClientRect();

return [e.clientX - rect.left, e.clientY - rect.top];

}

function move(ca, e) {

}

function mark(ca, e) {

[x,y] = getXY(ca, e);

}

function clickDrag(ca, e) {

var c = ca.getContext("2d");

var x2, y2;

[x2,y2] = getXY(ca, e);

c.fillStyle='#00FF80';

c.lineStyle='#FFFF80';

c.moveTo(x,y);

c.lineTo(x2,y2);

c.stroke();

}

Here is simplified code that takes into account the answer suggested by nycnik. The code works better, but the scale and offset are still off. Click drag and release, and the line drawn appears to be approximately a factor of 2 off.

var x, y;

function getXY(canvas, e) {

var rect = canvas.getBoundingClientRect();

return [e.clientX - rect.left, e.clientY - rect.top];

}

function move(ca, e) {

}

function mark(ca, e) {

[x,y] = getXY(ca, e);

}

function clickDrag(ca, e) {

var c = ca.getContext("2d");

var x2, y2;

[x2,y2] = getXY(ca, e);

c.fillStyle='#00FF80';

c.lineStyle='#FFFF80';

c.moveTo(x,y);

c.lineTo(x2,y2);

c.stroke();

}

原文：https://stackoverflow.com/questions/17016493

更新时间：2019-11-13 15:39

最满意答案

您只需要使用您看到的clientX和边界矩形进行转换，如下所示，在本教程中：

function getMousePos(canvas, evt) {

var rect = canvas.getBoundingClientRect();

return {

x: evt.clientX - rect.left,

y: evt.clientY - rect.top

};

}

You just need to convert using clientX, that you saw, and the bounding rectangle, as seen below, and in this tutorial:

function getMousePos(canvas, evt) {

var rect = canvas.getBoundingClientRect();

return {

x: evt.clientX - rect.left,

y: evt.clientY - rect.top

};

}

相关问答

这是一个工作示例。

var canvas, ctx, flag = false,

prevX = 0,

currX = 0,

prevY = 0,

currY = 0,

dot_flag = false;

var x = "black",

y = 2;

fu

...

您只需要使用您看到的clientX和边界矩形进行转换，如下所示，在本教程中： function getMousePos(canvas, evt) {

var rect = canvas.getBoundingClientRect();

return {

x: evt.clientX - rect.left,

y: evt.clientY - rect.top

};

}

http://www.htm

...

“模拟”事件非常简单，事实上，您可以简单地触发它们。 使用jQuery，这变成了孩子的玩耍(参见这个jsfiddle的工作示例)： $('#canvas_element').on("mousedown mouseup", function(e) {

console.log(e.type + " event fired at coords: " + e.pageX + ", " + e.pageY);

});

x_coord = 1;

y_coord = 1;

var e = jQuery.Ev

...

这是一种无库的方式，涉及： 听mousedown事件： var canvas=document.getElementById("canvas");

canvas.οnmοusedοwn=handleMousedown;

测试单击的鼠标位置是否在矩形内： var rect={x:100,y:100,w:75,h:40};

// mx & my are the mouse coordinates

if(mx>=rect.x && mx<=rect.x+rect.w && my>=rect.y &

...

您可以在鼠标位置创建画布 http://jsfiddle.net/v4nm487b/ document.οnmοusedοwn=mouseDown;

document.οnmοuseup=mouseUp;

var x1,y1;

function mouseDown(e){

x1=e.clientX;

y1=e.clientY;

}

function mouseUp(e){

var can = document.createElement("CANVAS");

c

...

编辑：我的(接受的)答案是不好的。 这纠正了它： 这假定r是1到5.将鼠标笛卡尔mx，我转换为极性mr，mt。 首先检查mr是否接近5个半径中的1个。 函数检查器这样做。 如果距离近，则检查mt是否接近24个thetas中的1个。 功能检查就是这样做的。 一个复杂的情况是atan2函数在pi弧度处不连续，这就是点的位置，所以在没有点的情况下在-pi / 24弧度处做不连续点。 由于在r = 1处两个相邻点之间的弧距将是π/ 12，所以“接近”值是π/ 24。 var del = 1*Math.PI

...

如果现在有getBoundingClientRect，Dart有一个同步版本，所以你不必再使用异步版本了。 var clientRect = ctx.canvas.getBoundingClientRect();

ctx.canvas.on.click.add((e) {

var x = e.clientX - clientRect.left;

var y = e.clientY - clientRect.top;

});

在MouseEvent中还有“offsetX”和“offset

...

你正在寻找的事件是'pressup' ， 你可能还需要'mouseleave'和'mouseout' 。 奇怪的是，这个easeljs教程明确表示你可以像你刚才那样使用'mouseup'事件。 但是，当您查看有关附加到Stage类的事件和附加到DisplayObject类的 事件的文档时，没有提到这个'mouseup' 。 关于'pressup'活动： 在显示对象上发生mousedown后，当该按钮被释放时，将在该对象上生成新闻事件。 这对拖动和类似的操作很有用。 var stage = new

...

COPIED FROM： http ://simonsarris.com/blog/510-making-html5-canvas-useful 在Canvas上获取鼠标坐标 在Canvas上获得良好的鼠标坐标有点棘手。 您可以使用offsetX / Y和LayerX / Y，但在Webkit(Chrome和Safari)中不推荐使用LayerX / Y，并且Firefox没有偏移X / Y。 下面显示了获得正确鼠标位置的最佳方法。 你必须在树上走来走去，把偏移量加在一起。 然后，您必须向偏移量添

...