0

キャンバス ポインタ エラーが発生しました。目的の場所 (マウスの位置) にターゲットが表示されます。

http://jsfiddle.net/conmute/rk276q3g/

問題は Firefox のレンダリングにあります (マウスを非常に速く動かす):

http://jsfiddle.net/conmute/rk276q3g/1/

四角形の動作がおかしいので、うまくいきません。誰でも正確に何を指摘できますか？

ctx.rect(
    // start x,y pair
    patternOffset.x, -p.circle.h/2 - patternOffset.y - 12,
    // end x,y pair
    -p.repeat.w, distance - p.circle.h - 1
);

ctx.fillStyle = pattern;
ctx.fill();

ステータスアップデート

この問題を修正しました: http://jsfiddle.net/rk276q3g/2/

ctx.save() と .restore() をコメントアウトし、四角形を描画する前に矢印イメージを配置します。

実際に私はこの問題を修正しましたが、問題は...

質問の更新

... ctx.translate(... といくつかの描画を行った後に描画する必要がある場合はどうすればよいですか?

ctx.save() および .restore() メソッドを使用する必要がありますが、問題が発生します。コメントせずにこの作業を行うにはどうすればよいですか? それらを削除すると、問題が解決します。

それらがどのように機能するかを正しく理解していると思っていましたが、そうではないようです。

アップデート

ctx.restore()すべてを削除して解決したようですが、前の位置を計算して戻ったctx.save()後に描画するパーツを追加すると、問題が再び発生します。translate

参照してください: http://jsfiddle.net/rk276q3g/5/

4

1 に答える 1

0

save()とrestore()は次のように機能します。は<canvas>その状態のスタックを維持し、スタック内の各項目はコンテキストのすべての属性 ( lineStyle、strokeWidth、transform…) を表します。save()状態の新しいアイテムを呼び出すことにより、作成され、スタックにプッシュされます。アイテムを呼び出すとrestore()、スタックからポップされ、キャンバスの状態がスタックの一番上にあるアイテムのプロパティに設定されます。

これが良い例です。

あなたの質問に答えるには: 必要に応じて変更できる新しい現在のアイテムをスタックに作成するために、コンテキストを移動および回転する前にコンテキストの状態を保存する必要があります。重い作業を終えて、デフォルト値に基づいて何かを描画したい場合は、状態を復元する必要があり、すべてのペイント アクションはデフォルト値に基づいています。

あなたのように競合に遭遇しないように、私は常に次のパターンに従ってペイント メソッドを記述します。

function drawSomethingFanzy (ctx) {
    ctx.save();

   //some really awesome drawing here;

   ctx.restore();
}

編集

save()スタックに新しいアイテムを作成しますが、デフォルト設定を復元せず、すべての設定は変更されませんが、保存され、restore()後で編集できることを指摘し忘れました。

編集

フィドルから私のコンピューターに表示される結果のスクリーンショットを添付しました。私にとっては正しいように見えるので、正確な問題が何であるか、または達成したいことを示す写真を投稿していただけますか? 正直なところ、何が問題なのかわかりません。パターンフィルの隙間のことですか？

アップデート

ちょっと待って、あなたがここで欲しいと思うもののフィドルを作成しました。それが役立つことを願っています！

ここに画像の説明を入力

于 2014-11-03T09:09:23.807 に答える