我可以在CustomPaint中使用Canvas在Flutter中绘制自定义框阴影吗? [英] Can I draw a custom box shadow in Flutter using Canvas in a CustomPaint?

问题描述

很明显如何绘制带有height属性的阴影，但是例如如果我想使阴影居中怎么办?

It's clear how to draw a shadow with an elevation property but what if I want to have the shadow centered for example?

推荐答案

找到了解决方案:

我可以简单地进入BoxShadow小部件的源代码，并将它们使用的路径属性应用于我自己的路径.

I can simply go into the source code for the BoxShadow widget and apply the path properties they used to my own paths.

这是源代码.

这是我用来为自定义路径(而不是具有边界半径的圆形或矩形)创建阴影的代码，可让我创建自定义阴影而不是使用高程预设.

Here's the code that I used to create a shadow for a custom path (rather than a circle or rectangle with a border radius) that allowed me to create a custom shadow rather than using the elevation preset.

    canvas.drawPath(
       Path()
          ..addRect(
              Rect.fromPoints(Offset(-15, -15), Offset(size.width+15, size.height+15)))
          ..addOval(
              Rect.fromPoints(Offset(0, 0), Offset(size.width, size.height)))
          ..fillType = PathFillType.evenOdd,
        Paint() 
        ..color= Colors.black.withAlpha(shadowAlpha)
        ..maskFilter = MaskFilter.blur(BlurStyle.normal, convertRadiusToSigma(3))
    );

    static double convertRadiusToSigma(double radius) {
        return radius * 0.57735 + 0.5;
    }

这篇关于我可以在CustomPaint中使用Canvas在Flutter中绘制自定义框阴影吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！