揭秘Oblique阴影效果ViewOutlineProvider与Path相交运算实现剖析【免费下载链接】ObliqueWith Oblique explore new styles of displaying images项目地址: https://gitcode.com/gh_mirrors/ob/ObliqueOblique 是一款主打斜切图片显示的开源 Android 图片库它的阴影效果非常有辨识度图片被切成平行四边形后阴影能完美贴合每条斜边而不是一个呆板的矩形。这套阴影效果的核心并不复杂全部依赖ViewOutlineProvider与 Android 自带的Path 相交运算Path.Op.INTERSECT。本文将以 Oblique 的源码为例一步步拆解阴影效果从路径生成、求交到最终绘制的完整链路帮你彻底看懂这套实现思路。Oblique 是什么让图片斜出新风格Oblique 本质上是一个自定义ImageView它把常规矩形图片裁剪成带倾斜角度的四边形支持图片、线性渐变、径向渐变、纯色四种填充类型配合起始/结束斜切角度、圆角半径和阴影高度可以组合出非常丰富的卡片式视觉风格。Demo 效果如下图阴影能贴合斜边正是因为它不是系统默认的矩形阴影而是用一个和裁剪路径完全一致的斜切四边形去渲染投影。要做到这一点第一步是理解 Android 阴影的底层机制。Android 阴影效果的基础ViewOutlineProvider 与 OutlineAndroid 5.0Lollipop之后视图阴影由Elevation高度和Outline轮廓共同决定系统根据 View 的轮廓生成投影轮廓是什么形状阴影就是什么形状。自定义轮廓的入口正是ViewOutlineProvider其中getOutline()方法把路径交给系统Override public void getOutline(View view, Outline outline) { if (path.isConvex()) { outline.setConvexPath(shadowpath); } }有两个关键细节只有凸路径才能通过setConvexPath()生成阴影所以 Oblique 先用path.isConvex()做了兜底判断ViewCompat.setElevation()设置的阴影高度决定了投影的可见程度轮廓决定了投影的形状。斜切路径从哪来Config 中的三角函数阴影要贴合斜边首先得有一条和裁剪区域一致的斜切路径。Oblique 在 Config.java 的getPath()里用starting_slant_angle和ending_slant_angle两个角度配合正切函数算出四边形的四个顶点再依次moveTo、lineTo闭合出路径。角度大于 90° 时还会先换算成锐角避免三角函数越界这就是getTanWithOutConflict方法存在的意义。这条路径同时在onMeasure阶段被保存供绘制和阴影共用。核心揭秘Path 相交运算如何圆化阴影有了斜切四边形路径后真正的魔法发生在 ObliqueView.java 的getOutlineProvider()里。当用户设置了圆角半径时如果直接把四边形路径交给系统四个尖角也会带出尖锐的阴影视觉上很生硬。Oblique 的做法是构造一个圆角矩形再与斜切路径做相交运算shadowpath new Path(); if (config.getRadius() 0) { shadowpath path; } else { rect new Rect(0, 0, (int) width, (int) height); RectF r new RectF(rect); shadowpath.addRoundRect(r, config.getRadius(), config.getRadius(), Path.Direction.CCW); shadowpath.op(path, shadowpath, Path.Op.INTERSECT); }这段代码值得反复品味addRoundRect先生成一个覆盖整个 View 的圆角矩形Path.op(path, shadowpath, Path.Op.INTERSECT)让斜切四边形和圆角矩形做求交交集区域恰好是带圆角的斜切四边形结果既保留了斜边的倾斜角度又获得了圆润的边角阴影因此和绘制出来的图片轮廓严丝合缝。圆角方向与兼容性的两个细节第一addRoundRect使用Path.Direction.CCW逆时针方向绘制圆角矩形方向的一致性在相交运算中很重要能避免路径自交导致的异常结果。第二相交运算只在API 21且设置阴影高度elevation 0时执行老版本系统会直接跳过setOutlineProvider功能上完全兼容。三步上手亲手体验这套阴影效果在布局 XML 中引入ObliqueView并声明自定义属性即可核心参数就三个倾斜角度、圆角半径和阴影高度ak.sh.ay.oblique.ObliqueView android:layout_widthmatch_parent android:layout_heightmatch_parent android:scaleTypecenterCrop android:srcdrawable/pretty_1 app:angleLEFT_BOTTOM_TO_RIGHT_TOP app:starting_slant_angle10 app:ending_slant_angle0 app:radius18 app:shadow_height10 app:typelinear_gradient /也可以用 Java 动态配置效果完全等价obliqueView.setStartAngle(12); obliqueView.setEndAngle(0); obliqueView.setCornerRadius(15); obliqueView.setShadow(10);各属性的取值范围与默认值定义在 attrs.xml 中完整的 Java 调用示例可以参考 Demo 的 PlaceholderFragment.java。源码地图一次看懂三条核心链路路径生成Config.javagetPath()用三角函数计算斜切四边形顶点阴影合成ObliqueView.javagetOutlineProvider()用Path.Op.INTERSECT求交生成圆角斜切轮廓绘制填充ObliqueView.javaonDraw()用BitmapShader或LinearGradient在路径内填充图片与渐变。小结Oblique 的阴影效果之所以自然秘诀就一句话用与裁剪完全一致的路径去定义 Outline再用 Path 相交运算补齐圆角。这套斜切路径 ViewOutlineProviderPath.Op.INTERSECT的组合拳不只适用于图片卡片任何需要不规则图形投影的场景都可以直接复用值得收藏进你的 Android 自定义 View 工具箱。【免费下载链接】ObliqueWith Oblique explore new styles of displaying images项目地址: https://gitcode.com/gh_mirrors/ob/Oblique创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考