Flutter notes

Flutterに関するメモ書き

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読もう…

原因調査の方法は?

flutter_webをcloneしてきてhello_worldをwebdev serveします。

その状態でflutter_web/packages内を変更すると自動でrebuidしてくれたので、 printを仕込むなど原始的な方法で調査しました。