draw

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

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

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

文件夹说明

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

主要内容说明：

实线箭头
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时可画直线

数据保存

draw: {text: Array, // 文本节点begin: Array, //开始节点circle: Array, //圆形节点lines: Array //线条信息
},

节点数据说明

Node: {id: Number, // 节点idname: 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

vue+nodejs+element 实现drawio绘图效果相关推荐

前端面试+学习笔记（HTML+CSS+JavaScript+ES6+Vue+NodeJs）
前端面试+学习笔记(HTML+CSS+JavaScript+ES6+Vue+NodeJs) 一. HTML 1. 盒子模型是什么:每个元素被表示为一个矩形的盒子,有四个部分组成:内容(content ...
【Vue】 element ui 引入第三方图标
最近一个项目用到 vue 和 element ui开发前端.使用element ui自带的icon太少,所以引入第三方的.截止目前为止国内外网络上的相关教程我搜索到没超过5篇,而且都不详细,即使全部阅 ...
vue使用element 上传图片，修改图片
vue使用element 上传图片,修改图片文章目录 vue使用element 上传图片,修改图片前言一.应用场景 1.上传图片并进行放大预览 2.图片上传代码二.修改已经上传的图片,并展示到 ...
Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
前言本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...
vue项目-element UI-NavMenu 导航菜单始终只展开一个
vue项目-element UI-NavMenu 导航菜单始终只展开一个全局搜索:unique-opened找到该配置将其改成true unique-opened:是否只保持一个子菜单的展开 < ...
渣渣枫初识Vue与Element
渣渣初学Vue与Element 一.Vue 1.初识Vue 2.Vue的入门 3.Vue入门升级 4.小结二.Vue常用指令 1.常用指令 2.文本插值 3.绑定属性 4.条件渲染 5.列表渲染 6 ...
JavaWeb前端框架VUE和Element组件详解
文章目录前言一.前端框架--VUE 1.1 概述 1.2 快速入门 1.3 Vue 指令 1.3.1 v-bind & v-model 指令 1.3.2 v-on 指令 1.3.3 条件判 ...
vue nodejs 构建_如何使用nodejs后端打字稿版本开发和构建vue js应用
vue nodejs 构建 There are so many ways we can build Vue.js apps and ship for production. One way is to ...
基于vue与element实现创建试卷相关功能
由于最近在一个项目中需要实现创建试卷与预览试卷的功能,所以就自己动手写了一个,效果还不错,目前项目已经交付使用,今天就先和大家分享一下创建试卷. 源码已上传至gitee仓库,地址https://git ...
Vue+nodejs家教信息服务网站源码介绍
随着计算机技术的飞速发展和网络时代的到来,我们已经进入了信息化的时代,有人也称之为数字化的时代.在这个数字化时代里,我们应该不断去适应并去利用这个优势,为我们的生活解决各式各样的需求.随着教育水平的不 ...

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

draw

文件夹说明

主要内容说明：

vue+nodejs+element 实现drawio绘图效果相关推荐

最新文章

热门文章