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

そして、次のようにhtml<div>の周りにa を配置します。<canvas>

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

そしてcssでこれを行います：

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