前言: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()
}
}
}
'''
最后说一下,怎么使用这个东西:超级简单:
后记:下一期讲怎么画桃心。就是在次基础上,进行变化。