javascript - 複雑なオブジェクトをペイントする方法

Question

私はかなり複雑な図をキャンバスに描いています。（〜1000ポリゴン）。それらすべての再塗装時間は約1秒です（非常に遅い）。次に、ユーザーがその図の上を移動して、マウスの位置の下から垂直線と水平線（十字線）を表示できるようにする必要があります。すべてのポリゴンを越えずにこれらの2本の線だけをペイントし、マウスを動かすたびにすべてを再ペイントするための最良のテクニックは何ですか。

どうも

Answer 1

この答えは壊れています。

下にある絵に触れずに線を引いて動かしたい。古き良き時代には、描画の上にxor構成でペイントし、同じ場所に同じパターン（ここでは線）を同じ方法で描画して、画面から削除する方法が使用されていました。本物の絵。

以下のコードでこのメソッドを使用してテストしようとしましたが、機能しないようです。うまくいけば、canvasとjsの知識が豊富な人が出てきて問題を解決してくれるでしょう。

function onmousemove(e){
  // firt run
  var tcanvas = document.getElementById("testCanvas");
  var tcontext = tcanvas.getContext("2d");
  var pos = {x : e.clientX, y : e.clientY, 
             w : tcanvas.width, h : tcanvas.height };
  var comp = tcontext.globalCompositeOperation;
  var paintline = function (p){
      tcontext.save();

      tcontext.lineWidth = 1;
      tcontext.globalCompositeOperation = 'xor';
      tcontext.fillStyle = "#000000";

      tcontext.moveTo(0,p.y);
      tcontext.lineTo(p.w,p.y);
      tcontext.moveTo(p.x,0);
      tcontext.lineTo(p.x,p.h);
      tcontext.stroke();

      tcontext.restore();
  };

  tcontext.save();
  paintline(pos);
  tcontext.restore();

  var next = function(e){
      var comp = tcontext.globalCompositeOperation;
      paintline(pos);
      pos = {x : e.clientX, y : e.clientY, 
             w : tcanvas.width, h : tcanvas.height };
      paintline(pos);
  };
  document.onmousemove = next;
}


(function draw_stuff(){
    // setup canvas
    var tcanvas = document.getElementById("testCanvas");
    var tcontext = tcanvas.getContext("2d");

    // draw square
    tcontext.fillStyle = "#FF3366";
    tcontext.fillRect(15,15,70,70);

    // set composite property
    tcontext.globalCompositeOperation = 'xor';

    // draw text
    tcontext.fillStyle="#0099FF";
    tcontext.font = "35px sans-serif";
    tcontext.fillText("test", 22, 25);
    // draw circle
    tcontext.fillStyle = "#0099FF";
    tcontext.beginPath();
    tcontext.arc(75,75,35,0,Math.PI*2,true);
    tcontext.fill();
    document.onmousemove = onmousemove; 
})();

また、ブラウザによっては合成に問題があります。