RaphealJS调整大小和鼠标移动

RaphealJS Resize and mouse shift

本文关键字：鼠标 移动 调整 RaphealJS      更新时间：2023-09-26

我一直在使用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());

我已经绞尽脑汁想了好几天了，但毫无效果。请注意:我可以绘图功能工作，只要窗口不调整大小，一切都很好，但当页面调整大小时，绘图点是关闭的。

以防其他人有这个问题，结果是一个viewBox问题，我必须根据viewBox坐标而不是屏幕来计算鼠标位置，所以我的原始代码变成:

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

相关文章：