深入Oblique源码：Path绘制与三角函数实现斜切图片的完整原理

深入Oblique源码：Path绘制与三角函数实现斜切图片的完整原理

【免费下载链接】ObliqueWith Oblique explore new styles of displaying images项目地址: https://gitcode.com/gh_mirrors/ob/Oblique

斜切图片效果正在成为 Android 界面设计中提升视觉层次感的流行手法：普通矩形图片的边缘被"削"成平行四边形或梯形，让卡片、横幅、轮播图瞬间拥有动感和个性。Oblique 正是一个专注于斜切图片显示的开源 Android 图片库，它的使命一句话说得很清楚——"With Oblique explore new styles of displaying images"（用 Oblique 探索图片显示的新风格）。本文将以源码级视角，完整拆解 Oblique 如何通过Path 绘制与三角函数计算，把一张普通矩形图片变成斜切形状，让你不仅会用，更彻底看懂背后的原理。

一、斜切图片的核心：getPath() 如何用四个顶点拼出斜切形状

Oblique 的原理说起来很简单：先把图片所在的矩形区域"画"成一个带斜边的四边形，再用这个形状去裁剪或填充图片内容。所有魔法都集中在oblique/src/main/java/ak/sh/ay/oblique/Config.java的getPath()方法里。

它接收视图的宽高w和h，以及两个关键参数——startAngle（起始侧斜切角）和endAngle（结束侧斜切角），默认值都是 90°。方法内部定义了四个顶点 a（左上）、b（右上）、c（右下）、d（左下），通过一系列角度判断算出每个顶点的新坐标，最后用 Path 把它们连成一个闭合四边形：

Path path = new Path(); path.moveTo(a1, a2); // 左上 path.lineTo(b1, b2); // 右上 path.lineTo(c1, c2); // 右下 path.lineTo(d1, d2); // 左下 path.close();

当斜切角不等于 90° 时，左右两条边会相对底边产生水平偏移，矩形就"歪"成了梯形或平行四边形，这正是 Oblique 斜切图片效果的几何本质。

二、三角函数妙用：Math.tan 与 Math.hypot 如何计算斜切顶点

四边形四个顶点不会凭空出现，它们的坐标完全靠三角函数推算。源码中的核心辅助方法getTanWithOutConflict()用到了Math.tan与Math.toRadians：

int val = (int) Math.ceil(h / Math.tan(Math.toRadians(angle)));

已知斜切角度和高度 h，利用正切函数tan(角度) = 对边 / 邻边就能反推出顶点沿水平方向偏移的距离。为了处理超过 90° 的钝角，方法先把angle换算成180 - angle，再借助Math.ceil向上取整，保证偏移量是整数像素、不会溢出。

还有一个容易被忽略的细节：方法用Math.hypot(w, h)计算矩形对角线长度作为"安全边界"（源码中的hype变量），当计算出的偏移量超过对角线时，就换用宽度 w 反向推算并递归调用，从根本上防止斜切角度过大导致图形越界变形。这一层"防冲突"设计，正是处理 0°~180° 全角度斜切图片的关键。

三、从 Path 到画面：onDraw 渲染流程与四种填充类型

Path 形状算好了，接下来就是把图片"填"进这个形状里。这一步发生在oblique/src/main/java/ak/sh/ay/oblique/ObliqueView.java的onDraw()方法中。ObliqueView 直接继承自ImageView，重写onDraw后不再走系统默认绘制，而是手动设置 Paint 并调用canvas.drawPath(path, paint)。

Oblique 支持四种填充类型（定义在Type.java枚举中），由type属性切换：

• solid_color（纯色）：paint.setColor()直接填充纯色；
• linear_gradient（线性渐变）：根据GradientAngle枚举的 8 个方向生成LinearGradient着色器；
• radial_gradient（径向渐变）：以视图中心为圆心生成RadialGradient；
• image（图片）：通过BitmapShader把 Bitmap 与 Path 绑定，让图片内容沿斜切形状显示。

其中图片类型最实用也最复杂：setupBitmap()会把ImageView的 Drawable 转成 Bitmap，再配合setUpScaleType()用 Matrix 模拟CENTER_CROP的缩放与居中平移，确保图片在斜切形状内不会变形或留白。最后用PorterDuffXfermode设置混合模式，canvas.drawPath(path, paint)一锤定音，一张斜切图片就渲染完成了。

四、圆角与阴影：让斜切图片更精致的两个细节

如果只有干巴巴的斜边，视觉上会显得生硬。Oblique 在init()阶段就给 Paint 设置了CornerPathEffect：

paint.setPathEffect(new CornerPathEffect(config.getRadius()));

radius属性（范围 0~60）可以让斜切形状的四角变得圆润平滑，这也是为什么你能在 Demo 里看到"带圆角的斜切图片"。

阴影效果则利用了 Android Lollipop 之后的ViewOutlineProvider机制：getOutlineProvider()会把斜切 Path 与圆角矩形做Op.INTERSECT交集运算得到阴影轮廓，再配合ViewCompat.setElevation()设置高度，让斜切图片像卡片一样在界面上"浮"起来。所有可配置项（starting_slant_angle、ending_slant_angle、type、angle、basecolor、radius、shadow_height等）都声明在oblique/src/main/res/values/attrs.xml中，既支持 XML 属性也支持 Java 链式调用。

五、快速上手体验：用 Demo 动态调节斜切角度

纸上谈兵不如动手体验。项目自带的演示应用app/src/main/java/ak/sh/ay/app/DemonstratorActivity.java就是最好的教学工具：界面上的两根 SeekBar 范围都是 0~180，拖动它们就能实时调用setStartAngle()和setEndAngle()，亲眼观察斜切角度从 10° 到 180° 时，图片边缘如何从近乎垂直慢慢"歪"成夸张的平行四边形；旁边的两个 CheckBox 则一键切换圆角（setCornerRadius(20)）和阴影（setShadow(10)），让你在交互中直观理解每个参数的作用。

想在自己的项目里复现这套效果，核心依赖只有三个文件：负责形状计算的Config.java、负责渲染的ObliqueView.java，以及属性声明的attrs.xml。ObliqueView还重写了setImageResource、setImageURI等系列方法，在设置图片后自动重建 BitmapShader，保证斜切图片始终跟随内容刷新。

总结：Oblique 源码给我们的启示

回顾整个实现，Oblique 的高明之处在于用极少的代码完成了优雅的设计：

• 几何建模：斜切图片 = 四边形 Path + 三角函数（Math.tan/Math.hypot）算出偏移顶点；
• 渲染解耦：形状（Path）与填充（Shader）分离，一套形状支持纯色、渐变、图片四种风格；
• 细节打磨：圆角用CornerPathEffect，阴影用ViewOutlineProvider，成本极低收益明显。

对于想学习 Android 自定义 View 的开发者来说，这份源码是非常好的入门教材：它演示了如何重写onDraw、如何使用Path与Shader、如何通过attrs.xml暴露自定义属性。下一次当你看到 App 里那些歪着排布的图片卡片时，你就能一眼看穿——那不过是几行三角函数，加上一次漂亮的drawPath而已。

【免费下载链接】ObliqueWith Oblique explore new styles of displaying images项目地址: https://gitcode.com/gh_mirrors/ob/Oblique