Question

我正在使用Raphael.js在JavaScript中编写Paint之类的东西。画笔笔划通过路径实现：每次鼠标移动时，新的字符串如“L x，y”都会附加到“当前”路径。

例如，如果我点击并稍微摆动，这就是我在Chrome中获得的内容：

<path style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-linejoin: round; stroke-linecap: round;" fill="none" stroke="#000000" d="M173,326L173,326L175,325L180,322L186,318L195,312L204,303L213,294L219,285L221,283L224,281L225,280L226,280L229,280L232,280L238,282L243,288L250,296L256,305L263,311L268,316L272,318L273,318L276,318L278,318L281,318L286,316L294,309L300,301L307,292L314,281L321,272L326,265L328,261L329,257L332,251L333,249L334,249L335,248L337,248L339,248L342,249L346,252L351,256L356,260L360,262L364,264L368,264L370,265L374,265L377,264L380,262L387,257L394,251L403,245L411,235L420,226L429,217L437,208L446,202L453,200L461,198L466,198L470,198L472,198L474,199L477,202L478,205L479,209L483,214L487,219L491,221L494,225L498,226L502,226L505,226L506,226L508,226L509,226L510,226" stroke-width="30" stroke-linejoin="round" stroke-linecap="round"></path>

Chrome使用整数作为笔触坐标，它就像一个魅力，非常流畅。

另一方面，Firefox有一个糟糕的性能问题，因为它似乎使用浮点数作为路径坐标：

<path style="stroke-linejoin: round; stroke-linecap: round;" fill="none" stroke="#000000" d="M116,334.1333312988281L116,334.1333312988281L118,335.1333312988281L128,332.1333312988281L135,332.1333312988281L145,330.1333312988281L157,330.1333312988281L169,328.1333312988281L181,326.1333312988281L194,323.1333312988281L207,320.1333312988281L219,317.1333312988281L234,314.1333312988281L260,307.1333312988281L275,302.1333312988281L286,295.1333312988281L297,286.1333312988281L308,271.1333312988281L315,258.1333312988281L324,245.13333129882812L333,232.13333129882812L342,225.13333129882812L351,218.13333129882812L367,214.13333129882812L373,214.13333129882812L380,214.13333129882812L385,212.13333129882812L391,212.13333129882812L396,212.13333129882812L402,212.13333129882812L410,218.13333129882812L420,229.13333129882812L431,242.13333129882812L438,255.13333129882812L445,264.1333312988281L457,269.1333312988281L459,269.1333312988281L460,269.1333312988281L463,269.1333312988281L465,268.1333312988281L467,263.1333312988281L471,254.13333129882812L474,243.13333129882812L476,233.13333129882812L481,222.13333129882812L483,215.13333129882812L486,208.13333129882812L488,207.13333129882812L489,205.13333129882812L490,204.13333129882812" stroke-width="30" stroke-linejoin="round" stroke-linecap="round"></path>

有解决方案吗？我希望Firefox也能使用整数。

修改：

我发现手动添加的路径表现正常（即使用整数）。问题可能出在构建笔画的代码上吗？

$('#canvas_container').mousemove(function(e){
    var newx = e.pageX - $(document).scrollLeft() - $('#canvas_container').offset().left;
    var newy = e.pageY - $(document).scrollTop() - $('#canvas_container').offset().top;

    [...]

    if (brushing) {
      brush_current_stroke.attr({
        'path': [brush_current_stroke.attr('path'), 'L', newx, ' ', newy].join('')
      });
    }

    oldx = newx;
    oldy = newy;
  });

修改：

我将计算鼠标坐标的代码更改为：

var newx = Math.round(e.pageX - $(this).offset().left);
var newy = Math.round(e.pageY - $(this).offset().top);

现在Firefox也使用两个坐标的整数。但是性能问题仍然存在！任何想法都表示赞赏。

Firefox在SVG路径中使用浮点坐标

0 个答案: