vue+nodejs+element 实现drawio绘图效果

1 篇文章 0 订阅

draw

项目地址:github
个人博客:smilestation.info

类似drawio效果,本项目采用前后端分离模式开发

  • 前台采用 vue + element
  • 后端采用 nodejs
  • 数据库采用 MySQL

文件夹说明

  • server 后端文件夹
  • client 前端文件夹

主要内容说明:

  1. 实线箭头
    drawArrow (Object)
  • ctx: context对象
  • fromX: 开始点x坐标
    • 值类型number
  • fromY: 开始点y坐标
    • 值类型number
  • toX: 目标点x坐标
    • 值类型number
  • toY: 目标点y坐标
    • 值类型number
  • controlX: 控制点X坐标
    • 值类型number
  • controlY: 控制点Y坐标
    • 值类型number
  • theta 分叉角度
    • 值类型number,代表角度
  • headlen 箭头大小
    • 值类型number,代表箭头向旁边延伸长度
  • width 线条宽度(默认1px)
    • 值类型number
  • color 线条颜色(默认黑色)
    • 值类型string
  • type 线条类型(默认折线)
    • 值类型string,默认值为line

说明:当分叉角度与箭头大小均为0时可画直线

  1. 数据保存
draw: {
  text: Array, // 文本节点
  begin: Array, //开始节点
  circle: Array, //圆形节点
  lines: Array //线条信息
},
  • 节点数据说明
Node: {
  id: Number, // 节点id
  name: String, // 节点名称
  type: String, //节点类型
  icon: String, //节点图标
  width: Number, //节点宽度
  height: Number, //节点高度
  left: Number, //节点X坐标
  top: Number, //节点Y坐标
  style: Object //节点样式
}
  • 线条数据说明
line: {
  type: String, //线条类型
  beginNode: Node, //线条开始节点
  endNode: Node, //线条结束节点
  fromX: Number, //线条开始X坐标
  fromY: Number, //线条开始Y坐标
  toX: Number, //线条开始X坐标
  toY: Number, //线条开始Y坐标
  controlX: Number, //曲线控制点X坐标
  controlY: Number, //曲线控制点Y坐标
  theta: Number, //箭头分叉角度
  headlen: Number, //箭头延伸大小
  width: Number, //线条宽度
  color: String //线条颜色
}

Vue + element + nodejs

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值