关键词:
本系列教程是用Vue.js + Nuxt.js + Element + Vuex + 开源js绘图库,打造一个属于自己的在线绘图软件,最终效果:topology.le5le.com 。如果你觉得好,欢迎给文章和开源库点赞,让我们更有动力去做好!
本系列教程源码地址:Github
一、创建项目框架
1. 使用Nuxt.js向导创建项目
yarn create nuxt-app topology-vue
// 注意在后面提示中,上移下移,按空格选中 Element
复制代码
选择Element后,在plugins文件夹下会自带添加Element的插件配置
完成后,在nuxt.config.js中配置head相关信息,主要有两个阿里字体文件: 左侧工具栏字体文件: //at.alicdn.com/t/font_1113798_0532l8oa6jqp.css
右侧属性字体图标: //at.alicdn.com/t/font_1331132_5lvbai88wkb.css
head:
title: ‘乐吾乐 Topology - 开源免费绘图工具‘,
meta: [
charset: ‘utf-8‘ ,
name: ‘viewport‘, content: ‘width=device-width, initial-scale=1‘ ,
hid: ‘description‘,
name: ‘description‘,
content:
‘一个基于typescript + canvas的好用开源绘图工具和绘图引擎。易集成到自己的前端项目、还可以方便自定义图形库,支持微服务架构图、流程图、时序图、活动图、类图等‘
],
link: [
rel: ‘icon‘, type: ‘image/x-icon‘, href: ‘/favicon.ico‘ ,
rel: ‘stylesheet‘,
href: ‘//at.alicdn.com/t/font_1113798_0532l8oa6jqp.css‘
,
rel: ‘stylesheet‘,
href: ‘//at.alicdn.com/t/font_1331132_5lvbai88wkb.css‘
]
,
复制代码
2. 添加SCSS支持
2.1 安装scss的依赖包
yarn add node-sass sass-loader -D
复制代码
2.2 给style标签加上lang="scss"标记
<style lang="scss">
.page
width: 100%;
height: 100%;
</style>
复制代码
3. 添加一个全局公用css
3.1 在asstes/css文件夹下新建一个base.scss公用全局样式文件
3.2 导入 在layouts/default.vue的script脚本中导入:
import ‘~/assets/css/base.scss‘
复制代码
二、网页布局
1. 顶部导航栏
修改layouts/default.vue为导航栏 + body两部分
其中: 为Nuxt.js框架中对应页面路由的视图部分。
2. 修改首页为左中右三栏
修改pages/index.vue为左中右三栏布局
三、创建画布
1. 下载topology依赖包
yarn add topology-core topology-class-diagram topology-activity-diagram topology-flow-diagram topology-sequence-diagram -D
复制代码
其中,topology-core为核心库引擎,其他的为图形库。具体参考:开发文档
2. 注册图形库
我们单独写个pages/canvas.server.js服务,用来提供topology相关服务
这里主要提供注册和左侧工具栏数据。
3. 加载图形库
3.1 准备canvas相关数据
data()
return
// 左侧工具栏
tools: Tools,
// 图形库
canvas: ,
// 图形库选项:https://www.yuque.com/alsmile/topology/canvas#hOupV
canvasOptions:
rotateCursor: ‘/img/rotate.cur‘
,
// 右侧属性栏数据
props:
node: null,
line: null,
multi: false
复制代码
3.2 注册图形库
created()
canvasRegister()
复制代码
3.3 在父节点已经渲染后,new创建画布
mounted()
this.canvasOptions.on = this.onMessage
this.canvas = new Topology(‘topology-canvas‘, this.canvasOptions)
复制代码
其中,onMessage 表示接受画布的消息回调函数
3.4 左侧工具栏支持鼠标拖放
<a
v-for="(btn, i) in item.children"
:key="i"
:title="btn.name"
:draggable="btn.data"
@dragstart="onDrag($event, btn)"
>
<i :class="`iconfont $btn.icon`"></i>
</a>
复制代码
methods:
onDrag(event, node)
event.dataTransfer.setData(‘Text‘, JSON.stringify(node.data))
复制代码
只需要给拖放数据设置节点格式的字符串即可(画布自带支持拖放接收处理),节点数据格式文档:www.yuque.com/alsmile/top…
3.5 右侧属性栏
- 3.5.1 自定义属性栏组件 在components下创建CanvasProps.vue
<template>
<div>
<!-- 选中为空 -->
<div v-if="!props.node && !props.line && !props.multi">
<div class="title">欢迎使用le5le-topology!</div>
<div class="group">
<a class="star" href="https://github.com/le5le-com/topology" target="_blank">喜欢,点击这里打个star吧</a>
<a href="https://www.yuque.com/alsmile/topology" target="_blank">使用教程</a>
<br />
<a
href="http://topology.le5le.com/assets/img/topology_wechat.jpg?t=1"
target="_blank"
>微信交流群(大群)</a>
<br />
<a href="http://topology.le5le.com/assets/img/topology_wechat2.jpg" target="_blank">微信交流群2</a>
<br />
<a href="https://www.yuque.com/alsmile/topology/faq#EVbCgt" target="_blank">联系我们</a>
</div>
<div class="title">[Todo] 未来规划</div>
<ul class="group">
<li>Github issues</li>
<li>React demo</li>
<li>Vue3 demo</li>
<li>系列教程</li>
</ul>
<div class="bottom">
<div class="title">小提示</div>
<ul class="group">
<li>方向键:控制节点移动5个像素</li>
<li>Ctrl + 方向键:控制节点移动1个像素</li>
<li>Ctrl + 鼠标移动:移动整个画布</li>
<li>Ctrl + 鼠标滚轮:缩放</li>
<li>添加或选中节点,右侧属性支持上传各种图片哦</li>
</ul>
</div>
</div>
<!-- 选中节点 -->
<div v-if="props.node">
<div class="title">位置和大小</div>
<div class="items">
<div class="flex grid">
<div>X(px)</div>
<div class="ml5">Y(px)</div>
</div>
<div class="flex grid">
<div>
<el-input-number
v-model="props.node.rect.x"
controls-position="right"
@change="onChange"
></el-input-number>
</div>
<div class="ml5">
<el-input-number
v-model="props.node.rect.y"
controls-position="right"
@change="onChange"
></el-input-number>
</div>
</div>
</div>
<div class="items">
<div class="flex grid">
<div>宽(px)</div>
<div class="ml5">高(px)</div>
</div>
<div class="flex grid">
<div>
<el-input-number
v-model="props.node.rect.width"
controls-position="right"
@change="onChange"
></el-input-number>
</div>
<div class="ml5">
<el-input-number
v-model="props.node.rect.height"
controls-position="right"
@change="onChange"
></el-input-number>
</div>
</div>
</div>
</div>
</div>
</template>
<script >
export default
data()
return
,
props:
props:
type: Object,
require: true
,
methods:
onChange(value)
this.$emit(‘change‘, this.props.node)
</script>
复制代码
其中,props.node、line、multi分别表示是否选中节点、连线、多个对象。 这里我们暂时没有用到vuex(后面教程介绍),直接使用原生的双向绑定更简单。用$emit通知父组件属性改变事件。
相关属性值,参数API文档:www.yuque.com/alsmile/top…
- 3.5.2 引用右侧属性组件
<div class="props">
<CanvasProps :props.sync="props" @change="onUpdateProps"></CanvasProps>
</div>
复制代码
同样,我们利用.sync关键字使用双向绑定,并接收chang事件,反馈给画布组件:
onUpdateProps(node)
// 如果是node属性改变,需要传入node,重新计算node相关属性值
// 如果是line属性改变,无需传参
this.canvas.updateProps(node)
复制代码
其他
自此,一个简单的绘图项目就完成了,后续功能完善待续。
但,但,但...右侧属性栏,希望大家根据开发文档去参与完善,展示自己舞台的机会到了,可加入贡献者名单哦!不清楚的,欢迎联系管理员:(微信)alsmile123,或加群:
如何贡献
通过GitHub的pr方式: 0. 阅读开发文档,了解相关属性。
- fork仓库到自己名下
- 本地修改并提交到自己的git仓库
- 在自己的fork仓库找到 “Pull request” 按钮,提交
开源项目不易,欢迎大家一起参与,给【文章、GitHub开源库】点星点赞,或资助服务器:
前后端分离项目实战从零构建后一个完整的后台项目之vue的学习(代码片段)
...渐进式框架是什么意思?2、为什么用vue而不是其他的前端框架?目前流行的前端框架:1)渐进式对比Angular:对比React:2)其他优势二)vue开发环境的搭建1、安装1)安装Node环境什么是node.js 查看详情
前后端分离项目实战从零构建后一个完整的后台项目之vue的学习(代码片段)
...渐进式框架是什么意思?2、为什么用vue而不是其他的前端框架?目前流行的前端框架:1)渐进式对比Angular:对比React:2)其他优势二)vue开发环境的搭建1、安装1)安装Node环境什么是node.js 查看详情
vue2.5开发去哪儿网app从零基础入门到实战项目
...的编写,在熟悉基础语法的基础上,扩展解析MVVM模式及前端组件化的概念及优势。2-1课程学习方法2-2helloworld2-3开发TodoList(v-model、v-for、v-on)2-4MVVM模式2-5前端组件化2-6使用组件改造 查看详情
java从零打造企业级电商项目实战-服务端
第1章课程介绍(导学,项目演示,课程安排,架构演进)本章详细介绍Java服务端课程的内容,项目演示(http://www.happymmall.com),然后还介绍下课程安排,最后会讲解一下高大上的架构是如何一步一步从一台服务器演变到高性能... 查看详情
vue2.5开发去哪儿网app从零基础入门到实战项目
...的编写,在熟悉基础语法的基础上,扩展解析MVVM模式及前端组件化的概念及优势。第3章Vue基础精讲本章通过精挑细选的案例,精讲Vue中的基础知识,包括实例、生命周期、指令、计算属性、方法、侦听器,表单等 查看详情
vue3.x从零开始——router+vuex+typescript实战演练(上)(代码片段)
...文章已经大致介绍了Vue3的常用API,现在综合起来做一个实战演练配合完整代码食用更香哦,项目地址:https://github.com/wisewrong/test-vue3-demo 一、初始化首先通过Vue-CLI创建一个Vue3项目,详细流程可以参考《Vue3.x从零开始(一)... 查看详情
vue2.5开发去哪儿网app从零基础入门到实战项目
...的编写,在熟悉基础语法的基础上,扩展解析MVVM模式及前端组件化的概念及优势。第3章Vue基础精讲本章通过精挑细选的案例,精讲Vue中的基础知识,包括实例、生命周期、指令、计算属性、方法、侦听器,表单等部分内容。第4... 查看详情
从零开始vue项目实战-项目结构
现在在浏览器中输入http://localhost:8083,可以看到初始的“WelcometoYourVue.jsApp”页面了目录结构├──README.md项目介绍├──index.html入口页面├──build构建脚本目录│├──build-server.js运行本地构建服务器,可以访问构建后的页... 查看详情
vue进阶(贰零陆):vue培训课件(代码片段)
一、前言为方便前端开发入门级童鞋掌握前端开发框架Vue,对其有一个大致认知,特梳理此PPT。本文主要从走近vue、项目实战、学习进阶三个层面带你认识前端开发框架Vue。二、正文三、拓展阅读《Vue专栏》更多内容详... 查看详情
15套前端经典实战项目大合集,小白练手必备实战项目
15套前端经典实战项目大合集,悄悄练习,你会惊艳所有人。今日我以内卷为荣,明日内卷以我为荣,不管学习哪门语言都要做出实际的东西来,这个实际的东西就是项目。这里整理了15前端经典实战项目,... 查看详情
三个小时vue3.x从零到实战(后)(vue3.x配套工具及项目化构建)(代码片段)
目录:三个小时vue3.x从零到实战(前)(vue3.x基础)三个小时vue3.x从零到实战(中)(vue3.x高级语法)三个小时vue3.x从零到实战(后)(vue3.x配套工具及项目化构建)三个小时vue3... 查看详情
从零开始vue项目实战-路由(代码片段)
一、理解路由传统的页面应用,是用一些超链接来实现页面切换和跳转的。而vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。路由中有三个基本的概念route,routes,router。 1,route... 查看详情
《androidapp开发进阶与项目实战》出版后记
...》刚写完,我马上着手编写它的姊妹篇《AndroidApp开发进阶与项目实战》,因为开发入门一书比较基础,还需要一本讲解高级开发与新技术的进阶书籍。App开发入门与App开发进阶两本图书同时也是对《AndroidStudio开发实... 查看详情
《androidapp开发进阶与项目实战》出版后记
...》刚写完,我马上着手编写它的姊妹篇《AndroidApp开发进阶与项目实战》,因为开发入门一书比较基础,还需要一本讲解高级开发与新技术的进阶书籍。App开发入门与App开发进阶两本图书同时也是对《AndroidStudio开发实... 查看详情
serverless从入门到进阶:架构原理与实践
Serverless从入门到进阶:架构、原理与实践腾讯云Serverless项目早期参与者撰写,基于腾讯云、阿里云和亚马逊云等多个云厂商的产品和技术;从产品和技术两个维度展开,讲解Serverless的架构设计、技术原理、开发流程、实战案例... 查看详情
vue-用vue-cli从零开始搭建一个vue项目(代码片段)
Vue是近两年来比较火的一个前端框架(渐进式框架吧)。 Vue两大核心思想:组件化和数据驱动。组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用;数据驱动是前端的未来发展方向,释放了对DOM... 查看详情
vue项目实战1
VUE项目实战1 --------------------------------------------------server.js当前目录要启两个服务一个前端的一个后端 1.启动后端服务nodeserver.js2.启动前端的服务npmrundev 10:22:00------------------------------------------- 查看详情
vue+springboot从零开发bbs项目---前端篇(一)
参考技术A这是一个前端使用vue,后台使用springboot开发的论坛项目,旨在熟悉前后的开发技术,随做随记,记录一些知识要点。HBuilderXnpm1.Vue渐进式JavaScript框架。2.ElementUI一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面... 查看详情