如何在复杂物体上绘画

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; 
})();

另外，取决于浏览器，合成也存在问题。