Flutter 的 Canvas.drawOval 是椭圆吗？

Posted 2023-02-22

【中文标题】Flutter 的 Canvas.drawOval 是椭圆吗？

【英文标题】：Is Flutter's Canvas.drawOval an ellipse?

【发布时间】：2019-07-05 21:08:31

【问题描述】：

我一直在学习如何在 Flutter 中绘制自定义形状。 Canvas 有一个名为drawOval() 的方法。椭圆不像椭圆那样在数学上定义，因此并非所有椭圆都是椭圆。我假设在这种情况下“椭圆”是一个椭圆，但我想通过查看源代码来确认这一点。

Flutter 使用 Skia 画东西，我找到了this class，但是我还是不明白在 Skia 的钩子下怎么画椭圆。 （我知道如何在 Flutter 中画一个椭圆。）

Flutter/Skia 椭圆是椭圆吗？它在源代码中实际计算和绘制在哪里？

【参考方案1】：

Canvas.drawOval()方法顾名思义，可以画一个椭圆。圆形是椭圆形 ​​- 具有相等的轴。椭圆也是一个椭圆，它可以是一个被拉伸的圆。总结一下，drawOval可以画圆和椭圆。

根据 drawOval() 上定义的Rect，画布上绘制的椭圆可以是圆形也可以是椭圆形。

这是一个您可以试用的示例。 OvalPainter 演示了在 Canvas 上绘制圆和椭圆。

import 'package:flutter/material.dart';

void main() 
  runApp(const MyApp());


class MyApp extends StatelessWidget 
  const MyApp(Key? key) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  


class MyHomePage extends StatefulWidget 
  const MyHomePage(Key? key, required this.title) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();


class _MyHomePageState extends State<MyHomePage> 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: CustomPaint(
        painter: OvalPainter(),
      ),
    );
  


class OvalPainter extends CustomPainter 
  final paintConfig = Paint()
    ..style = PaintingStyle.fill
    ..color = Colors.red;

  @override
  void paint(Canvas canvas, Size size) 
    // Circle
    canvas.drawOval(const Rect.fromLTRB(200, 200, 10, 10), paintConfig);

    // Ellipse
    // canvas.drawOval(const Rect.fromLTRB(100, 200, 10, 10), paintConfig);

    // Ellipse
    // canvas.drawOval(const Rect.fromLTWH(10, 10, 100, 200), paintConfig);
  

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) 
    return false;