RaphealJS调整大小和鼠标移

我一直在使用RaphealJS来创建矢量绘图工具，我已经将所有的绘制完成，工作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());

现在我已经击败了我的头几天无济于事。请注意：我可以使用绘图功能，只要窗口没有调整大小，但是当页面调整大小时，绘图点就会关闭。

来源

2013-04-28 Ksliman

以防万一任何人有这个问题，它原来是一个视框中的问题，我不得不计算基础上，视框的鼠标位置坐标而不是屏幕，所以我的原代码变为：

$(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的坐标

来源

2013-07-18 19:34:32 Ksliman

RaphealJS调整大小和鼠标移

回答

相关问题