文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Android 多边形导圆角(Path画折线导圆角)

2023-10-10 14:09

关注

前言:用path画折线,2条线相交处导圆角

简介:为开发者提供工具类,方便对使用path画折线设置圆角。使用path画多边形,如三角形、矩形、平行四边形等,同时设置圆角。另外提供计算直线上某点坐标。

实现原理

三个点,2条直线相交,给中间点连接处导圆角。设圆角半径为radius,  三个点分别为p2, p3,p1,  如下图所示:给p3点处导圆角。先求出导圆角处连接的2点p4、p5坐标,再用path连接p2和p4,然后通过p4、p3、p5绘制贝塞尔曲线连接p4、p5两个点,最后连接p5、p1两个点。
总结:计算圆角的起始和结束点,使用贝塞尔曲线绘制圆角。


API使用:
 

三角形导圆效果如下:

 导圆角之后

 调用api如下

        int r = 22;//圆角尺寸        Path path = SimplePath.buildle()                .moveTo(50, 50, r, r)//起始点                .lineTo(200, 50, r, r)                .lineTo(200, 250, r, r)                .close()//结束,完成三角形                .build();

矩形导圆角

Path path = SimplePath.buildle()        .addRect(50, 50, 200, 250, r)        .build();

其它API使用:

获取线上点坐标   public static float[] getOnLinePointLocationEnd(float lenght, float x1, float y1, float x2, float y2)
示例:上述实现原理中,计算圆角起始坐标点p4. float[] p2f = SimplePath.getOnLinePointLocationEnd(r,x1,y1,x2,y2);Point p2 = new Point(p2f[0], p2f[1]);其中r在这里是圆角半径,表示圆角起始点p4与中间点p2之间的距离。​​​​​​​画线并添加圆角 (绘制的线是起始点到圆角结束点的路径,并不包含到第三点路径)  public static void lineToAndCorner(Path path, float startRadius, float endRadius, float x1, float y1, float x2, float y2, float x3, float y3) 

示例:上述实现原理中,如果给p3点导圆角r.

path先要自行设置起始点p2,  然后

SimplePath.lineToAndCorner(path, r, r, p2.x, p2.y, p3.x, p3.y, p1.x,p1y);

绘制的线是 p2到p4,再到p5的路径, 不包含,p5到p1的路径。目标点是中间点p3.

备注:方法参数详情请查阅源码

源码:

package com.ttkx.deviceinfo.bkchart;import android.graphics.Path;import android.graphics.Rect;import android.graphics.RectF;import java.util.ArrayList;import java.util.List;public class SimplePath {    public static Buildle buildle() {        return new Buildle();    }    public static class Buildle {        private Path mPath;        private class P {            public float x;            public float y;            public float startRadius;            public float endRadius;            public boolean isStartPoint;//是否是起始点            public P(float x, float y) {                this.x = x;                this.y = y;            }            public P(float x, float y, float startRadiu, float endRadiu) {                this.x = x;                this.y = y;                this.startRadius = startRadiu;                this.endRadius = endRadiu;            }        }        private List

mList = new ArrayList<>(); public void moveTo(float x, float y) { moveTo(x, y, 0, 0); } public Buildle setPath(Path path) { mPath = path; return this; } public Buildle moveTo(float x, float y, float startRadius, float endRadius) { P p = new P(x, y, startRadius, endRadius); p.isStartPoint = true; mList.add(0, p); return this; } public Buildle addRect(Rect rect, float r) { return addRect(rect.left, rect.top, rect.right, rect.bottom, r); } public Buildle addRect(RectF rect, float r) { return addRect(rect.left, rect.top, rect.right, rect.bottom, r); } public Buildle addRect(float left, float top, float right, float bottom, float r) { moveTo(left, top, r, r); lineTo(right, top, r, r); lineTo(right, bottom, r, r); lineTo(left, bottom, r, r); close(); return this; } public Buildle lineTo(float x, float y) { lineTo(x, y, 0, 0); return this; } public Buildle lineTo(float x, float y, float startRadius, float endRadius) { mList.add(new P(x, y, startRadius, endRadius)); return this; } public Buildle close() { if (mList.size() >= 1) { mList.add(mList.get(0)); } return this; } public Path build() { Path path = mPath; if (path == null) { path = new Path(); } for (int i = 0; i < mList.size(); i++) { P p = mList.get(i); float x = p.x; float y = p.y; if (i == 0) { if (p.isStartPoint) { if (hasCorner(p)) {P p1 = mList.get(i + 1);P p2 = p;float[] onePoint = getOnLinePointLocationEnd(p.startRadius, p1.x, p1.y, p2.x, p2.y);path.moveTo(onePoint[0], onePoint[1]); } else {path.moveTo(x, y); } } else { path.lineTo(x, y); } } else if (i == mList.size() - 1) { //最后一个点 P p0 = mList.get(0); if (p.x == p0.x && p.y == p0.y && hasCorner(p0)) { P p1 = mList.get(i - 1); P p2 = p0; P p3 = mList.get(1); lineToAndCorner(path, p2.startRadius, p2.endRadius, p1.x, p1.y, p2.x, p2.y, p3.x, p3.y); } else { path.lineTo(p.x, p.y); } } else { if (hasCorner(p)) { P p1 = mList.get(i - 1); P p2 = p; P p3 = mList.get(i + 1); lineToAndCorner(path, p2.startRadius, p2.endRadius, p1.x, p1.y, p2.x, p2.y, p3.x, p3.y); } else { path.lineTo(x, y); } } } return path; } private boolean hasCorner(P p) { return p.endRadius > 0 && p.startRadius > 0; } } public static void lineToAndCorner(Path path, float startRadius, float endRadius, float x1, float y1, float x2, float y2, float x3, float y3) { float[] onePoint = getOnLinePointLocationEnd(startRadius, x1, y1, x2, y2); path.lineTo(onePoint[0], onePoint[1]); float[] twoPoint = getOnLinePointLocationStart(endRadius, x2, y2, x3, y3); //绘制圆角 path.cubicTo(onePoint[0], onePoint[1], x2, y2, twoPoint[0], twoPoint[1]); } public static float[] getOnLinePointLocationStart(float lenght, float x1, float y1, float x2, float y2) { double degree = getDegree(x1, y1, x2, y2); double dx = getRightSideFromDegree(degree, lenght); double dy = getLeftSideFromDegree(degree, lenght); double v2 = x1 + dx; double v3 = y1 + dy; return new float[]{(float) v2, (float) v3}; } public static float[] getOnLinePointLocationEnd(float lenght, float x1, float y1, float x2, float y2) { double degree = MathHelper.getDegree(x1, y1, x2, y2); double dx = MathHelper.getRightSideFromDegree(degree, lenght); double dy = MathHelper.getLeftSideFromDegree(degree, lenght); double v2 = x2 - dx; double v3 = y2 - dy; return new float[]{(float) v2, (float) v3}; } //两点间的角度 private static double getDegree(float sx, float sy, float tx, float ty) { float nX = tx - sx; float nY = ty - sy; double angrad = 0d, angel = 0d, tpi = 0d; float tan = 0.0f; if (Float.compare(nX, 0.0f) != 0) { tan = Math.abs(nY / nX); angel = Math.atan(tan); if (Float.compare(nX, 0.0f) == 1) { if (Float.compare(nY, 0.0f) == 1 || Float.compare(nY, 0.0f) == 0) { angrad = angel; } else { angrad = 2 * Math.PI - angel; } } else { if (Float.compare(nY, 0.0f) == 1 || Float.compare(nY, 0.0f) == 0) { angrad = Math.PI - angel; } else { angrad = Math.PI + angel; } } } else { tpi = Math.PI / 2; if (Float.compare(nY, 0.0f) == 1) { angrad = tpi; } else { angrad = -1 * tpi; } } return Math.toDegrees(angrad); } private static double getRightSideFromDegree(double degree, double width) { double cos = Math.cos(Math.toRadians(degree)); return width * cos; } private static double getLeftSideFromDegree(double degree, double width) { double sin = Math.sin(Math.toRadians(degree)); return width * sin; }}

实践:绘制带箭头的提示框背景

第一步:先绘制带圆角的三角形。

三角形只有一个角导圆角

        int r = 10;//圆角尺寸        int ph = 30;//箭头离左侧距离        int arrowsHeight = 35;//箭头高度        Point p1 = new Point(ph, arrowsHeight);        Point p2 = new Point(ph + arrowsHeight * 2, arrowsHeight);        Point p3 = new Point(ph + arrowsHeight, 0);        Path path = SimplePath.buildle()                .setPath(new Path())//设置path (可以设置也可以不设置, 若不设置工具类自己创建一个path对象)                .moveTo(p1.x, p1.y)//起始点                .lineTo(p2.x, p2.y)                .lineTo(p3.x, p3.y, r, r)                .close()                .build();

效果如下:

 第二步:添加圆角矩形

int rectRadius = 30;path.addRoundRect(new RectF(0,arrowsHeight, getBounds().right, getBounds().bottom), rectRadius, rectRadius ,Path.Direction.CW);

第三步:创建自定义Drawable, 将path绘制出来,再将drawable设置为textView 背景, 最后给textView设置padding即可。

效果如下:

来源地址:https://blog.csdn.net/liuyu0915/article/details/131721872

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯