前言：path这个东西，讲真的，用得好，几乎可以实现，你常见的所有效果。但难就难在用得到。今天，将用path画圆。当然，画圆，有很多其他更简单，更快捷的方法。但是，我这里，主要是以此为开始，讲解path的应用，基础，我就不讲了。
我先讲一下思路，最后就是一波代码。
用path画圆，就像我们用一支铅笔画圆是一样的。我们是先确定一个坐标系（纸），然后，围绕一个点（圆心），从某个点开始（我们就从顶点），然后画一圈就ok了。大家自己那笔试试看吧。
好了，我再用图来解释一下：
1.先画一张纸（我们为了方便，就在中心为原点）
2.我们找好4个点：我们把一个圆分解为4个圆弧。
3.我们用贝塞尔曲线，去画。贝塞尔曲线是什么？这个，自己百度吧。先跟着我的思路来，然后实现。能用就好。
这里讲一个小点，贝塞尔曲线是由多个控制点，去控制一条曲线的曲度，方向等，这个比较复杂，不要求理解。
4.最终实现的效果，就是这样。为了区分，我换了一下点的颜色。
最后，再补充一个数学计算公式，画圆弧的：
ok，思路讲完了，最后就是代码了：
'''
class MycycleView@JvmOverloads constructor(context: Context, attrs: AttributeSet? =null, defStyleAttr: Int =0) : View(context, attrs, defStyleAttr) {
var paint: Paint? =null
var mCenterX: Int =0
var mCenterY: Int =0
var mCirclePaint: Paint? =null
var mPointPaint: Paint? =null
var mControlPointPaint: Paint? =null
var mCircleRadius =150
var mPointDatas: MutableList? =null //放置四个数据点的集合
var mPointControlls: MutableList? =null//方式8个控制点的集合
//控制点比例常量，数学问题，不用管
val CONTROL_POINT_Multiple =4 * (sqrt(2.toDouble()) -1) /3
init {
paint = Paint()
paint?.let {
it.color = Color.BLACK
it.style = Paint.Style.FILL
it.isAntiAlias =true
it.strokeWidth =2f
}
mCirclePaint = Paint()
mCirclePaint?.let {
it.setColor(Color.RED)
it.strokeWidth =10f
it.style = Paint.Style.STROKE
it.isAntiAlias =true
}
mPointPaint = Paint()
mPointPaint?.let {
it.color = Color.BLUE
it.strokeWidth =5f
it.style = Paint.Style.FILL
it.isAntiAlias =true
}
mControlPointPaint = Paint()
mControlPointPaint?.let {
it.color = Color.GREEN
it.strokeWidth =5f
it.style = Paint.Style.FILL
it.isAntiAlias =true
}
}
override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
super.onSizeChanged(w, h, oldw, oldh)
//中心点
mCenterX =width /2
mCenterY =height /2
mPointDatas = ArrayList()
mPointControlls = ArrayList()
//数据点 集合
mPointDatas?.add(PointF(mCenterX.toFloat(), (mCenterY -mCircleRadius).toFloat()))
mPointDatas?.add(PointF((mCenterX +mCircleRadius).toFloat(), mCenterY.toFloat()))
mPointDatas?.add(PointF(mCenterX.toFloat(), (mCenterY +mCircleRadius).toFloat()))
mPointDatas?.add(PointF((mCenterX -mCircleRadius).toFloat(), mCenterY.toFloat()))
//控制点集合
mPointControlls?.let {
it.add(PointF((mCenterX +mCircleRadius *CONTROL_POINT_Multiple).toFloat(), (mCenterY -mCircleRadius).toFloat()))
it.add(PointF((mCenterX +mCircleRadius).toFloat(), (mCenterY -mCircleRadius *CONTROL_POINT_Multiple).toFloat()))
it.add(PointF((mCenterX +mCircleRadius).toFloat(), (mCenterY +mCircleRadius *CONTROL_POINT_Multiple).toFloat()))
it.add(PointF((mCenterX +mCircleRadius *CONTROL_POINT_Multiple).toFloat(), (mCenterY +mCircleRadius).toFloat()))
it.add(PointF((mCenterX -mCircleRadius *CONTROL_POINT_Multiple).toFloat(), (mCenterY +mCircleRadius).toFloat()))
it.add(PointF((mCenterX -mCircleRadius).toFloat(), (mCenterY +mCircleRadius *CONTROL_POINT_Multiple).toFloat()))
it.add(PointF((mCenterX -mCircleRadius).toFloat(), (mCenterY -mCircleRadius *CONTROL_POINT_Multiple).toFloat()))
it.add(PointF((mCenterX -mCircleRadius *CONTROL_POINT_Multiple).toFloat(), (mCenterY -mCircleRadius).toFloat()))
}
}
override fun onDraw(canvas: Canvas?) {
super.onDraw(canvas)
// 画坐标系
canvas?.let {
canvas.save()
//绘制x，y轴坐标系
canvas.drawLine(mCenterX!!.toFloat(), 0f, mCenterX!!.toFloat(), height.toFloat(), paint)
canvas.drawLine(0f, mCenterY!!.toFloat(), width.toFloat(), mCenterY!!.toFloat(), paint)
//绘制数据点
mPointDatas?.forEach {
canvas.drawPoint(it.x, it.y, mPointPaint)
}
//绘制控制点
mPointControlls?.forEach {
canvas.drawPoint(it.x, it.y, mControlPointPaint)
}
//path画圆
val pathCircle = Path()
//移动到第一个数据点
pathCircle.moveTo(mPointDatas!![0].x, mPointDatas!![0].y)
mPointDatas?.let {
for (iin 0 until it.size) {
if (i ==it.size -1) {
pathCircle.cubicTo(mPointControlls!![2 * i].x, mPointControlls!![2 * i].y, mPointControlls!![2 * i +1].x, mPointControlls!![2 * i +1].y, mPointDatas!![0].x, mPointDatas!![0].y)
}else {
pathCircle.cubicTo(mPointControlls!![2 * i].x, mPointControlls!![2 * i].y, mPointControlls!![2 * i +1].x, mPointControlls!![2 * i +1].y, mPointDatas!![i +1].x, mPointDatas!![i +1].y)
}
}
}
canvas.drawPath(pathCircle, mCirclePaint)
canvas.restore()
}
}
}
'''
最后说一下，怎么使用这个东西:超级简单：
后记：下一期讲怎么画桃心。就是在次基础上，进行变化。
网友评论