복잡한 개체 위에 페인트하는 방법

Question

캔버스에 꽤 복잡한 그림이 그려져 있습니다. (~ 1000 다각형). 모두 다시 칠하는 시간은 약 1 초 (매우 느립니다)입니다. 이제 사용자가 그 그림 위로 이동하고 마우스 위치 아래에서 수직 및 수평선 (십자선)을 표시 할 수있게해야합니다. 모든 폴리곤을 거치지 않고 마우스 만 움직이면 모든 것을 다시 그리지 않고 2 줄만 칠하는 가장 좋은 기법은 무엇입니까?

들으

Answer 1

이 답변이 끊어집니다.

기본 그림을 만지지 않고도 선을 그립니다. 좋은 옛날, 사용 된 방법은 그림 위에 xor 구성을 사용하여 페인트하고 동일한 패턴을 동일한 위치에 동일한 방법으로 다시 그리는 것이 었습니다. 진짜 그림을 만지고.

아래 코드에서이 메서드를 사용하여 테스트했지만 작동하지 않는 것 같습니다. 다행스럽게도, 캔버스와 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; 
})(); 

또한 브라우저에 따라 합성에 문제가 있습니다.