0

Cordova + Onsen Ui 2 + javascript でアプリを開発しているのですが、javascript の移動イベントから座標 X と Y を取得するのに問題が発生しています。mousemove (起動しませんでした) とドラッグを試しました (ただし、イベント オブジェクトから pageX または clientX を取得しようとすると未定義になりました)。キャンバスでの描画に関する例はまだ見つかりませんでした。よろしくお願いします！

Javascript: 

var canvasListener = function(){    
    canvas = document.getElementById("canvas");    
    canvas.addEventListener('mousedown', function(event){
        var coordinates = painting(event);           
    });
    canvas.addEventListener('drag', function(event){
           var coordinates = painting(event); 
    });
    canvas.addEventListener('mouseup', function(event){
        var coordinates = painting(event);
    });
}

function painting(event){
    var x = event.clientX;
    var y = event.clientY;
    var touchX = x - signatureCanvas.offsetLeft;
    var touchY = y - signatureCanvas.offsetTop;
    var localCoordinates;    
    if(event.type == 'mouseup'){
        localCoordinates = {
            x: 0,
            y: 0
        };
    }else{
        localCoordinates = {
            x: touchX,
            y: touchY
        };
    }    
    return localCoordinates;
}

HTML: 

<canvas id="canvas"></canvas>
4

3 に答える 3

0

通常event.clientX、 、event.clientY、および の結果を使用しますcanvas.getBoundingClientRect();。以下は、MouseMove イベントを使用した例です。

can.addEventListener('mousemove', function(e) {
  var canwidth = can.width;
  var canheight = can.height;
  var bbox = can.getBoundingClientRect();
  var mx = e.clientX - bbox.left * (canwidth / bbox.width);
  var my = e.clientY - bbox.top * (canheight / bbox.height);

  // output it to see results:
  ctx.fillRect(mx, my, 1, 1);
})

これは、すべてのプラットフォームのすべてのマウス/タッチ イベントで機能し、多くの困難な CSS 状況に対応します。

実際の例: http://codepen.io/simonsarris/pen/NNVQpj?editors=1010

于 2016-05-19T19:37:26.367 に答える