如何在復雜物體上繪畫

Question

我確實在畫布上畫了一個相當復雜的人物。 （〜1000個多邊形）。 它們所有的重塗時間約為1秒（非常慢）。 現在，我需要讓用戶移至該圖上並從鼠標位置下方顯示一條垂直線和一條水平線（十字線）。 最好的技術是僅繪制這兩條線，而無需遍歷所有多邊形並在每次鼠標移動時重新繪制所有內容。

謝謝

Answer 1

這個答案壞了。

您想畫線並移動它們而不會碰到基礎繪畫。 在過去的好日子里，使用的方法是在圖形的頂部用異或組成進行繪制，並在相同的位置以相同的方式繪制相同的圖案（此處為線條）以將其從屏幕上移除，而無需再次觸摸真正的繪畫。

我嘗試將這種方法與下面的代碼一起使用以對其進行測試，但它似乎不起作用。 希望有一個對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; 
})();

另外，取決於瀏覽器，合成也存在問題。