suchen

Heim  >  Fragen und Antworten  >  Hauptteil

javascript - Verwenden Sie Canvas, um eine elektronische Signatur zu implementieren und die Koordinaten der Maus im Canvas zu positionieren

Beim Versuch, die Leinwand zur Implementierung elektronischer Signaturen zu verwenden, können die Koordinaten der Maus auf der Leinwand nicht genau ermittelt werden.

let canvas = document.getElementById("canvas");
let cxt = canvas.getContext('2d');
canvas.onmousedown = function(ev){
    var ev = ev || window.event;
    cxt.moveTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop);
    document.onmousemove = function(ev){
      var ev = ev || window.event;
      cxt.lineTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop);
      cxt.stroke();
    };

    document.onmouseup = function(){
      document.onmousemove = null;
      document.onmouseup = null;
    };
};

Verwenden Sie ev.clientY 获取了鼠标的坐标,但是 canvas.offsetTop 获取的是 距离父元素的高度。而 canvas in einem Formular mit Bildlaufleisten, sodass es nicht genau positioniert werden kann.

Danke!

巴扎黑巴扎黑2752 Tage vor566

Antworte allen(1)Ich werde antworten

  • 巴扎黑

    巴扎黑2017-05-16 13:38:00

    已经找到解决方法了。直接调用 canvas.getBoundingClientRect() 可以获取到 canvas 相对于视窗到位置。

    Antwort
    0
  • StornierenAntwort