使用canvas画拓跋图

需求

顶部一个tab，左侧一个tab，左侧tab做锚点控制。点击左侧跳转到对应模块，每个模块内容，模块内容根据权限做判断是否可以点，有权限点击跳转，否则置灰。

个人思路

有些内容中间隔了几个空位：数据使用对象数组，遍历操作，因为数据是写死的，所以可以直接使用空对象保留位置。

线：画线部分，根据原型来看，目前就几种类型，询问产品后，后期内容也应该是使用目前几种线就符合操作，那就使用canvas直接画。

锚点：使用react得antd，锚点有现成的可以直接使用。

线

线有直线和虚线，使用ctx.setLineDash([5, 5])设置为虚线。

其他的线其实可以做成可配置的（现在写死的，如果修改css后就需要重新修改这些内容）。
ctx.closePath() 线最后的三角形是实心的，需要闭合
ctx.fillStyle = 'black' 设置颜色为黑色；

ini 复制代码

import React, { useEffect, useRef } from 'react';

const Line = ({ data }) => {
    const canvasRef = useRef(null);

    useEffect(() => {
       const { dashed = false, downward = false, top = false, isRightTop = false, twoGridsSolid = false, isTop=false } = data;  
        const canvas = canvasRef.current;
        const ctx = canvas.getContext('2d');

        // 设置线条的颜色和宽度
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;

        if (dashed) {
            // 设置线条为虚线
            ctx.setLineDash([5, 5]);
        }

        // 绘制路径
        ctx.beginPath();
        // 向下
        if (downward) {
            ctx.moveTo(120, 200); 
            ctx.lineTo(260, 200); 
            ctx.lineTo(260, 300); 
            // 向上
        } else if (top) {
            ctx.moveTo(120, 200);
            ctx.lineTo(160, 200);
            ctx.lineTo(160, 30);
            // 向右再向上
        } else if (isRightTop) {
            ctx.moveTo(120, 210);
            ctx.lineTo(250, 210);
            ctx.lineTo(250, 35);
            // 占2格连线
        }else if(twoGridsSolid){
            ctx.moveTo(120, 200);
            ctx.lineTo(380, 200);
            // 顶部连线
        } else {
            ctx.moveTo(70, 140); 
            ctx.lineTo(70, 120); 
            ctx.lineTo(450, 120); 
            ctx.lineTo(450, 140);
        }
        // 设置箭头的填充颜色
        ctx.fillStyle = 'black';

        // 绘制路径
        ctx.stroke();

        // 绘制箭头并填充颜色
        ctx.beginPath();
        if (downward) {
            ctx.moveTo(260, 300); 
            ctx.lineTo(250, 290);
            ctx.lineTo(270, 290);
        } else if(twoGridsSolid) {
          ctx.moveTo(380, 200); 
          ctx.lineTo(370, 190); 
          ctx.lineTo(370, 210);
          // 顶部连线
        }else if (isTop) {
            ctx.moveTo(450, 140); 
            ctx.lineTo(440, 130); 
            ctx.lineTo(460, 130);
        }
        ctx.closePath();

        // 填充箭头
        ctx.fill();
    }, []);

    return <canvas ref={canvasRef} width={800} height={300} />;
};
export default Line;

锚点

antd使用的是4.x版本的
affix设置为false不使用固定模式
getCurrentAnchor自定义高亮的锚点,我这里默认为#1
getContainer指定滚动的容器

xml 复制代码

 <Tabs defaultActiveKey="1">
    {tabList.map((v) => (
        <Tabs.TabPane tab="一级分类" key={v.id}>
            <div className={styles.container}>
                <div className={styles.anchor}>
                    <Anchor
                        affix={false}
                        getCurrentAnchor={(e) => {
                            setTabKey(!!e ? e : '#1');
                            // 默认为#1
                            return !!e ? e : '#1';
                        }}
                        getContainer={() => document.getElementById('content')}
                    >
                        {v.arr.map((val) => (
                            <div className={styles.linkList}>
                                {tabkey == ('#' + val.id) && 
                                  <div className={styles.border}></div>
                                }
                                <Link key={val.id} href={'#' + val.id} title={val.name} />
                            </div>
                        ))}
                    </Anchor>
                </div>
                <div className={styles.rightContent} id="content">
                    {v.arr.map((val) => (
                        <div key={val.id} id={val.id} className={styles.list}>
                            <div className={styles.name}>
                                <ScheduleFilled style={{ color: '#008dff', marginRight: '10px' }} />
                                {val.name}
                            </div>
                            {!val.multiple ? (
                                <Container data={val.list} />
                            ) : (
                                <>
                                    {val.list.map((value, index) => (
                                        <Container key={index} data={value.arrList} />
                                    ))}
                                </>
                            )}
                        </div>
                    ))}
                </div>
            </div>
        </Tabs.TabPane>
    ))}
</Tabs>

总结

我这样做是因为感觉这样简单一点，其他思路可以设置横纵坐标然后他们连接起来。上面的图这种空白的位置其实都是有内容，相当于是设置了一个整体，没有的地方就把内容隐藏掉了