如何在 Flutter 中的 Canvas 中绘制 Circulr 路径内的图像

问题描述

你好，谁能告诉我如何在圆形路径内绘制带有适合路径的缩放图像的图像。我尝试过，但无法弄清楚并困扰了很多。请帮帮我。

  Paint paint_4 = new Paint()
          ..color = Colors.black
          ..style = PaintingStyle.fill
          ..strokeWidth = 1;
    
        Path path_4 = Path();
        path_4.moveto(size.width * 0.2275000,size.height * 0.2879286);
        path_4.cubicTo(
            size.width * 0.2528667,size.height * 0.2879286,size.width * 0.2928750,size.height * 0.3193143,size.height * 0.4000000);
        path_4.cubicTo(
            size.width * 0.2928750,size.height * 0.4449143,size.width * 0.2733667,size.height * 0.5120714,size.width * 0.2275000,size.height * 0.5120714);
        path_4.cubicTo(
            size.width * 0.2013083,size.width * 0.1621250,size.height * 0.4786286,size.height * 0.4000000);
        path_4.cubicTo(
            size.width * 0.1621250,size.height * 0.3550857,size.width * 0.1808750,size.height * 0.2879286);
        path_4.close();

绘制图像的圆形路径和图像需要适当缩放到可见

如何将资源图像缩放到适当可见或适合的圆形路径
如何使用 Matrix4 将 ImageShader 缩放到画布


    canvas.drawPath(
                    path_4,Paint()
                      ..shader = ImageShader(images,TileMode.clamp,Matrix4.identity().scaled(0.19,0.21).storage));

这是我的代码

 class ImagePainters extends StatefulWidget {
          @override
          _ImagePainteRSState createState() => _ImagePainteRSState();
        }
        
        class _ImagePainteRSState extends State<ImagePainters> {
          ui.Image myImage;
        
          Future<ui.Image> _loadAssetimage() async {
            Completer<ui.Image> completer = new Completer<ui.Image();
        
            Assetimage('assets/face.jpg').resolve(new ImageConfiguration()).addListener(
                imagestreamListener((ImageInfo image,bool synchronousCall) {
              setState(() {
                myImage = image.image;
              });
              ui.Image img;
        
              img = image.image;
              completer.complete(img);
            }));
        
            return completer.future;
          }
        
          @override
          void initState() {
            super.initState();
            _loadAssetimage();
          }
        
        
        
          @override
          Widget build(BuildContext context) {
            return Center(
              child: Container(
                height: MediaQuery.of(context).size.height,width: MediaQuery.of(context).size.width,child: CustomPaint(
                    size: Size(1000,1000 * 0.7),painter: FinalPainter(context,myImage)),),);
          }
        }

画布绘图类

                  class FinalPainter extends CustomPainter {
                      final ui.Image images;
                      FinalPainter(BuildContext context,this.images);
                    
                      @override
                      void paint(Canvas canvas,Size size) {
                        
                   Paint paint_4 = new Paint()
                      ..color = Colors.black //Color.fromARGB(255,255,255)
                      ..style = PaintingStyle.fill
                      ..strokeWidth = 1;
                
                    Path path_4 = Path();
                    path_4.moveto(size.width * 0.2275000,size.height * 0.2879286);
                    path_4.cubicTo(
                        size.width * 0.2528667,size.height * 0.4000000);
                    path_4.cubicTo(
                        size.width * 0.2928750,size.height * 0.5120714);
                    path_4.cubicTo(
                        size.width * 0.2013083,size.height * 0.4000000);
                    path_4.cubicTo(
                        size.width * 0.1621250,size.height * 0.2879286);
                    path_4.close();

图像应该正确可见，并且可以将圆形路径缩放到绘制图像和图像需要适当缩放才能可见
面部在圆形路径内应该清晰可见

    canvas.drawPath(path_4,Paint()..shader = ImageShader(images,0.21).storage));}
       
  @override
 bool shouldRepaint(covariant CustomPainter oldDelegate) {
  {return true;}
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

android-canvas custom-painter drawimage