美文网首页
canvas绘制贝塞尔曲线

canvas绘制贝塞尔曲线

作者: 被虐的小鸡 | 来源:发表于2020-09-04 16:34 被阅读0次

    需要掌握的内容

    1. 难度应该大多都在数学的三角函数中,如果对这个知识点有问题的可以自行去学习一下


      直角三角形.png
    • sin角度=a/c
    • cos角度=b/c
    • tan角度=a/b
    • cot角度=b/a
    • sec角度=c/b
    • csc角度=c/a
    1. 数学坐标系和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

    相关文章

      网友评论

          本文标题:canvas绘制贝塞尔曲线

          本文链接:https://www.haomeiwen.com/subject/lznzsktx.html