cancas绘制思维导图

最新推荐文章于 2024-11-19 14:27:19 发布
最新推荐文章于 2024-11-19 14:27:19 发布
阅读量2.1k 收藏 8
点赞数 1
分类专栏： canvas 文章标签： javascript 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42630688/article/details/120995019
版权
这段代码展示了如何使用HTML5 Canvas元素创建一个复杂的流程图，包括产品信息和责任分配。流程图根据提供的数据动态调整大小，每个部分如产品名称、保障期限、保费等都精确绘制，并通过线条连接。此外，代码还提供了将绘制的图像转换为Base64 URL的功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!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>Document</title>
  <style>
    * {
      margin: 0;

    }
    #canvas {
      border: 1px solid #000;
      margin: 50px;
    }
  </style>
</head>

<body>
  <canvas id="canvas"></canvas>
  <img src="" alt="" id="img">
  <script>

    let canvas = document.querySelector('canvas')
    let ctx = canvas.getContext('2d')

    class Xmind {
      constructor(option) {
        this.canvas = document.querySelector(option.id)
        this.ctx = this.canvas.getContext('2d')
        this.data = option.data
        this.lineGutter = option.lineGutter || 5  //行间距
        this.blockGutter = option.blockGutter || 50 // 块间距
        this.type="liab"
        this.b1Width = 200
        this.b2Width = 200
        this.b3Width = 300
        this.liabPadding = 10
        this.len = 40 //连接线长度
        this.lineWidth = 1.5
        this.left = 30
        this.right = 30
        this.top = 60
        this.bottom = 60
        this.red = '#f33'
        this.fontSize = option.fontSize || 14
        this.bgColors = ['#fae3d9','#bbded6','#d4edf4']
        this.fontColors = ['#8ac6d1']
        this.lineColor = option.lineColor || '#dedede'
        this.init()
      }
      init() {
        this.setCanvasWidth()
        this.setCanvasHeight()
        this.setBackground()
        this.darwLiab()
        let height = this.drawProduct()
        this.drawProduct(height)

      }
      setCanvasHeight() {
        let height = this.darwLiab(false)
        this.canvas.height = height
      }
      setCanvasWidth() {
        let width = this.b1Width + this.b2Width + this.b3Width + this.len * 4 + this.lineWidth * 2 + this.left + this.right
        this.canvas.width = width
      }
      setBackground() {
        this.ctx.beginPath()
        this.ctx.fillStyle = "#fff"
        this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height)
      }
      darwLiab(isDraw = true) {
        let height = this.top
        let liabs = this.data.dutyData
        let x = this.left + this.b1Width + this.b2Width + this.lineWidth * 2 + this.len * 4
        this.ctx.save()
        let dutyHeight = []
        liabs.forEach((item, index) => {
          this.ctx.save()
          let itemHeight = 0
          let totalHeight = 0
          item.liabsList.forEach((liab, liabINdex) => {
            this.ctx.save()
            let movex = this.left + this.b1Width + this.b2Width + this.lineWidth * 2 + this.len * 4
            this.ctx.translate(movex, height)
            let proNameHeight = this.drawText(liab.proName, 0, 0, this.b3Width, isDraw, item)
            height += proNameHeight + this.lineGutter
            let liabHeight = this.drawText(liab.productLiabNameFormula, 0, proNameHeight + this.lineGutter, this.b3Width, isDraw, item) +10
            height += liabHeight + this.lineGutter
            // 责任左边线
            this.drawXLine(0, (proNameHeight + liabHeight + this.lineGutter) / 2)
            this.ctx.save()
            //移动坐标原点 准备画竖线
            this.ctx.translate(-this.len, (proNameHeight + liabHeight + this.lineGutter) / 2)

            if (liabINdex == 0 || liabINdex == item.liabsList.length - 1) {
              itemHeight += (proNameHeight + liabHeight + this.lineGutter * 2) / 2
            } else {
              itemHeight += proNameHeight + liabHeight + this.lineGutter * 2
            }
            totalHeight += liabHeight + this.lineGutter * 2 + proNameHeight
            if (liabINdex == item.liabsList.length - 1) {
              dutyHeight.push(totalHeight)
            }
            if (item.liabsList.length > 1 && liabINdex == item.liabsList.length - 1) {
              this.drwaYLine(0, -itemHeight, 0, 0)
            }
            this.ctx.restore()
            this.ctx.restore()
          })
          this.ctx.restore()
          this.ctx.save()
          height += this.blockGutter
          let liabX = this.left + this.b1Width + this.lineWidth + this.len * 2
          this.ctx.translate(liabX, this.getPos(dutyHeight, index))
          this.drawXLine(0, 0)
          this.drawXLine(this.b2Width + this.len, 0)
          let dutyNameHeight = this.drawDutyName(item)
          if (index >0) {
            this.drwaYLine(-this.len, -this.calcHeight(dutyHeight,index), -this.len, 0)

          }
          this.ctx.restore()
        })
        this.ctx.restore()
        return height
      }
      calcHeight(arr,index) {
        return (arr[index]+arr[index-1])/2 + this.blockGutter
      }
      drawProduct(height) {
        this.ctx.save()
        if(height) {
          this.ctx.translate(this.left, this.canvas.height / 2 -height/2)

        }
        let productList = this.data.productList
        let arr = []
        let y = 0
        productList.forEach((item, index) => {
          this.ctx.save()
          let product = item.product
          let h1 = this.drawText(product.productName, 0, 0, this.b1Width, false)
          let h2 = this.drawText('保额：' + product.amount, 0, 0, this.b1Width, false)
          let h3 = this.drawText('交费期间：' + product.payPeriod, 0, 0, this.b1Width, false)
          let h4 = this.drawText('保障期间：' + product.coverage, 0, 0, this.b1Width, false)
          let h5 = this.drawText('保费：' + product.premInitial, 0, 0, this.b1Width, false)
          let rectHeight = h1 + h2 + h3 + h4 + h5 + this.lineGutter * 4 + 15 +10
          arr.push(rectHeight)
          if(height) {
            y += rectHeight + this.blockGutter
            this.ctx.translate(0, index==0?0:y)
            ctx.fillStyle = this.bgColors[index%3]
            ctx.fillRect(0, 0, this.b1Width, rectHeight)
            this.drawText(product.productName, 10, 0, this.b1Width)
            this.drawText('保       额：' + product.amount, 10, h1 + this.lineGutter+10, this.b1Width)
            this.drawText('交费期间：' + product.payPeriod, 10, h1+h2 + this.lineGutter*2+10, this.b1Width)
            this.drawText('保障期间：' + product.coverage, 10, h1 + h2+h3 + this.lineGutter * 3+10, this.b1Width)
            this.drawText('保       费：' + product.premInitial, 10, h1 + h2 + h3 + h4+ this.lineGutter * 4+10, this.b1Width)

          }

          this.ctx.restore()
        })
        if(height) {
          this.drawXLine(this.b1Width + this.len, height/2)
          this.ctx.restore()

        }
        return this.getSum(arr)
      }
      getSum(arr) {
        let sum = 0
        arr.forEach(item => {
          sum += item
        })
        return sum + (arr.length - 1) * this.blockGutter
      }
      drawDutyName(duty) {
        this.ctx.save()
        let height = this.drawText(duty.liabName + duty.amount + '元', 0, 0, this.b2Width-40, false)
        this.ctx.translate(0, -(height + 20) / 2)
        this.ctx.fillStyle = this.bgColors[0]
        this.ctx.fillRect(0, 0, this.b1Width, height + 20)
        this.drawText(duty.liabName + duty.amount + '元', 10, 5, this.b2Width-40)
        this.ctx.restore()
        return height
      }
      getPos(arr, index) {
        let sum = 0
        arr.forEach((item, i) => {
          if (i == arr.length - 1) {
            sum += item / 2 + this.top
          } else {
            sum += item
          }
        })
        sum += this.blockGutter * (arr.length - 1)
        return sum - 2
      }
      sum(arr, index) {
        return arr.reduce((total, num, idx) => {
          return total + num + this.blockGutter * idx
        }, 0)
      }
      drawXLine(x, y) {
        this.ctx.beginPath()
        this.ctx.lineWidth = this.lineWidth
        this.ctx.strokeStyle = this.lineColor
        this.ctx.moveTo(x, y)
        this.ctx.lineTo(x - this.len - 1, y)
        this.ctx.stroke()
      }
      drwaYLine(x, y, x1, y1) {
        this.ctx.beginPath()
        this.ctx.lineWidth = this.lineWidth
        this.ctx.strokeStyle = this.lineColor
        this.ctx.moveTo(x, y)
        this.ctx.lineTo(x1, y1)
        this.ctx.stroke()
      }
      drawText(text, x, y, w, isDraw = true, item) {
        this.ctx.beginPath()
        var chr = text.split("");
        var temp = "";
        var row = [];
        this.ctx.font = `${this.fontSize}px Arial`;
        this.ctx.fillStyle = "black";
        this.ctx.textBaseline = "middle";
        for (var a = 0; a < chr.length; a++) {
          if (this.ctx.measureText(temp).width < w) {
          }
          else {
            row.push(temp);
            temp = "";
          }
          temp += chr[a];
        }

        row.push(temp);
        if (isDraw) {
          for (var b = 0; b < row.length; b++) {
            this.ctx.fillText(row[b], x, y + (b + 1) * this.fontSize);
          }

        }
        return (row.length - 1) * this.lineGutter + row.length * this.fontSize
      }
      getBase64Url() {
        return this.canvas.toDataURL('image/png')
      }
    }

    let data = {
      "productList": [
        {
           "product": {
            "coverage": "终身",
            "amount": "50万元",
            "payPeriod": "18年交",
            "premInitial": "8380元",
            "productName": "童佳保（尊享版）",
          }
        },
        
      ],
      "dutyData": [
        {
          "liabName": "重疾保险金",
          "amount": 2175000,
          "liabsList": [
            {
              "productLiabNameFormula": "100种重疾每次给付50万元，6次为限，分6组，理赔间隔期180天",
             
              "proName": "童佳保（尊享版）",
            
            },
            {
              "productLiabNameFormula": "110种重疾依次给付50万元/60万元/70万元/80万元/90万元/100万元，6次为限，分6组，理赔间隔期180天",
              "proName": "百万守护（典藏版）重疾",
             
            },
            {
              "productLiabNameFormula": "100种重疾每次给付50万元，分5组，5次为限，理赔间隔期180天",
              "proName": "童佳倍（2020版）",
              
            },
            {
              "productLiabNameFormula": "29周岁前确诊重疾额外给付175000元",
              "proName": "童佳倍（2020版）",
             
            }
          ],
          "sort": "6"
        },
        {
          "liabName": "重疾保险金",
          "amount": 2175000,
          "liabsList": [
            {
              "productLiabNameFormula": "100种重疾每次给付50万元，6次为限，分6组，理赔间隔期180天",

              "proName": "童佳保（尊享版）",

            },
            {
              "productLiabNameFormula": "110种重疾依次给付50万元/60万元/70万元/80万元/90万元/100万元，6次为限，分6组，理赔间隔期180天",
              "proName": "百万守护（典藏版）重疾",

            },
            {
              "productLiabNameFormula": "100种重疾每次给付50万元，分5组，5次为限，理赔间隔期180天",
              "proName": "童佳倍（2020版）",

            },
            {
              "productLiabNameFormula": "29周岁前确诊重疾额外给付175000元",
              "proName": "童佳倍（2020版）",

            }
          ],
          "sort": "6"
        },
        {
          "liabName": "重疾保险金",
          "amount": 2175000,
          "liabsList": [
            {
              "productLiabNameFormula": "100种重疾每次给付50万元，6次为限，分6组，理赔间隔期180天",

              "proName": "童佳保（尊享版）",

            },
            {
              "productLiabNameFormula": "110种重疾依次给付50万元/60万元/70万元/80万元/90万元/100万元，6次为限，分6组，理赔间隔期180天",
              "proName": "百万守护（典藏版）重疾",

            },
            {
              "productLiabNameFormula": "100种重疾每次给付50万元，分5组，5次为限，理赔间隔期180天",
              "proName": "童佳倍（2020版）",

            },
            {
              "productLiabNameFormula": "29周岁前确诊重疾额外给付175000元",
              "proName": "童佳倍（2020版）",

            }
          ],
          "sort": "6"
        },
        {
          "liabName": "重疾保险金",
          "amount": 2175000,
          "liabsList": [
            {
              "productLiabNameFormula": "100种重疾每次给付50万元，6次为限，分6组，理赔间隔期180天",

              "proName": "童佳保（尊享版）",

            },
            {
              "productLiabNameFormula": "110种重疾依次给付50万元/60万元/70万元/80万元/90万元/100万元，6次为限，分6组，理赔间隔期180天",
              "proName": "百万守护（典藏版）重疾",

            },
            {
              "productLiabNameFormula": "100种重疾每次给付50万元，分5组，5次为限，理赔间隔期180天",
              "proName": "童佳倍（2020版）",

            },
            {
              "productLiabNameFormula": "29周岁前确诊重疾额外给付175000元",
              "proName": "童佳倍（2020版）",

            }
          ],
          "sort": "6"
        },
        {
          "liabName": "重疾保险金",
          "amount": 2175000,
          "liabsList": [
            {
              "productLiabNameFormula": "100种重疾每次给付50万元，6次为限，分6组，理赔间隔期180天",

              "proName": "童佳保（尊享版）",

            },
            {
              "productLiabNameFormula": "110种重疾依次给付50万元/60万元/70万元/80万元/90万元/100万元，6次为限，分6组，理赔间隔期180天",
              "proName": "百万守护（典藏版）重疾",

            },
            {
              "productLiabNameFormula": "100种重疾每次给付50万元，分5组，5次为限，理赔间隔期180天",
              "proName": "童佳倍（2020版）",

            },
            {
              "productLiabNameFormula": "29周岁前确诊重疾额外给付175000元",
              "proName": "童佳倍（2020版）",

            }
          ],
          "sort": "6"
        },
        

      ],
    }

    let xmind = new Xmind({ id: '#canvas', data: data })
    let img = document.querySelector('#img')
    img.src = xmind.getBase64Url()
  </script>
</body>

</html>

效果：
在这里插入图片描述

python如何绘制思维导图
zhangzhechun的专栏
10-25 2507
在这个示例中，我们创建了一个有向图G，并添加了三个节点（“主题”、“子主题1”、“子主题2”）和两条边（从"主题"到"子主题1"，从"主题"到"子主题2"）。然后，我们使用spring_layout()方法设置节点的位置，并使用draw()函数绘制图形。执行上述代码后，将显示一个窗口，其中包含绘制好的思维导图。节点之间的关系以箭头表示，节点的标签显示在图形中。请注意，networkx库提供了丰富的功能和选项，您可以通过查阅其文档来了解更多关于绘制思维导图的方法和设置。
canvas.xmind 脑图
06-26
此文档是本人canvas动画基础知识学习笔记脑图，需要用xmind脑图工具打开
canvas应用-思维导图
weixin_34306676的博客
05-25 613
canvas应用例子-思维导图效果图如下：函数说明： // 求圆上一点坐标，返回坐标点 function circlePoint(x, y, r, a) { var tmpx = x + r * Math.cos(a * Math.PI / 180); var tmpy = y + r * Math.sin(a * Math.PI / 180); return...
Canvas.arcTo() 的使用，画一条带圆角的线段，画一个思维导图一基础
学习笔记
07-10 1712
这个方法还是比较难理解的。因为它不是直观的绘制路径，而是间接的。它的参数是这样的。它是由两个点和一个圆角半径来确定一条弧线。这么说你肯定是不能明白的，看下面例子。
使用canvas画一个思维导图
最新发布
youhebuke225的博客
11-19 1197
以下是一个使用HTML5 Canvas绘制简单思维导图示例的代码，这个思维导图仅包含了几个节点以及简单的连线来展示基本的结构，你可以根据实际需求进一步扩展和完善它。</</</// 获取canvas元素和绘图上下文const;// 节点类classNodexytextthis;this;this;this20;// 节点的半径，可调整大小drawbeginPath;
思维导图（自己整理，希望对大家有用）：JavaScript函数+canvas绘图+Array数组
asfs28140的博客
05-03 265
1.javascript函数： 2.Array数组： 3.canvas绘图： 转载于:https://www.cnblogs.com/dufemeng/p/4474131.html
echars自定义绘制思维导图
10-10
在本文中，我们将深入探讨如何使用ECharts这个强大的JavaScript数据可视化库来自定义绘制思维导图。ECharts是由百度开发的一个开源项目，它提供了丰富的图表类型，强大的交互功能，以及良好的性能，使得开发者能够...
思维导图怎么画？绘制思维导图最佳工具是什么.pdf
11-16
开始绘制思维导图前，首先要打开迅捷画图网站，点击页面上方的【思维导图】按钮，从而跳转至在线绘制界面。之后点击【立即体验】，即可进入绘制阶段。 2. 确立中心主题。在页面的中央区域，用户需要确立思维导图的...
ppt思维导图插件SimpleMindWay
08-16
标题中的“ppt思维导图插件SimpleMindWay”指的是在PowerPoint演示文稿中使用的辅助工具，用于创建和编辑思维导图。这类插件通常能够帮助用户以视觉化的方式组织和展示想法，提高工作效率和创意表达。SimpleMindWay...
基于html5_canvas 实现的简单思维导图制作工具 支持自由放置节点和自由关联节点.zip
02-13
在JsMind项目中，Canvas被用作绘制思维导图的基础。开发者可以使用Canvas的API方法如`fillRect`, `strokeRect`, `beginPath`, `moveTo`, `lineTo`等来创建线条、形状和文本，构建出思维导图的各个节点和连接线。 ...
xmind_canvas_draw:使用html5的canvas绘制xmind
05-09
##用js解析xmind，用canvas绘制出来 1.解压.xmind后缀的文件，本质上是个zip的压缩包，得到content.xml 2.在xmind的程序中找到markers的资源包，xmind似乎是个eclipse定制的程序 3.firefox打开xmind.html xmind demo 预览 canvas demo 预览
canvas.xmind
08-18
新的HTML标准HTML5中Canvas 元素用于在网页上绘制图形，该元素标签 强大之处在于可以直接在HTML上进行图形操作，具有极大的应用价值。 HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法，可以创建丰富的图形引用。
HTML5 canvas绘制流程图
01-18
HTML5 canvas绘制流程图，无需flash，支持形状伸缩、编辑文字、拖拽、节点连线功能，类似visio。
前端-JS思维导图
weixin_30791095的博客
01-12 309
看不清的朋友右键保存或者新窗口打开哦！喜欢我可以关注我，还有更多前端思维导图笔记 转载于:https://www.cnblogs.com/buildweb/p/8277138.html
vscode怎么画puml_vscode思维导图扩展更新，支持画流程图
weixin_39632379的博客
11-21 1123
效果展示本文要实现的插件是： 给思维导图添加拓扑图编辑的功能，最终实现的效果：点击ContextMenu下的Edit Topology Diagram 菜单项，打开拓扑图编辑界面该拓扑图会作为该topic的一个附件。Online App: https://awehook.github.io/react-mindmap/vscode extention: https://marketplace.vi...
HTML5 cancas
限定小码农的博客
08-25 366
canvas：画布 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas{ border: 1px red solid; } </style> </head> <bo
cancas绘制折线图
weixin_33950035的博客
11-28 144
知识点回顾： 知识点1： measureText() 方法返回包含一个对象，该对象包含以像素计的指定字体宽度。 提示：如果您需要在文本向画布输出之前，就了解文本的宽度，那么请使用该方法。 JavaScript 语法：context.measureText(text).width; text是要测量的文本； 知识点2：   illText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。   ...
【无限思维画布】制作思维导图第三步，节点移动与编辑
sinat_27171121的博客
02-26 792
正在为无限词典制作单词思维导图功能，实现无限单词导图、无限思维画布。目前制作到第三步 —— 节点移动与编辑。
canvas图片绘制
weixin_42292748的博客
11-30 708
H5的img标签可以在手机端自动保存，但是我需求是这样子的，一张图片上有优惠码，可以点击复制，有合成的照片，长按要整体保存。所以就用了canvas图片合成的功能。 绘制之前，我们先了解下canvas的绘制图片方法。 HTML5中引入新的元素canvas，其drawImage 方法允许在 canvas 中插入其他图像( img 和 canvas 元素) 。drawImage函数有三种函数原型： dr...
markdown绘制思维导图
08-12
要在Markdown中绘制思维导图，可以使用一些工具和语法来实现。以下是一种常用的方法： 1. 使用特定的Markdown扩展：有一些扩展可以帮助你在Markdown中创建思维导图，比如使用Mermaid或PlantUML。这些扩展提供了专门的语法来绘制各种类型的图表，包括思维导图。 2. 使用Markdown表格：你也可以使用Markdown表格来绘制简单的思维导图。可以使用表格的行和列来表示思维导图中的主题和关系。 下面是一个使用Markdown表格绘制思维导图的示例： ``` | 核心主题 | 分支主题 | |---------|---------| | 核心 | 分支1 | | 核心 | 分支2 | | 分支1 | 子分支 | ``` 这个示例中，第一列是核心主题，第二列是分支主题。通过添加新的行和调整缩进，可以构建更复杂的思维导图结构。 请注意，Markdown本身并没有原生支持绘制思维导图的功能，所以使用Markdown表格绘制思维导图可能会有一定的局限性。如果需要更复杂的思维导图，建议使用专门的工具或库来创建和绘制思维导图。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值