美文网首页
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

相关文章

  • 自带美感的贝塞尔曲线原理与实战——Android自定义UI

    目录一、前言二、贝塞尔曲线的绘制规则三、在canvas中如何绘制贝塞尔曲线四、实战五、写在最后 一、前言 贝塞尔曲...

  • Android贝塞尔曲线相关资料

    资料整理: Android-贝塞尔曲线 贝塞尔曲线扫盲 练习贝塞尔曲线 贝塞尔曲线绘制在线演示(带坐标) 生成三阶...

  • Android 路径绘制艺术——贝塞尔曲线

    目录 1)什么是贝塞尔曲线 2)贝塞尔曲线图解 3)Android绘制贝塞尔曲线 4)绘制水波纹效果 概述 什么是...

  • 技术总纲

    如何正确对用户密码进行加密? 彩虹表,盐值 Canvas 曲线绘制 贝塞尔曲线 Linux 调试代码 gdb调试 ...

  • canvas绘制贝塞尔曲线

    需要掌握的内容 难度应该大多都在数学的三角函数中,如果对这个知识点有问题的可以自行去学习一下直角三角形.png s...

  • 贝塞尔曲线动起来的花样炫酷极了

    前面我们花了几篇介绍了贝塞尔曲线的原理和绘制贝塞尔曲线,着实让我们见识到了贝塞尔曲线的美。好奇心驱使我想看看贝塞尔...

  • iOS 渐变色绘制

    1、layer 层绘制 2、贝塞尔绘制曲线 3、

  • 曲线之美 --贝塞尔曲线

    今天在学习绘图类:UIBezierPath时,发现一个方法用于绘制贝塞尔曲线 //绘制三次贝塞尔曲线 - (voi...

  • flutter贝塞尔曲线

    1.贝塞尔曲线 2.绘制贝塞尔曲线 1.要绘制贝塞尔线,我们需要四个点:起点,终点和两个控制点,如下图所示。移动控...

  • UIBezierPath 基础(一)

    首先了解贝塞尔曲线的初始化方法都有那些,可以根据不同的需求来初始化;其次设置贝塞尔曲线的绘制路线;最后把贝塞尔曲线...

网友评论

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

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