1

最近、canvas を使用して簡単なペインターを作成しようとしました。マウスダウンを使用して開始点をキャプチャしました。mousemove で、開始点から現在の点まで線を引き、開始点を現在の点に置き換えました。最後に、マウスアップ時のイベント ハンドラーを削除しました。このソリューションは、Chrome、Firefox、およびサファリで完全に機能しましたが、IE9 でテストしたところ、厄介なバグに遭遇しました。私が描く線は、マウスアップ イベントの後にのみ表示されます。なぜこれが起こっているのか、どうすれば修正できるのかについてのアイデアはありますか?

問題を実証するために簡単なテスト ページを追加しました http://kfirg.com/rage/main.htm 長い線や円などを描いてみてください。Chrome では完璧に動作しますが、IE9 では狂ったように遅くなります。

注: この単純なペインタには、jQuery と jCanvas を使用しました。また、キャンバス API を直接使用して自分で実装しようとしたところ、同じ問題が発生しました。

更新された jsFiddle: http://jsfiddle.net/t5QpN/1/

4

2 に答える 2

1

あなたのコードは mousemove イベントには重いと思います:

 var fncMouseMoveHandler = function (e) {
        console.log('Move!', 'e', { x: e.offsetX, y: e.offsetY }, 'prev', prev);
        $main_canvas.drawLine({
            strokeStyle: settings.color,
            strokeWidth: 2,
            strokeCap: "round",
            strokeJoin: "miter",
            x1: prev.x,
            y1: prev.y,
            x2: e.offsetX,
            y2: e.offsetY
        });
        prev = { x: e.offsetX, y: e.offsetY };
    }

API を使用して、スタイルを適用し、不要なものを計算しています。描画のためのコードはとてもシンプルでなければなりません: 座標を取得し、次のように描画します:

context.lineTo(x, y);
context.stroke();

ストロークのスタイルは mousemove イベントで定義しないでください。キャンバスは設定を記憶します。

優れたチュートリアルは、オペラ デベロッパー センターで利用できます: http://dev.opera.com/articles/view/html5-canvas-painting/

于 2012-04-13T18:23:06.737 に答える
1

実際には IE よりも多くのバグがあります。私のテストから、線は散発的に描かれています。

テストするために、これの jsFiddle を作成しました。

私はアイデアだけで答えを持っていません。このような鉛筆画タイプのキャンバス アプリをダウンさせたことはありません。マウスがダウンしているときにポーリングで実行しました。コンソールを見ると、描画コードが IE で期待どおりに実行されていることは明らかです。マウスの動きは、好きなだけ発射する必要があります。

それで、取引は何でしょうか。私は2つのことのうちの1つを考えています

  1. IE はスレッド内の何か他の処理で忙しすぎて、マウスが上がるまでキャンバスを描画できません
  2. (1 に関連) 描画の頻度が高すぎてオーバーロードしている可能性があります

これら 2 つのどちらかが正しい場合、マウスの位置を X ミリ秒ごとにポーリングするように切り替える必要があると思います。滑らかな線にはなりませんが、見栄えが良くなるまで X を調整できます。

お役に立てれば！

于 2012-04-13T14:39:25.217 に答える