Question

无论如何都要停止涂鸦

普通（铬）图片：

潦草的图片（firefox）：

我正在使用代码生成绘图路径

document.createElementNS(NS, "path");

这是JsFiddle：JSFIDDLE

Answer 1

此处的问题似乎是Chrome和Firefox之间实现offsetX和offsetY的方式之间存在差异。

在Firefox中，当您越过红线时，返回的offsetX和offsetY值相对于红线的左上角，而不是SVG 。这就是为什么你的线值跳到屏幕顶部并稍微留下一点。

我不确定这是否是Firefox中的错误。

在任何情况下，您都不应该为此目的使用offsetX和offsetY。＆＃34;正确＆＃34;方法通常是获取clientX和clientY坐标，并将它们转换为SVG坐标。

function screenToSVG(clientX, clientY)
{
  // Create an SVGPoint for future math
  var pt = svg.createSVGPoint();
  pt.x = clientX;
  pt.y = clientY;

  // Apply the inverse of the CTM (SVG Current Transform Matrix) to get
  // the equivalent point in SVG coordinate space
  return pt.matrixTransform(svg.getScreenCTM().inverse());
}

这种方法的优点是，即使SVG不是以1：1的比例绘制，它也能正常工作。例如，如果它有viewBox。

＆＃13;

(function() {
    var stage = jQuery('#stage');
    var isMouseDown = false;
    var NS = "http://www.w3.org/2000/svg";
    var penCount = 0;
    stage.on('mousedown', mouseDown);
    stage.on('mousemove', mouseMove);
    stage.on('mouseup', mouseUp);
    $('#stageClear').on('click',()=>{
    $('.shape').remove()
    })

    function mouseDown(event) {
        var pt = screenToSVG(event.clientX, event.clientY);
        isMouseDown = true;
        var shape = document.createElementNS(NS, "path");
        shape.setAttribute("class", "shape");
        shape.setAttribute("fill", "transparent");
        shape.setAttribute("id", "pen" + penCount);
        shape.setAttribute("stroke", "#2795ee");
        shape.setAttribute("stroke-width", "4px");
        shape.setAttribute("strokeLinecap", "round");
        shape.setAttribute("d", "M " + pt.x + " " + pt.y + " ");
        shape.setAttribute("pointer-events", "none");
        stage.append(shape);
        ++penCount;
    }

    function mouseMove(event) {
        var pt = screenToSVG(event.clientX, event.clientY);
        if (isMouseDown) {
            var depth = jQuery('#pen' + (penCount - 1)).attr("d");
            jQuery('#pen' + (penCount - 1)).attr("d", depth + "L " + pt.x + " " + pt.y + " ");
        }
    }

    function mouseUp(event) {
        isMouseDown = false;
    }
    
    function screenToSVG(clientX, clientY)
    {
        // Create an SVGPoint for future math
        var svg = stage[0];
        var pt = svg.createSVGPoint();
        pt.x = clientX;
        pt.y = clientY;
    
        // Apply the inverse of the CTM (SVG Current Transform Matrix) to get
        // the equivalent point in SVG coordinate space
        return pt.matrixTransform(svg.getScreenCTM().inverse());
    }

})();

＆＃13;

#stage{
  width:100%;
  height:610px;
  border:1px solid;
}
#stageClear{
 cursor:pointer;
}
#stagetext{
  user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="stage" >
<text id="stagetext" x="10" y="10px">draw on the stage using mouse</text>
  <line x1="50" y1="300" x2="800" y2="300" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
<button id="stageClear"> clear</button>

＆＃13;

当在mozila firefox上线时，svg路径得到了涂鸦

1 个答案: