实现人物关系图谱，人物影响力图

最新推荐文章于 2024-03-06 11:53:47 发布

锐湃

最新推荐文章于 2024-03-06 11:53:47 发布

阅读量785

点赞数

分类专栏：图形文章标签： android java 开发语言

原文链接：https://juejin.cn/post/7123133679274033189

版权

图形专栏收录该内容

158 篇文章 13 订阅

订阅专栏

前言

最近在做一个项目，其中有一个页面是要做一个类似于个人分享关系图的效果。于是找了网上很多demo，借鉴的一些思路和方法，打算自己动手撸一个出来。

效果

demo

Github项目demo

整体思路

创建自定义的view继承framelayout捆绑布局relativelayout，放置一个绘制线的布局，和一个绘制头像的布局(用来add动态创建的iamgeview)，这里默认给予3000*3000。
获取数据，根据degree分别筛选出不同层次的实体类list。
绘制第一层头像（即中心点）：默认中心点的坐标为1500*1500，以及set4个边缘的坐标（以正方形考虑）,并绘制头像。
绘制第二层头像：获取第二层数据,360度除以个数，计算出角度，根据角度，计算出中心点，并绘制头像。
绘制第三层头像：根据第二层的角度和坐标，计算出角度和中心点，并绘制头像。(重点需要头像去重)
根据坐标点画线，并设置长按和缩放事件。

所以在我的自定义view中包含2个view（设置了默认布局大小3000*3000）

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <!--线布局-->
    <com.littletree.mypersonalconnectionmap.customview.LineImageView
        android:id="@+id/lineImageView"
        android:layout_width="3000dp"
        android:layout_height="3000dp" />

    <!--圆形头像布局-->
    <FrameLayout
        android:id="@+id/layouPoints"
        android:layout_width="3000dp"
        android:layout_height="3000dp"
        android:layout_gravity="center_vertical" />
</RelativeLayout>
复制代码

常量的配置信息

FrameLayout layouPoints;  //用于添加头像的布局
private LineImageView lineImageView;  //画线以及中心头像的小圆(项目ui图的需要)

private List<AtmanRelation> sourceList = new ArrayList<>(); //包含1,2,3层的实体类(接口返回的数据)
private ArrayList<PointLeo> points = new ArrayList<>();//用于连线的。
private ArrayList<RectPoint> rects = new ArrayList<>();//用于判断重叠的
private ArrayList<RelationBean> reList_2 = new ArrayList<>();//第二度关系的集合，目的是 为了绘制完一度后再绘制二度

private int width_degress_one = PUtil.dip2px(getContext(), 85);  //第一层头像直径
private int width_degress_two = PUtil.dip2px(getContext(), 50);  //第二层头像直径
private int width_degress_three = PUtil.dip2px(getContext(), 30);   //第三层头像直径
private Context mcontext;

private int mAngleNum = 120;   //第三层扩散的角度

private int LastCenterX;  //理论中心点为1500dp处
private int LastCenterY;  //理论中心点为1500dp处
复制代码

绘制中心点的头像

ArrayList<AtmanRelation> myAtmanList = getDegree(0);  //getDegree()为获取第几层数据的方法
myAtmanList.get(0).setY_center(LastCenterX);
myAtmanList.get(0).setX_center(LastCenterY);
myAtmanList.get(0).setRectPoint(new RectPoint(LastCenterX - width_degress_one / 2, LastCenterY - width_degress_one / 2
        , LastCenterX + width_degress_one / 2, LastCenterY + width_degress_one / 2));
showAvatar(LastCenterX - width_degress_one / 2, LastCenterY- width_degress_one / 2, myAtmanList.get(0)); //showAvatar()为绘制头像
复制代码

绘制第二层

根据第一层(中心点)坐标,以及第二层的个数，用360度分割，根据所得的角度计算出第二层各自的坐标，获取坐标还得判断是否位置重复，如果位置被占用就增加一个固定长度重复判断，直至成功。再用该点去计算第三层的数据。

int circle = width_degress_one;//中心头像的直径
ArrayList<AtmanRelation> oneAtmanList = getDegree(1);
int number = oneAtmanList.size();//当前第二层的数量
int x_center = LastCenterX;
int y_center = LastCenterY;
for (int i = 0; i < oneAtmanList.size(); i++) {
    AtmanRelation itemBean = oneAtmanList.get(i);
    double jiaod = 360 / ((double) oneAtmanList.size());   //计算出每个头像间隔的角度
    double currentJD = 0 + jiaod * (i + 1);   //每个头像的角度

    int X1 = 0;
    int Y1 = 0;

    //根据角度和上一层中心点的坐标，计算出自己的坐标
    if (currentJD != 0 && currentJD != 180 && currentJD != 360) {
        X1 = x_center + (int) (circle * (Math.cos(Math.PI * currentJD / 180)));
        Y1 = y_center + (int) (circle * (Math.sin(Math.PI * currentJD / 180)));
    } else {
        if (currentJD == 0 || currentJD == 360) {
            X1 = x_center + circle;
            Y1 = y_center;
        } else {
            Y1 = y_center;
            X1 = x_center - circle;
        }

    }

    int trueX1 = 0;
    int trueY1 = 0;
    //当前点的所在区域
    RectPoint leoPoint;

    trueX1 = X1 - width_degress_two / 2;
    trueY1 = Y1 - width_degress_two / 2;
    leoPoint = new RectPoint(trueX1, trueY1, trueX1 + width_degress_two, trueY1 + width_degress_two); //范围的4个坐标

    if (checkHaveRect(leoPoint)) {//检查是否有重叠，如有重复，要增加一个固定的长度再次循环,直到不再重复
        repetAdd(x_center, y_center, circle, currentJD, 1, itemBean);
    } else {
        //false 没有重叠，则直接添加
        showAvatar(trueX1, trueY1, itemBean);
        //point记录数据，point最后用于连线
        points.add(new PointLeo(x_center, y_center, X1, Y1, itemBean.getType(), itemBean.getDegree(), true));

        // 把当前的中心点坐标  和当前点的所在区域存储带rects中，到时候要用于判断是否位置重复
        itemBean.setX_center(X1);
        itemBean.setY_center(Y1);
        //这边增加一点范围，因为ui需要，布局并不只有头像，还有名称之类，可自行调节
        itemBean.setRectPoint(new RectPoint(trueX1 - PUtil.dip2px(getContext(), 16), trueY1 - PUtil.dip2px(getContext(), 16),
                trueX1 + PUtil.dip2px(getContext(), 16), trueY1 + PUtil.dip2px(getContext(), 16)));
        rects.add(leoPoint);

        /**
         * 这里是添加成功关系以后，进行的下一层 关系的绘制
         * */
        ArrayList<AtmanRelation> sonList = getsonList(itemBean);//获取该点下一层的数据
        if (sonList.size() > 0) {
            int numberNex = sonList.size();//下一层关系有几个。
            int circle2 = width_degress_three;
            //存储到relist_2中
            reList_2.add(new RelationBean(circle2, numberNex, X1, Y1, currentJD, 2, sonList)); 
        }

    }

    if (i == number - 1) {
        if (reList_2.size() > 0) {
            for (int j = 0; j < reList_2.size(); j++) {
                RelationBean relationBean = reList_2.get(j);
                if (relationBean.getNumberNex() > 0) {
                    //绘制第三层
                    addNexPoint(relationBean.getCircle(), relationBean.getNumberNex(), relationBean.getX1(), relationBean.getY1(), relationBean.getTrueJD(), relationBean.getRelation(), relationBean.getAtmanRelations(), j);
                }
            }
        }
    }

}
复制代码

绘制第三层

该方法与绘制第二层的区别在于获取角度，是在原角度的基础上减去扩散角度的一半。 double trueJD = nowJD % 360 - mAngleNum/2; 如果设置第四层，第五层，可以继续沿用该方法

public void addNexPoint(int circleNex, double numberNex, int x_centerNex, int y_centerNex, double nowJD, int relation, ArrayList<AtmanRelation> atmanRelations, int index) {
    int circle = circleNex;//半径的长度
    double number = numberNex + 1;//当前关系个数。当然要加上父类那条线
    int x_center = x_centerNex;//目前坐标中心点
    int y_center = y_centerNex;//目前坐标重新点
    double trueJD = nowJD % 360 - mAngleNum/2;
    for (int i = 0; i < numberNex; i++) {
        AtmanRelation itemBean = atmanRelations.get(i);
        //相隔的角度就是
        double jiaod = mAngleNum / number;
        double currentJD = trueJD + jiaod * (i + 1);

        int X1 = 0;
        int Y1 = 0;
        if (currentJD != 0 && currentJD != 180 && currentJD != 360) {//别面有错误出现
            X1 = x_center + (int) (circle * (Math.cos(Math.PI * currentJD / 180)));
            Y1 = y_center + (int) (circle * (Math.sin(Math.PI * currentJD / 180)));
        } else {
            if (currentJD == 0 || currentJD == 360) {
                X1 = x_center + circle;
                Y1 = y_center;
            } else {
                Y1 = y_center;
                X1 = x_center - circle;
            }

        }

        int trueX1 = 0;
        int trueY1 = 0;
        //当前点的所在区域则是
        RectPoint leoPoint;

        if (0 == itemBean.getDegree()) {
            trueX1 = X1 - width_degress_one / 2;//减去自身控件的长度
            trueY1 = Y1 - width_degress_one / 2;//减去自身控件的长度
            leoPoint = new RectPoint(trueX1 - width_degress_one, trueY1 - width_degress_one,
                    trueX1 + width_degress_one, trueY1 + width_degress_one);
        } else if (1 == itemBean.getDegree()) {
            trueX1 = X1 - width_degress_two / 2;//减去自身控件的长度
            trueY1 = Y1 - width_degress_two / 2;//减去自身控件的长度
            leoPoint = new RectPoint(trueX1, trueY1,
                    trueX1 + width_degress_two, trueY1 + width_degress_two);
        } else {
            trueX1 = X1 - width_degress_three / 2;//减去自身控件的长度
            trueY1 = Y1 - width_degress_three / 2;//减去自身控件的长度
            leoPoint = new RectPoint(trueX1, trueY1,
                    trueX1 + width_degress_three, trueY1 + width_degress_three + PUtil.dip2px(getContext(), 20));
        }

        if (checkHaveRect(leoPoint)) {//检查是否有重叠，true为有重叠。要增加半径的长度
            repetAdd(x_center, y_center, circle, currentJD, relation, itemBean);
        } else {//false 没有重叠，则直接添加
            showAvatar(trueX1, trueY1, itemBean);

            points.add(new PointLeo(x_center, y_center, X1, Y1, itemBean.getType(), itemBean.getDegree(), true));

            itemBean.setX_center(X1);
            itemBean.setY_center(Y1);
            //这边增加比上一层略少的范围,越往外圆越小
            itemBean.setRectPoint(new RectPoint(trueX1 - PUtil.dip2px(getContext(), 8), trueY1 - PUtil.dip2px(getContext(), 8),
                    trueX1 + PUtil.dip2px(getContext(), 8), trueY1 + PUtil.dip2px(getContext(), 8)));
            rects.add(leoPoint);
        }
    }


}
复制代码

检查是否重复方法

只要循环判断是否在范围内即可。

public boolean checkHaveRect(RectPoint rectPoint) {
    for (int i = 0; i < rects.size(); i++) {
        RectPoint currenRect = rects.get(i);
        if (rectPoint.getLeft_x() > currenRect.getRigth_x()
                || rectPoint.getLeft_top_y() > currenRect.getRight_bottom_y()
                || rectPoint.getRight_bottom_y() < currenRect.getLeft_top_y()
                || rectPoint.getRigth_x() < currenRect.getLeft_x()
        ) {

        } else {
            return true;//只要不符合上面条件  则有重叠
        }

    }

    return false;//没有包含在内
}
复制代码

添加头像方法

如果只要头像可用imageview代替，这边需要添加背景和文字，我使用了supertextview

SuperTextView imageView_bottom_yy = new SuperTextView(getContext());
imageView_bottom_yy.setUrlImage(itemBean.getVisitorAvatar());
LayoutParams leoParams_bottom_yy = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
layouPoints.addView(imageView_bottom_yy, leoParams_bottom_yy);
layouPoints.addView(textview_name, Params_textview_name);
复制代码

画线布局

在所有点绘制好后，传入存储的点坐标，即可绘制

public class LineImageView extends View {


    //test
    private Paint mPaint;
    private Paint PointPaint;  //8个点
    private ArrayList<PointLeo> points;

    public LineImageView(Context context) {
        this(context, null);
    }

    public LineImageView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public LineImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(getResources().getColor(R.color.relationship_line));
        mPaint.setStyle(Paint.Style.STROKE);//设置填充样式
        mPaint.setStrokeWidth(1);//设置画笔宽度

        PointPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        PointPaint.setColor(getResources().getColor(R.color.relationship_line));
        PointPaint.setStyle(Paint.Style.STROKE);//设置填充样式
        PointPaint.setStrokeWidth(PUtil.dip2px(getContext(), 5));//设置画笔宽度
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (points != null) {
            for (int i = 0; i < points.size(); i++) {
                PointLeo pointLeo = points.get(i);
                
                PathEffect pathEffect = new DashPathEffect(new float[]{10, 10}, 2);
                mPaint.setPathEffect(pathEffect);

                Path linePath = new Path();
                linePath.moveTo(pointLeo.getX(), pointLeo.getY());
                linePath.lineTo(pointLeo.getX1(), pointLeo.getY1());
                canvas.drawPath(linePath, mPaint);
            }
        }

    }


    public void setLines(ArrayList<PointLeo> points) {
        this.points = points;
        invalidate();
    }
}
复制代码

添加缩放和长按手势

因为需要上下左右滑动,在我的自定义view外我套了一层HVScrollView 然后在HVScrollView上添加了缩放和长按手势。

//缩放手势
public class ScaleGestureListener implements ScaleGestureDetector.OnScaleGestureListener {

    @Override
    public boolean onScale(ScaleGestureDetector detector) {

        float previousSpan = detector.getPreviousSpan();
        float currentSpan = detector.getCurrentSpan();
        if (currentSpan < previousSpan) {
            // 缩小
            scale = preScale - (previousSpan - currentSpan) / 1000;
            if (scale < 0.2f) {
                scale = 0.2f;
            }
        } else {
            // 放大
            scale = preScale + (currentSpan - previousSpan) / 1000;
            if (scale > 1.0f) {
                scale = 1.0f;
            }
        }

        // 缩放view
        shaderImage.setScaleX(scale);
        shaderImage.setScaleY(scale);
        return false;
    }

    @Override
    public boolean onScaleBegin(ScaleGestureDetector detector) {
        return true;
    }

    @Override
    public void onScaleEnd(ScaleGestureDetector detector) {
        preScale = scale;//记录本次缩放比例
    }
}

//长按手势
public class LongPressGestureListener extends GestureDetector.SimpleOnGestureListener {
    @Override
    public void onLongPress(MotionEvent e) {
        //保存图片dialog
        dialog_twobutton_notitle.show();
    }
}
复制代码

添加到hvscrollview中

mScaleGestureDetector = new ScaleGestureDetector(PersonalConnectionMapActivity.this,
        new ScaleGestureListener());

mLongPressGestureListener = new GestureDetector(PersonalConnectionMapActivity.this,
        new LongPressGestureListener());
        
        ```
hvScrollView.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View view, MotionEvent motionEvent) {
        if (moreFinger) {
            mScaleGestureDetector.onTouchEvent(motionEvent);
        }
        mLongPressGestureListener.onTouchEvent(motionEvent);
        switch (motionEvent.getAction() & MotionEvent.ACTION_MASK) {
            case MotionEvent.ACTION_DOWN:
                //第一个手指按下事件
                break;
            case MotionEvent.ACTION_POINTER_DOWN:
                //第二个手指按下事件
                moreFinger = true;
                break;
            case MotionEvent.ACTION_UP:
                moreFinger = false;
                mhandler.sendEmptyMessage(12);//手指放开来个回弹效果
                break;
        }
        return moreFinger;
    }
});
```
复制代码

在使用过程中遇到的问题

如果数据量过小，设置的滑动布局却为3000*3000，空白占比太大,保存的图片也有很多留白。

如果数据量过大，数据不会显示全。

解决办法

事先需要根据数据计算出最大宽高设置给hvscrollview，然后开始绘制。计算的过程和绘制过程基本相同，就不再贴出。

hvScrollView.post(new Runnable() {
    @Override
    public void run() {
        shaderImage.setVisibility(View.GONE);
        shaderImage.setmAngleNum(mAngleNum);
        shaderImage.setmDiameter(mDiameter_one,mDiameter_two,mDiameter_three);
        shaderImage.getmaxXYRange(atmanRelationList);
        shaderImage.changeViewRangle(hvScrollView.getWidth(),hvScrollView.getHeight());

        shaderImage.setSourceList(atmanRelationList);
        tryScale(scale, 0.9f);
    }
});
复制代码