RaphealJS 크기 조정 및 마우스 이동

Question

내가 벡터 그리기 도구를 만들 수 RaphealJS을 사용하고

, 나는 모든 도면이 완성

내 문제를 작업 한 내가 브라우저 창 크기를 조정하고 마우스 포인터가 그릴 때 온다 그려지는 위치에서 벗어난다.

나는 내 캔버스와 배경 이미지를 만들 수 있도록

$(document).mousemove(function(e){ 
    if (IE) { 
     var dh = $("#details").height(); 
     var dw = $("#details").width(); 
      xx = e.offsetX; 
      yy = e.offsetY; 
    } else { 
     var offset = $("#workcanvas").offset(); 
     xx = e.pageX - offset.left; 
     yy = e.pageY - offset.top; 
    } 
    if (lineObject != null) { 
     lineObject.updateEnd(xx, yy); 
    } else { 
     lineObject = Line(xx, yy, xx, yy, MasterCanvas); 
    } 
}); 

나는이

을 시도

var MasterCanvas = Raphael($("#workcanvas").attr("id")); 

var MasterBGImage = MasterCanvas.image(imgPath, 0, 0, $("#workcanvas").width(),$("#workcanvas").height()); 

MasterCanvas.setViewBox(0, 0, $("#workcanvas").width(), $("#workcanvas").height(), true); 

내 창의 크기를 조정

이벤트와 마찬가지로, 브라우저에서 마우스 이동 이벤트를 사용하여 선을 그릴

MasterCanvas.setSize($("#workcanvas").width(), $("#workcanvas").height()); 

이제 며칠 동안 아무렇지도 않게 머리를 때렸습니다. 참고 : 드로잉 기능을 사용할 수 있으며 창 크기가 조정되지 않는 한 모든 것이 좋지만 페이지 크기가 조정되면 드로잉 지점이 꺼집니다. 내 원래의 코드가되도록

Answer 1

이 경우 다른 사람이 문제가 단지에서, 그것은 뷰 박스 문제를 밝혀, 나는 뷰 박스에 따라 마우스 위치를 계산하기 위해 화면을하지 좌표했다 :

$(document).mousemove(function(e){ 

    var uupos = MasterCanvas.canvas.createSVGPoint(); 
    uupos.x = e.clientX; 
    uupos.y = e.clientY; 
    var ctm = MasterCanvas.canvas.getScreenCTM(); 
    if (ctm = ctm.inverse()) 
    uupos = uupos.matrixTransform(ctm); 
    x = uupos.x; 
    y = uupos.y; 

    if (lineObject != null) { 
     lineObject.updateEnd(x, y); 
    } else { 
     lineObject = Line(x, y, x, y, MasterCanvas); 
    } 
}); 

편집 : 이 솔루션은 SVG 인 것처럼 보이지만 나에게 필요한 IE8에서는 작동하지 않습니다.

VML에 viewBox 좌표가 있나요