Path&Canvas

Canvas api

  • drawArc()绘制弧形以Rect 的中心为圆点,90度方向为0度开始绘制弧形
//center 绘制的弧形是否经过圆点
canvas.drawArc(@NonNull RectF oval,float startAngle, float sweepAngle, boolean useCenter,@NonNull Paint paint)
  • canvas.drawTextOnPath(String str,Path path,float startAngle,float sweepAngle,Paint paint)

picture

Path api

  • 参考文献

Path常用方法解析

  • line to(x,y)
  • move to(x,y)
  • arcTo(Rect rect,float startAngle,float sweepAngle )//绘制弧形以Rect

  • close()//闭环,最后的path的终点会连接到其实点形成个闭环

  • arcTo(Rect rect,float startAngle,float sweepAngle,boolean forceMoveTo )//绘制弧形以Rect,forceMoveTo是否开始前画笔moveTo到Rect的起点位置

    绘制圆弧,若forceMoveTo为false,则用法和arcTo(RectF oval, float startAngle, float sweepAngle)一样,
    绘制圆弧之前不会移动(moveTo)path画笔位置。若为true,先强制调用moveTo移动path画笔至圆弧起点,再绘制圆弧。
    ps:如果调用arcTo(RectF oval, float startAngle, float sweepAngle,boolean forceMoveTo)方法之前没有对path进行任何操作,
    则forceMoveTo设置true或false效果都和设置true一样
    
    //也就是传false后即使你调用前先执行了moveTo()某个位置,但是不生效,传true,其强制会在drawPath之前moveTo到Rect的起点,即使你在前moveTo()的xy轴不是Rect的起点,其还是会移动到起点的位置
    
  • quadTo(float x1,float y1,float x2,float y2)//绘制二阶贝塞尔曲线 控制点坐标(x1,y1)终点坐标(x2,y2)

    • 贝塞尔曲线:正规的正弦函数线,取三个点连接然后寻找三个等比的点开始绘制曲线

    • 贝塞尔曲线:需要有起始点,顾在path绘制之前需要调用move To()方法来设置一个画笔的起点

      必须要理解掌握的贝塞尔曲线(原创)

  • cubicTo(float x1,float y1,float x2,float y2,float x3,float y3)//绘制三阶贝塞尔曲线 控制点坐标(x1,y1),(x2,y2),终点坐标(x3,y3)

    • 同上也需要设置起始点坐标,其实起始点坐标就是贝塞尔起点的一个点
  • rXxxTo()//r是relative想对的意识,和上边直接moveTo(),quadTo(),lineTo(),cubicTo(),不一样的是,其绘制内部的参数坐标是相对于画笔当前点的坐标,并不是画布左上角0,0的坐标

    rMoveTo()
    rQuadTo()
    rLineTo()
    rCubicTo()
    

  • 以上Path的单一调用

    Path的结合调用addXxx()

  • 添加另一段path,addPath的时候,其是会先移动到该线的起点位置然后开始绘制该线,所以可以理解为是相互独立的几条path

  • addArc(RectF rect,float startAngle,float sweepAngle);
  • addCircle(float x,float y,float radius,Direction dir)//dir是线的闭合方向,CW顺时针方向,CCW逆时针方向
  • addOval(RectF rect,Direction dir)//在矩形RectF范围内绘制一个椭圆形状
  • addRect(RectF rect,Direction dir)//绘制矩形–绘制起点为左上角
  • addRoundRect(RectF rect,float rx,float ry,Direction dir)//绘制四个角圆角大小相同的矩形,CW顺时针方向,起点位置左下角,CCW逆时针方向,起始点左上角

    picture

  • addRoundRect(RectF rect,float[] radii,Direction dir)//radii 的长度必须是8,也就是4个角分别的横轴圆角半径x,纵轴圆角半径y,起点位置同上

  • addPath(Path path,float dx,float dy)//dx,X轴平移的距离,dy Y轴平移的距离
  • addPath(Path path,Matrix matrix)//Matrix 3x3矩阵、xyz,可以设置旋转,偏移,翻转等
  • close();//封闭当前path,连接起点和终点
  • reset();//清空path上直线、曲线、保留填充设置
  • op(Path path,Op op)//当前path和这个path的进行布尔运算,交集,并集,异或,
  • setLastPoint(float dx,float dy)//修改path的最末点的坐标
    ###PaintMeasure

  • 测量path的长度,可以得到path的总长度和path上某一点的坐标//getPosTan(),getLength();

  • getSegment(float startId,float stopId,Path path,boolean startWithMoveTo)//裁剪对应得path,以传入的path绘制裁剪的部分
  • getPosTan(float distance,float []pos,float []tans)//distance:该path上距起点的距离,pos,传入数组,接受path上该点的坐标,tans:返回该点的切线坐标
  • getLength();//返回该Path的总长度

    mPathMeasure.getPosTan(mPathMeasure.getLength() * percent, pos, null);