Flutter.路徑縮放

Question

如何更改這部分代碼中路徑的大小？ 繪圖時，路徑會超出手機屏幕。 我不應該自己繪制路徑。

Path path = getPath();  //the path is given dynamically

canvas.drawPath(
  path,
  Paint()
    ..style = PaintingStyle.stroke
    ..color = Colors.black
    ..strokeWidth = 2.0);

我嘗試使用方法path.transform 。 但是路徑沒有正確轉換。

Answer 1

調整代碼如下。

main() => runApp(MaterialApp(home: SO()));

class SO extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: CustomPaint(
          painter: SOP(),
        ),
      ),
    );
  }
}

class SOP extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Path p = getPath();

    Rect b = p.getBounds();
    var path_width = b.width;
    var path_height = b.height;
    var screen_width = size.width;
    var screen_height = size.height;
    var x_scale = screen_width / path_width;
    var y_scale = screen_height / path_height;

    //UNCOMMENT the following line to see the scaling effect
//    canvas.scale(x_scale, y_scale);

    canvas.drawPath(p, Paint()..color = Colors.red);
  }

  Path getPath() {
    Path p = Path();
    double w = 100;
    double h = 100;
    p.moveTo(0, 0);
    p.lineTo(0, h);
    p.lineTo(w, h);
    p.lineTo(w, 0);
    p.close();
    return p;
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

取消注釋縮放線以查看效果。

Answer 2

Doc 通過縮放 canvas 提出了一個解決方案。另一種方法是使用 transform 方法縮放路徑：

var scalingMatrix = Float64List.fromList(
    [size.width, 0, 0, 0,
    0, size.height, 0, 0,
    0, 0, 1, 0,
    0, 0, 0, 1]);
path = path.transform(scalingMatrix);