如何在复杂物体上绘画

Question

I do have a fairly complex figure painted on canvas. (~ 1000 polygons). The repainting time for all of them is about 1 sec (very slow). Now I need to let user move over that figure and display a vertical and horizontal lines (cross hairs) from under mouse position. What is the best technique to paint only those 2 lines without going over all polygons and repaint everything at every mouse move.

Thx

Answer 1

This answer is broken.

You want to draw lines and move them without touching the underlying painting. In the good old days, the method used was to paint with xor composition on top of the drawing, and draw the same pattern (here it would be lines) the same way at the same location to remove it from the screen, again without touching the real painting.

I tried to use this method with the code below to test it out, but it doesn't seem to work. Hopefully, someone with a better knowledge of canvas and js will come forth and fix things up.

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

Also, there are problem with compositing depending on the browser.