0

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 はパス座標に float を使用しているように見えるため、パフォーマンスに問題があります。

<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 は両方の座標にも整数を使用しています。ただし、パフォーマンスの問題は解決しません。どんなアイデアでも大歓迎です。

4

0 に答える 0