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

这篇具有很好参考价值的文章主要介绍了Android 多边形导圆角(Path画折线导圆角)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

实现原理

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

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

API使用:  

三角形导圆效果如下:

Android 多边形导圆角(Path画折线导圆角),android,path,圆角 导圆角之后Android 多边形导圆角(Path画折线导圆角),android,path,圆角

 调用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<P> 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;
        }
    }

    /**
     * 画线并添加圆点 (绘制的线是起始点到圆角结束点的路径,并不包含到p3点路径)
     *
     * @param path
     * @param startRadius 起始圆角半径
     * @param endRadius   结束圆角半径
     * @param x1          起始点
     * @param y1
     * @param x2          中间点
     * @param y2
     * @param x3          结束点
     * @param y3
     */
    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]);
    }

    /**
     * 获取线上点坐标
     *
     * @param lenght 线上点距离起始点(x1,y1)长度
     * @param x1     起始点x坐标
     * @param y1     起始点y坐标
     * @param x2     结束点x坐标
     * @param y2     结束点y坐标
     * @return
     */
    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};
    }

    /**
     * 获取线上点坐标
     *
     * @param lenght 线上点距离结束点(x2,y2)长度
     * @param x1     起始点x坐标
     * @param y1     起始点y坐标
     * @param x2     结束点x坐标
     * @param y2     结束点y坐标
     * @return
     */
    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);
    }

    /**
     * 直角三角形 根据角度和斜边求直角边
     *
     * @param degree 角度
     * @param width  斜边
     * @return 直角边长
     */
    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();

效果如下:Android 多边形导圆角(Path画折线导圆角),android,path,圆角

 第二步:添加圆角矩形

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

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

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

效果如下:文章来源地址https://www.toymoban.com/news/detail-569107.html

到了这里,关于Android 多边形导圆角(Path画折线导圆角)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 3DS MAX三维建模平面基础与初级多边形(可编辑多边形的讲解)

            3DS MAX三维建模平面基础与初级多边形(可编辑多边形的讲解)         欢迎大家来学习3DS MAX教程,在这里先说一下研究好3ds Max一定要一边看教程一边要自己学的操作才能更快的进步,预祝大家学习顺利。         这篇是第四篇关于3ds Max的文章了,基于上一

    2024年04月12日
    浏览(72)
  • 基于C++ 的OpenCV绘制多边形,多边形多条边用不用的颜色绘制

    使用基于C++的OpenCV库来绘制多边形,并且为多边形的不同边使用不同的颜色,可以按照以下步骤进行操作: 首先,确保你已经安装了OpenCV库并配置好了你的开发环境。 导入必要的头文件: 创建一个空白的图像,然后绘制多边形,并为每条边选择不同的颜色: 在这个示例中,

    2024年02月13日
    浏览(52)
  • 计算两个多边形的交集

    已知两个多边形Polygon1和Polygon2,分别由点集C1={P1,P2,...,Pm}和C2={Q1,Q2,...,Qn}表示,求这两个多边形的交集。 两个多边形相交后,其顶点要么是两个多边形边的交点,要么是在多边形内部的点。 计算两个多边形每条边之间的交点。 计算包含在多边形内部的点。 将交点和多边形内

    2024年02月12日
    浏览(66)
  • 多边形边的插值

    算法描述及提问: 给定一个最小长度,对多边形的每一条边不断的对半插值,使得插值后的每一条边都要不大于最小长度。 测试ChatGPT - 中文版 VSCode插件。 显然是错误的。 正确的结果: 使用ChatGPT-中文版 VSCode,基本可以写出一个简单的算法,但是正确与否还需要个人Debug及

    2024年02月12日
    浏览(67)
  • 使用OpenCV的函数polylines()绘制多条相连的线段和多边形;使用函数fillPoly()绘制带填充效果的多边形

    函数polylines()可用来根据点集绘制多条相连的线段,也可用来绘制多边形。 函数polylines()有两种原型,这里只向大家介绍比较常用的那种原型。 函数polylines()的C++原型如下: 函数polylines()的Python原型如下: 函数polylines()的参数意义如下: img—绘制的多条相连线段或多边形所在

    2024年02月04日
    浏览(63)
  • C#凹多边形求内心

    在计算凹多边形内心时,一种常见的方法是使用三角剖分和重心法。您可以按照以下步骤进行: 将凹多边形进行三角剖分,得到一系列三角形。 对每个三角形计算其重心,重心是三个顶点的平均值。 将所有三角形的重心进行平均,得到凹多边形的内心。 以下是一个简单的示

    2024年01月25日
    浏览(60)
  • CAD泰森多边形框架3D插件

    CAD泰森多边形框架3D插件可用于在AutoCAD软件内生成三维Voronoi框架结构实体模型,适用于多孔Voronoi科研论文渲染绘图、Voronoi框架有限元建模、Voronoi空间结构优化等方面的应用。 插件可设置生成的几何尺寸、晶格尺寸及边框直径等信息。 插件可同时生成实体框架及线条框架两

    2024年02月11日
    浏览(51)
  • 利用fabric绘画矩形和多边形

    需求在一张图片上标注矩形和多边形,支持回显; fabric版本:4.6.0; Fabric.js 是一个功能强大且操作简单的 Javascript HTML5 canvas 工具库。 官方文档 参考链接 组件代码drawer.vue createUuid 是为了让每一个图形有自己的id;方便用于获取用户点击的那个图形等操作; defaultRectStyle、d

    2024年02月08日
    浏览(67)
  • cesium学习记录08-鼠标绘制多边形

    上一篇学习了创建实体的一些基础知识,但有时还需要我们使用鼠标进行手动绘制,这一篇就来进行鼠标绘制实体的实现(点,线,矩形,圆,多边形)。 (这里需要掌握三个知识点,一是上一篇中的创建实体、二是鼠标事件、三是回调函数) 既然是鼠标绘制,自然离不开

    2024年02月12日
    浏览(43)
  • opencv 判断点在多边形内外

            基于Python 和 OpenCV 画出多边形,以及判断某个点是不是在多边形内。         函数定义:cv2.pointPolygonTest(contour, pt, measureDist)         函数功能:找到图像里的点和轮廓之间的最短距离. 它返回的距离当点在轮廓外的时候是负值,当点在轮廓内是正值,如果

    2024年02月12日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包