图形基础篇02 # 指令式绘图系统:如何用Canvas绘制层次关系图?

Posted 凯小默

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图形基础篇02 # 指令式绘图系统:如何用Canvas绘制层次关系图?相关的知识,希望对你有一定的参考价值。

说明

【跟月影学可视化】学习笔记。

如何用 Canvas 绘制几何图形?

1. Canvas 元素和 2D 上下文

Canvas 元素上的 width 和 height 属性不等同于 Canvas 元素的 CSS 样式的属性。这样分开能更方便地适配不同的显示设备。

  • CSS 属性中的宽高影响 Canvas 在页面上呈现的大小
  • HTML 属性中的宽高则决定了 Canvas 的坐标系

Canvas 的 html 属性宽高为画布宽高,CSS 样式宽高为样式宽高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>如何用Canvas绘制层次关系图</title>
    <style>
        canvas 
            width: 256px;
            height: 256px;
        
    </style>
</head>
<body>
    <canvas width="512" height="512"></canvas>
</body>
</html>

2. Canvas 的坐标系

默认左上角为坐标原点,x 轴水平向右,y 轴垂直向下。

3. 利用 Canvas 绘制几何图形

3.1、获取 Canvas 上下文

首先是获取 Canvas 元素。

const canvas = document.querySelector("canvas");

通过 getContext 方法拿到它的上下文对象。

const context = canvas.getContext("2d");

3.2、用 Canvas 上下文绘制图形

context 对象 API

  1. 设置状态的 API,可以设置或改变当前的绘图状态(颜色、线宽、坐标变换等)。
  2. 绘制指令 API,用来绘制不同形状的几何图形。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>如何用Canvas绘制层次关系图</title>
    <style>
        canvas 
            border: 1px dashed salmon;
        
    </style>
</head>
<body>
    <canvas width="512" height="512"></canvas>

    <script>
        const canvas = document.querySelector("canvas");
        const context = canvas.getContext("2d");

        /*****方法一:直接改变要绘制的图形顶点的坐标位置*****/
        // 将正方形填充成绿色
        context.fillStyle = "green";
        // 绘制的路径
        context.beginPath();
        // 调用 rect 指令完成绘图
        context.rect(canvas.width/2 - 50, canvas.height/2 - 50, 100, 100);
        // 将绘制的内容真正输出到画布中
        context.fill();

        /*****方法二:对 Canvas 画布的整体做一个平移操作*****/
        // 将正方形填充成橙红色
        context.fillStyle = "salmon";
        // 绘制的路径
        context.beginPath();
        // 暂存状态
        context.save();
        // 平移
        context.translate(-25, -25);
        // 调用 rect 指令完成绘图
        context.rect(canvas.width/2, canvas.height/2, 50, 50);
        // 恢复状态
        context.restore();
        // 将绘制的内容真正输出到画布中
        context.fill();
    </script>
</body>
</html>

如何用 Canvas 绘制层次关系图?

需要实现下面的效果

json数据如下:

export default 
    "name": "中国",
    "children": [
        
            "name": "浙江",
            "children": [
                
                    "name": "杭州"
                ,
                
                    "name": "宁波"
                ,
                
                    "name": "温州"
                ,
                
                    "name": "绍兴"
                
            ]
        ,
        
            "name": "广西",
            "children": [
                
                    "name": "桂林"
                ,
                
                    "name": "南宁"
                ,
                
                    "name": "柳州"
                ,
                
                    "name": "防城港"
                
            ]
        ,
        
            "name": "黑龙江",
            "children": [
                
                    "name": "哈尔滨"
                ,
                
                    "name": "齐齐哈尔"
                ,
                
                    "name": "牡丹江"
                ,
                
                    "name": "大庆"
                
            ]
        ,
        
            "name": "新疆",
            "children": [
                
                    "name": "乌鲁木齐"
                ,
                
                    "name": "克拉玛依"
                ,
                
                    "name": "吐鲁番"
                ,
                
                    "name": "哈密"
                
            ]
        ,
        
            "name": "河北",
            "children": [
                
                    "name": "石家庄"
                ,
                
                    "name": "唐山"
                ,
                
                    "name": "邯郸"
                ,
                
                    "name": "秦皇岛"
                
            ]
        ,
        
            "name": "西藏",
            "children": [
                
                    "name": "拉萨"
                ,
                
                    "name": "昌都"
                ,
                
                    "name": "林芝"
                
            ]
        ,
        
            "name": "江苏",
            "children": [
                
                    "name": "南京"
                ,
                
                    "name": "无锡"
                ,
                
                    "name": "徐州"
                ,
                
                    "name": "常州"
                ,
                
                    "name": "连云港"
                ,
                
                    "name": "淮安"
                
            ]
        ,
        
            "name": "江苏",
            "children": [
                
                    "name": "南京"
                ,
                
                    "name": "无锡"
                ,
                
                    "name": "徐州"
                ,
                
                    "name": "常州"
                ,
                
                    "name": "连云港"
                ,
                
                    "name": "淮安"
                
            ]
        ,
        
            "name": "湖南",
            "children": [
                
                    "name": "长沙"
                ,
                
                    "name": "株洲"
                ,
                
                    "name": "湘潭"
                ,
                
                    "name": "衡阳"
                ,
                
                    "name": "邵阳"
                ,
                
                    "name": "岳阳"
                
            ]
        ,
        
            "name": "海南",
            "children": [
                
                    "name": "海口"
                ,
                
                    "name": "三亚"
                ,
                
                    "name": "三沙"
                
            ]
        ,
        
            "name": "陕西",
            "children": [
                
                    "name": "西安"
                ,
                
                    "name": "咸阳"
                ,
                
                    "name": "汉中"
                ,
                
                    "name": "安康"
                ,
                
                    "name": "榆林"
                ,
                
                    "name": "延安"
                
            ]
        ,
        
            "name": "甘肃",
            "children": [
                
                    "name": "兰州"
                ,
                
                    "name": "酒泉"
                ,
                
                    "name": "金昌"
                ,
                
                    "name": "天水"
                ,
                
                    "name": "嘉峪关"
                ,
                
                    "name": "武威"
                
            ]
        
    ]

这里使用 d3-hierarchy 工具将数据转为下面的效果

<script src="https://d3js.org/d3-hierarchy.v1.min.js"></script>

  data: name: \'中国\', children: [...],
  children: [
    
      data: name: \'江苏\', children: [...],
      value: 7,
      r: 186.00172579386546,
      x: 586.5048250548921,
      y: 748.2441892254667,
    
    ...
  ],
  value: 69,
  x: 800,
  y: 800,
  r: 800,

代码实现:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>如何用Canvas绘制层次关系图(2)</title>
    <style>
        canvas 
            width: 800px;
            height: 800px;
        
    </style>
</head>

<body>
    <canvas width="1600" height="1600"></canvas>
    <script src="https://d3js.org/d3-hierarchy.v1.min.js"></script>
    <script type="module">
        import dataSource from \'./data/map.js\';
        // 用 d3.hierarchy(data).sum(…).sort(…) 将省份数据按照包含城市的数量,从多到少排序
        const regions = d3.hierarchy(dataSource)
            .sum(d => 1)
            .sort((a, b) => b.value - a.value);

        // 通过 d3.pack() 将数据映射为一组 1600 宽高范围内的圆形,留3px的padding
        const pack = d3.pack()
            .size([1600, 1600])
            .padding(3);

        const root = pack(regions);

        console.log(root)

        const canvas = document.querySelector(\'canvas\');
        const context = canvas.getContext(\'2d\');

        function draw(ctx, node,  fillStyle = \'rgba(0, 0, 0, 0.2)\', textColor = \'white\'  = ) 
            const children = node.children;
            const  x, y, r  = node;
            ctx.fillStyle = fillStyle;
            ctx.beginPath();
            // arc 方法的五个参数分别是圆心的 x、y 坐标、半径 r、起始角度和结束角度
            ctx.arc(x, y, r, 0, 2 * Math.PI);
            ctx.fill();
            if (children) 
                // 遍历子节点绘制
                for (let i = 0; i < children.length; i++) 
                    draw(context, children[i]);
                
             else 
                // 绘制文本
                ctx.fillStyle = textColor;
                ctx.font = \'1.5rem Arial\';
                ctx.textAlign = \'center\';
                ctx.fillText(node.data.name, x, y);
            
        

        draw(context, root);
    </script>
</body>

</html>

Canvas 有哪些优缺点?

Canvas 在 HTML 层面上是一个独立的画布元素,所以所有的绘制内容都是在内部通过绘图指令来完成的,绘制出的图形对于浏览器来说,只是 Canvas 中的一个个像素点,很难直接抽取其中的图形对象进行操作。

推荐阅读

以上是关于图形基础篇02 # 指令式绘图系统:如何用Canvas绘制层次关系图?的主要内容,如果未能解决你的问题,请参考以下文章

跟月影学可视化学习笔记 41 篇(完结)

跟月影学可视化学习笔记 41 篇(完结)

跟月影学可视化学习笔记 41 篇(完结)

图形基础篇03 # 声明式图形系统:如何用SVG图形元素绘制可视化图表?

图形基础篇03 # 声明式图形系统:如何用SVG图形元素绘制可视化图表?

图形基础篇04 # GPU与渲染管线:如何用WebGL绘制最简单的几何图形?