需要掌握的内容
-
难度应该大多都在数学的三角函数中，如果对这个知识点有问题的可以自行去学习一下
直角三角形.png
- sin角度=a/c
- cos角度=b/c
- tan角度=a/b
- cot角度=b/a
- sec角度=c/b
- csc角度=c/a
-
数学坐标系和Android坐标系的区别
数学坐标系.png
y轴朝上是+，x轴朝右是+
Android坐标系.png
x轴朝右是+，y轴朝下是+
Demo代码
class LinePathView : View{
//坐标轴的paint
val paint: Paint=Paint()
val path: Path=Path()
//贝塞尔曲线的画笔
val pPaint:Paint=Paint()
lateinit var center:PointF
constructor(context: Context) : super(context){
init()
}
constructor(context: Context, attrs: AttributeSet?) : super(context, attrs){
init()
}
constructor(context: Context, attrs: AttributeSet?, defStyleAttr: int) : super(
context,
attrs,
defStyleAttr
){
init()
}
private fun init() {
paint.isAntiAlias=true
paint.isDither=true
paint.color=Color.BLACK
paint.strokeWidth=3f
paint.style=Paint.Style.FILL
pPaint.isAntiAlias=true
pPaint.isDither=true
pPaint.color=Color.RED
pPaint.strokeWidth=3f
}
override fun onSizeChanged(w: int, h: int, oldw: int, oldh: int) {
super.onSizeChanged(w, h, oldw, oldh)
center=PointF((measuredWidth/2).tofloat(), (measuredHeight/2).tofloat())
}
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
canvas.drawLine((measuredWidth/2).tofloat(), 0F, (measuredWidth/2).tofloat(),
measuredHeight.tofloat(),paint)
canvas.drawLine(0f,(measuredHeight/2).tofloat(), measuredWidth.tofloat(),
(measuredHeight/2).tofloat(),paint)
//计算x轴上顶点的坐标
val top = calPoint(center, (measuredHeight / 2).tofloat(), 90F)
val rightTop = calPoint(top, 80f, -45f)
canvas.drawLine(top.x,top.y,rightTop.x,rightTop.y,paint)
val leftTop = calPoint(top, 80f, -135f)
canvas.drawLine(top.x,top.y,leftTop.x,leftTop.y,paint)
//计算y轴右顶点的坐标
val rightY = calPoint(center, (measuredWidth / 2).tofloat(), 360F)
val yTopLeft = calPoint(rightY, 80f, 135f)
canvas.drawLine(rightY.x,rightY.y,yTopLeft.x,yTopLeft.y,paint)
val yTopRight = calPoint(rightY, 80f, -135f)
canvas.drawLine(rightY.x,rightY.y,yTopRight.x,yTopRight.y,paint)
//计算贝塞尔曲线的一段的终点坐标(起点是中心点)
val lastPoint = calPoint(center, 200f, 0f)
//计算贝塞尔曲线控制点的坐标
val controlPoint = calPoint(center, 200f, 60f)
path.reset()
path.moveTo(center.x,center.y)
path.quadTo(controlPoint.x,controlPoint.y,lastPoint.x,lastPoint.y)
canvas.drawPath(path,pPaint)
//根据第一个贝塞尔曲线的终点画第二个
val secondLastPoint = calPoint(lastPoint, 200f, 0f)
//第二个贝塞尔曲线的控制点
val secondControl = calPoint(lastPoint, 200f, -60f)
path.reset()
path.moveTo(lastPoint.x,lastPoint.y)
path.quadTo(secondControl.x,secondControl.y,secondLastPoint.x,secondLastPoint.y)
canvas.drawPath(path,pPaint)
//绘制梯形(以中心点为坐标在第二象限找一个点作为梯形底边的一个顶点)
val rightBottomPoint = calPoint(center, 200f, 135f)
val leftBottomPoint = calPoint(rightBottomPoint, 300f, -180f)
val leftTopPoint = calPoint(leftBottomPoint, 80f, 45f)
val rightTopPoint = calPoint(leftTopPoint, 200f, 0f)
path.reset()
path.moveTo(rightBottomPoint.x,rightBottomPoint.y)
path.lineTo(leftBottomPoint.x,leftBottomPoint.y)
path.lineTo(leftTopPoint.x,leftTopPoint.y)
path.lineTo(rightTopPoint.x,rightTopPoint.y)
canvas.drawPath(path,pPaint)
//在第三象限找一个点作为三角形的顶点
val sanTopPoint = calPoint(center, 300f, -135f)
val sanRightBottom = calPoint(sanTopPoint, 200f, -45f)
val sanLeftBottom = calPoint(sanRightBottom, 300f, 180f)
path.reset()
path.moveTo(sanTopPoint.x,sanTopPoint.y)
path.lineTo(sanLeftBottom.x,sanLeftBottom.y)
path.lineTo(sanRightBottom.x,sanRightBottom.y)
canvas.drawPath(path,pPaint)
}
fun calPoint(start: PointF,lineLength: float,angel: float): PointF {
//根据角度的cos值和斜边的长度求出相邻边的长度，也就是x的偏移量
val x:float= (Math.cos(Math.toRadians(angel.todouble()))*lineLength).tofloat()
//根据角度的sin值和斜边的长度求出相对边的长度，也就是y的偏移量
val y:float= (Math.sin(Math.toRadians(angel.todouble()-180))*lineLength).tofloat()
return PointF(start.x+x,start.y+y)
}
}
运行结果
可能有点丑，但是只要内部原理知道了，花点时间可以自己调一下角度和线的长度。
运行结果.png