Flutter for WebでRounded Rectの上辺が描画されない問題を追う

※ この問題は現在のFlutter for Webでは解消しています

以下の記事でflutter_webを動かしていて、CanvasのdrawRRectがうまく動かないことに気づきました。

flutter_shapesの問題かもしれないので、最低限のコードを書いて実行してみます。

class _MyPainter extends CustomPainter {
  @override
  bool shouldRepaint(_MyPainter oldDelegate) {
    return false;
  }

  @override
  void paint(Canvas canvas, Size size) {
    final Paint stroke = Paint()
      ..color = Colors.black
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2;
    Rect rect = Rect.fromLTWH(0, 0, 100, 100);
    Radius radius = Radius.circular(10);
    RRect rrect = RRect.fromRectAndRadius(rect, radius);
    canvas.drawRRect(rrect, stroke);
  }
}

やはり上部の線が描画されないようです。

f:id:tnantoka:20190512232957p:plain

これはコントリビューションのチャンスだ！と

packages/flutter_web_ui/lib/src/ui/canvas.dart
packages/flutter_web_ui/lib/src/engine/recording_canvas.dart
packages/flutter_web_ui/lib/src/engine/bitmap_canvas.dart

と順にソースを追っていき、原因らしき部分を突き止めました。

以下のbeginPath()が直前のmoveTo()を無効化してしまっているように見えます。

    ctx.moveTo(left + trRadiusX, top);

    if (startNewPath) {
      ctx.beginPath();
    }

https://github.com/flutter/flutter_web/blob/b3057c5b000e7a1ccc3588084fb24243f08966d6/packages/flutter_web_ui/lib/src/engine/bitmap_canvas.dart#L499-L503

これなら僕でも修正できそうなので、プルリクエストするぞ！と思いflutter_webのREADMEを改めて読んでいると…

Since we are developing this in a separate fork to the main Flutter repo, we are not yet ready to accept GitHub pull requests at this time. However, GitHub issues are very welcome.

なんとプルリクエストはまだ受け付けていませんでした。ただ、Issue登録はwelcomeということなので、そちらだけやっておくことにしました。

また、既にtypo修正のプルリクエストは出してしまっていたので、ごめんなさいしておきました。

ちゃんとREADME読もう…