Android 绘制 Path

最新推荐文章于 2021-05-29 09:39:03 发布

只是丶很孤单

最新推荐文章于 2021-05-29 09:39:03 发布

阅读量416

点赞数

CC 4.0 BY-SA版权

分类专栏： android 文章标签：自定义控件

本文链接：https://blog.youkuaiyun.com/pf_1308108803/article/details/94432700

android 专栏收录该内容

73 篇文章

订阅专栏

本文探讨了Path.Direction和Path.FillType在UI设计中的使用，解释了顺时针和逆时针方向如何影响图形的填充判断。通过数学函数sin和cos计算特定角度的坐标，用于图形的精确定位。此外，还介绍了PathDashPathEffect在创建虚线和刻度线中的应用，以及如何利用这些原理实现饼图中特定区块的偏移。

Path.Direction

顺时针 Path.Direction.CW

逆时针 Path.Direction.CCW

mPath.addCircle(dp2px(100F), dp2px(100F), dp2px(50F), Path.Direction.CW)
mPath.addCircle(dp2px(180F), dp2px(100F), dp2px(50F), Path.Direction.CW)
  
从任意一点画线，与顺时针的边界相交 +1, 与逆时针的边界相交 -1, 结果为 0 表示在外部, 否则为内部

Path.FillType

Path.FillType.EVEN_ODD 不考虑方向, 穿插奇数次为内部, 偶数次为外部
```
mPath.fillType = Path.FillType.EVEN_ODD
```

Math

println(sin(Math.toRadians(30.0)))      结果: 0.49999999999999994
println(sin(Math.toRadians(150.0)))     结果: 0.49999999999999994
println(cos(Math.toRadians(30.0)))      结果: 0.8660254037844387
println(cos(Math.toRadians(150.0)))     结果: -0.8660254037844387

这里根据正余弦的图可以想到,

正弦值 30° 和 150° 都在 x 轴上方, 相对于 90° 对称, 所以结果相等
余弦值 30° 在 x 轴上方, 150° 在 x 轴下方, 大小相等, 方向相反

PathDashPathEffect

这个本来是用来画虚线的, 但是画刻度也是可以的, 理解成弯曲的垂直曲线…

Path shape      虚线的样子, 通过 addRect(0F, 0F, dp2px(2F), dp2px(10F), Path.Direction.CW) 设置成指定大小的矩形
float advance   两个虚线之间的间隔 
float phase     开始绘制的时候的偏移
Style style     style, 这个还没搞懂, 但是效果先出来了...

// 绘制刻度
mPaint.pathEffect = mPathEffect
canvas.drawArc(mRectF, 90F + mAngle / 2F, 360F - mAngle, false, mPaint)
mPaint.pathEffect = null

饼图其中一块偏移

要将 A 块偏移出去, 思路是计算要偏移出去的角度, 然后根据要偏移出去的距离的 cos/sin 函数, 计算出 translation x/y 坐标

偏移的角度是 A 块的开始角度 + A块总共的大小的一半

x: cos(Math.toRadians(currAngle + ANGLES[i] / 2.0)).toFloat() * PULLED_LENGTH
y: sin(Math.toRadians(currAngle + ANGLES[i] / 2.0)).toFloat() * PULLED_LENGTH