1

请检查小提琴。我通过答案得到了这个插件。当画布的位置固定时，它可以正常工作。但是当我将画布包含在可拖动的 div 中并移动 div 时，坐标会发生变化，因此我无法绘制任何东西。我希望触控笔捕捉画布 div 的坐标而不是页面。

JS 小提琴：http: //jsfiddle.net/sVsZL/1/

功能不工作：

function ev_canvas(ev) {
if (false) {
    ev._x = ev.touches[0].clientX;
    ev._y = ev.touches[0].clientY; // CH: Is there a better way to do this?
}
else if (ev.layerX || ev.layerX == 0) { // Firefox
    ev._x = ev.layerX;
    ev._y = ev.layerY;
}
else if (ev.offsetX || ev.offsetX == 0) { // Opera
    ev._x = ev.offsetX;
    ev._y = ev.offsetY;
}

ev._x = ev._x + 0.5;
//ev._y = ev._y + 0.5;
// Call appropriate event handler
var func = PEN[ev.type];
if (func) {
    func(ev);
}
}
4

1 回答 1

0

我知道这是一篇旧帖子，但我一直在寻找类似的鼠标定位解决方案，但我找到了。我的画布位于左侧并有边框。当我尝试相同的代码时，它也不起作用，所以我不得不修改它。我不知道它是否可以用于其他目的，例如拖动，但也许可以。

代替： 

   function ev_canvas(ev) {
if (false) {
    ev._x = ev.touches[0].clientX;
    ev._y = ev.touches[0].clientY; // CH: Is there a better way to do this?
}
else if (ev.layerX || ev.layerX == 0) { // Firefox
    ev._x = ev.layerX;
    ev._y = ev.layerY;
}
else if (ev.offsetX || ev.offsetX == 0) { // Opera
    ev._x = ev.offsetX;
    ev._y = ev.offsetY;
}

和：

function ev_canvas(ev) { 

     //Firefox
    if (ev.layerX || ev.layerX == 0) {
        ev._x = ev.layerX;
        ev._y = ev.layerY;
    // Any other browsers that may not use the above code
    } else if (ev.offsetX || ev.offsetX == 0) {
        ev._x = ev.offsetX;
        ev._y = ev.offsetY;
    }

然后像这样在in html<div>周围放置一个：<canvas>

<div id="container">
<canvas id='canvas' width='1050' height='700'></canvas>
</div>

然后在css中这样做：

#container { position: relative; }
于 2015-06-28T17:06:46.657 回答