3

キャンバスに回転およびスケーリングされた円を描画しようとしています。

90度きっちり回しても回らない！89、89.9で回転します。しかし、正確には 90 ではありません (編集: 90 +-0.013 で中断し、+-0.014 で動作を開始します)。この問題は Chrome (最新の 29.0.1547.76 m) でのみ発生しますが、Firefox と IE は正常に動作します。

c.save();
    c.translate(100, 100);
    r += 5;
    c.rotate(r * inRads);   // when r = 90, it renders as if r = 0
    c.scale(1, 2);

    c.beginPath();
    c.arc(0, 0, 20, 0, 2*Math.PI);
    c.closePath();
    c.fillStyle = '#f00';
    c.fill();
c.restore();

これは、どのように見えるかの GIF です。 クローム回転90度バグ

ここで再現された問題を参照してください: http://jsfiddle.net/qeWcE/1/ 現在修正されています。

これに対する回避策はありますか?

4

1 に答える 1

1

これは役立つようです：

// fixes bug when r = (90 +-0.013) jumps to r = 0
function chrome_fix_rotation_bug(r)
{
    var rr = Math.round(r);
    if (Math.abs(rr-r) < 0.02 && rr%90==0) return rr+0.02;
    return r;
}

// use like this:
r = chrome_fix_rotation_bug(r);
c.rotate(r * inRads)
于 2013-10-01T15:47:00.880 に答える