2

モバイル デバイスで署名を取得するためのコンポーネントを作成しています。私のコードは、iOS と Android の両方で正常に動作しています。ただし、すべてのデバイスではありません。

たとえば、Galaxy Tab 2 7.0 でテストしていたところ、すべてが期待どおりに動作しました。Android ブラウザ、Chrome、FF、Opera、Maxthon でテストしました。問題ない。

現在、Galaxy Note 2 でテストしていますが、なぜ Chrome で動作しないのか疑問に思っています。エラーはありません。私のJavaScriptは正常に動作しています。しかし、入力はキャンバスにレンダリングされません。Android ブラウザでは、期待どおりに動作します。

何か案は？

ここに私のハンドラがあります:

var canvas = document.getElementById('canvas');
var startedPainting = false;

canvas.addEventListener("mousedown", handleStart, false);
canvas.addEventListener("mousemove", handleMove, false);
canvas.addEventListener("mouseup", handleEnd, false);
canvas.addEventListener("touchstart", handleStart, false);
canvas.addEventListener("touchmove", handleMove, false);
canvas.addEventListener("touchend", handleEnd, false);

function handleStart(evt) {
      evt.preventDefault();

      startedPainting = true;
      var el = $("#canvas").get(0);
      var ctx = el.getContext("2d");
      ctx.lineWidth = 3;
      var touches = evt.changedTouches;

      if (touches) {
        ctx.moveTo(touches[0].pageX - el.offsetLeft, touches[0].pageY - el.offsetTop);
        for (var i=0; i<touches.length; i++) {
            ctx.lineTo(touches[i].pageX - el.offsetLeft, touches[i].pageY - el.offsetTop);
          }
      }
      else{
            ctx.moveTo(evt.pageX - el.offsetLeft, evt.pageY - el.offsetTop);
            ctx.lineTo(evt.pageX - el.offsetLeft, evt.pageY - el.offsetTop);
      }           
      ctx.stroke();
    }


function handleMove(evt) {
      evt.preventDefault();

      if (startedPainting) {
          var el = $("#canvas").get(0);
          var ctx = el.getContext("2d");
          ctx.lineWidth = 3;
          var touches = evt.changedTouches;

          if (touches) {
            for (var i=0; i<touches.length; i++) {           
                ctx.lineTo(touches[i].pageX - el.offsetLeft, touches[i].pageY - el.offsetTop);
              }
          }
          else{
                ctx.lineTo(evt.pageX - el.offsetLeft, evt.pageY - el.offsetTop);
          }
          ctx.stroke();       
      }
    }

function handleEnd(evt) {
      evt.preventDefault();
      startedPainting = false;
      var el = $("#canvas").get(0);
      var ctx = el.getContext("2d");
      ctx.lineWidth = 3;
      var touches = evt.changedTouches;

      if (touches) {
            for (var i=0; i<touches.length; i++) {
                ctx.lineTo(touches[i].pageX - el.offsetLeft, touches[i].pageY - el.offsetTop);
              }
      }
      else{
        ctx.lineTo(evt.pageX - el.offsetLeft, evt.pageY - el.offsetTop);
      }
      ctx.stroke();       
    }
4

1 に答える 1

0

これは GPU ドライバーの問題のようです。Google はこの問題を認識しており、Chromium イシュー データベースでケース #231082 に関する議論が行われています。

https://code.google.com/p/chromium/issues/detail?id=231082

この問題は修正されたようで、(2013 年 6 月 26 日現在) 現在ベータ版です。

于 2013-06-27T00:02:03.583 に答える