AntV G6绘制流程图学习例子

下面代码可以直接贴到html文件中运行看效果. 代码说明 js中data是一个json变量,里面有两个关键对象"nodes.edges",分别来描述节点.节点间箭线. 更多"nodes.edges"信息见代码中说明部分. 最新版见官网Demo.G6-API. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src=&qu…

安装 npm install @antv/g6 --save 引用 import G6 from '@antv/g6' 自定义节点 /** * 方式一 */ G6.registerNode('rect-jsx', (cfg) =>` <group> <rect> <rect style={{ width: 160, height: 20, fill: ${cfg.color}, cursor: 'move', stroke: ${cfg.color} }} dragga…

antV G6流程图在Vue中的使用

最近我司项目中需要加入流程图制作功能,于是乎百度各种找可视化绘制拓扑图的轮子,大部分都是国外的,看文档太吃力,不过好在最终让我发现了AntV G6流程图图表库,最新版为2.0,不过编辑器在2.0版本还没有进行开源,所以只能退而求其次,使用了1.2.8版本.希望2.0版本的编辑器尽早开源,在交互方面1.2.8版本还是差了一些. 该组件并非开箱即食,需要根据自己的业务进行修改,右侧属性表单部分如果有时间考虑改为插槽形式,方便以后复用~ 如何将数据进行数据可视化展现? 技术栈 Vue v3.0.1 E…

记录使用echarts的graph类型绘制流程图全过程（二）- 多层关系和圆形图片的设置

本文主要记录在使用echarts的graph类型绘制流程图时候遇到的2个问题:对于圆形图片的剪切和多层关系的设置图片的设置如果用echarts默认的symbol参数来显示图片,会显示图片的原始状态,即圆形就显示圆形的,矩形就显示矩形的,而案例中的图片是矩形的(如上图所示).但是尼,我们在流程图的绘制过程中,一般用到的又是圆形,所以这时候就需要我们自己进行剪切了.主要运用cavans的clip功能,以下是具体的代码实现: let picList = []; let tempNodes = []…

React + umi +antd+antv/g6 实现力图

官方示例效果:http://antv.alipay.com/zh-cn/g6/2.x/demo/net/2017-link-data.html 改编效果: 实现步骤: 环境:nodejs.yarn/npm.umi(最新即可) 创建项目: 1.打开cmd 2.创建项目文件夹:输入mkdir ReactUmiG6App & cd ReactUmiG6App 回车 3.创建项目:yarn create umi 4.添加需要的依赖包:react .antd.@antv/g6 yarn add ant…

玩转控件:GDI+动态绘制流程图

前言今天,要跟大家一起分享是"GDI+动态生成流程图"的功能.别看名字高大上(也就那样儿--!),其实就是动态生成控件,然后GDI+绘制直线连接控件罢了.实际项目效果图如下: Talk is Cheap,Show me the Code 首先,人靠衣装马靠鞍!在绘制流程图之前,我们得有个高大上的背景来衬托,比如网格背景: 代码如下: /// <summary> /// 初始化网格 /// </summary> private void InitGridL…

vue结合antV/g6 实现网络拓扑图

最近很多业务场景都会需要用到拓扑图,翻找了很多资料,最后选择了antV/g6,主要原因有以下几点: 1.阿里出品,所以框架的成熟性有保障 2.业务场景契合(1.规则拓扑图:2.动画流向:每个节点会有流向动画) 3.更容易上手(个人愚见) 话不多说,先附上效果图,如下: 代码讲解如下: 代码量不多,我封装为一个小组件,页面数据也分离出去,很适合小白直接拿来使用,有不懂的可以一块讨论,虽然代码量不多,但是从开始撸到做出成果也花了不少时间,希望用得到的小伙伴不要吝啬,多多宣传,免费点亮一下star!谢…

javascript闭包学习例子

javascript中的闭包个很让人头疼的概念.总结一下闭包是指有权访问一个函数作用域中的变量的函数.创建闭包最常见的方式,是在一个函数内部创建另一个函数,用return返回出去. 使用闭包可能造成内存占用不足,尽量少使用. 先看几个例子: function foo(){ var a = 2; function bar(){ console.log(a); } return bar; } var baz = foo(); baz(); // 2 bar函数就是一个闭包.调用foo()函数时,得…

or1200下Raw-OS学习(例子篇)

没有图我说个~毛(J)线(B)~对吧??? 直接上一个以前做过的项目来说说怎么去从一个前后台的程序过度到利用操作系统去管理的你代码吧~以前想过直接用事件驱动的框架去编写代码的,无奈这方面的资料实在太少~而且我的水平也不足以胜任,既然现在在全力支持Raw-OS,那么就用RTOS的框架去描述这个工程lor,好了,直接上图了,没有图我说个~毛(J)线(B),一个ICT的例子,先给框图再说功能吧,也希望初学者能和小弟我一起讨论讨论,仅限于初学者哈~大牛不小心路过就不要吐槽小弟了~ 这是一个简易ICT的模…

python学习2：turtle的使用蟒蛇绘制的学习以及自己摸索的等边三角形绘制（跟随mooc学习）

首先先放上蟒蛇的绘制程序 import turtle#引入外部库#def保留字用于定义函数 def drawSnake(rad,angle,len,neckrad): for i in range(len): turtle.circle(rad,angle) #画圆,rad圆形轨迹半径的位置 #angle表示小乌龟沿着圆形爬行的弧度 turtle.circle(-rad,angle) turtle.pencolor("red") turtle.pencolor("blue&…

vuex的学习例子

最近在学习vuejs,一直有听说vuex,用来实现多组件共享的一种状态管理模式,但是网上都说,不要为了用vuex而用vuex,大概意思就是尽量少用vuex,一些小项目可以用bus来实现组件之间的传值问题.虽然说不用vuex,但至少要知道这是个什么东西吧?还要学会怎么用.趁现在有点时间,弥补自己的不足.一些概念性的东西,还是看官方文档吧.Vuex2.0. 我们先来看看官网的一张关于Vuex的图 Vuex规定,属于应用层级的状态只能通过Mutation中的方法来修改,而派发mutation中的事件只…

使用SVG绘制流程图

本篇主要记录流程图的实现过程中的难点和核心技术点,先上效果图: 节点可以任意拖拽,曲线跟随变化正在连接的线 1.节点实现流程图是基于SVG绘制的,节点主要利用 g 和 foreignObject的特性来实现: <g class="pane-node"> <foreignObject width="180" height="50"> <body xmlns="http://www.w3.org/1999/…

Spring AOP 学习例子

http://outofmemory.cn/code-snippet/3762/Spring-AOP-learn-example 工作忙,时间紧,不过事情再多,学习是必须的.记得以前的部门老大说过:“开发人员不可能一天到晚只有工作,肯定是需要自我学习.第一:为了更充实自己,保持进步状态.第二:为了提升技术,提高开发能力.第三:保持程序员对技术和学习的热情,工作的激情.程序员还是需要把基础打扎实,修炼自己的内功.” 所以赶紧把学习的东西总结一下,加深印象.之前有说了下AOP的原理 (htt…

记录使用echarts的graph类型绘制流程图全过程（一）-x，y位置的计算

先说下本次案例业务需求,输入2个节点,获取数据后绘制出2个节点间的路径,之前使用的是网状图,但是网状图的效果不佳,需要转换成流程图的模式: 那么如何在不修改数据的情况下,实现类似效果尼? 看了下echarts的graph类型,可以实现类似的,下面是官方的实例从实例中可以看出,难点在于节点的显示位置x,y和曲线的设置.业务数据中: 1.节点的数量不定,关系的数量不定, 2.后台返回的数据只有单独的节点信息和关系信息实现思路: 1.分析数据,获取前后节点关系,获得行数位置(节点的xIndex信息…

canvas绘制流程图

最近在做一个需求,根据数据动态生成以下类似的流程图,需要可以设置每个节点的颜色,每个节点可添加点击移动等相关的事件代码中有做很多的注释和说明,相关的文档说明链接:https://9eb75i.axshare.com drawFlowChart.js //画流程图 //画所有的图形:画图和画对应的箭头 function drawFlowChart(context,canvas,flowdata,initTop, initSpaceH){ //1.判断是否有需要平均计算x的数据 flowdata.…

Graphviz 绘制流程图

凝视说明非常具体.不再详述. digraph G{ //dot 是一种画图语言,它能够方便你採用图形的方式高速.直观地表达一些想法, //比方描写叙述某个问题的解决方式,构思一个程序的流程,澄清一堆貌似散乱无章的事物之间的联系--等等. //总之,当你打算使用铅笔在纸上乱画一些圈圈框框并用一些带箭头的线将它们联系起来的时候. //最好还是考虑一下使用 dot 来完毕这个工作. //digraph 是 dot 用于定义有向图的命令,在这里它定义了一幅名为 G 的有向图, //花括号里所包括的内容即…

Eureka学习例子

Eureka学习 Spring Cloud下有很多工程: Spring Cloud Config:依靠git仓库实现的中心化配置管理.配置资源可以映射到Spring的不同开发环境中,但是也可以使用在非Spring应用中. Spring Cloud Netflix:不同的Netflix OSS组件的集合:Eureka.Hystrix.Zuul.Archaius等. Spring Cloud Bus:事件总线,利用分布式消息将多个服务连接起来.非常适合在集群中传播状态的改变事件(例如:配置变更事件)…

antv g6

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>首页</title> <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}</style></head>&…

Activit工作流学习例子

看了网上一些文章,动手操作了一遍,终于学会了Activit的一些常规使用. 一.Eclipse中的Activiti插件安装 Activiti有一个Eclipse插件,Activiti Eclipse Designer,可用于图形化建模.测试.部署 BPMN 2.0的流程.这样就不用我们自己去编写繁琐的流程文件了.具体安装方法见手册.打开 Help-> Install New Software.在如下面板中 , 点击 Add 按钮, 然后填入下列字段:Name: Activiti BPMN 2.…

QT3D场景快速绘制入门学习

在QT中实现3D绘制的方式: 1) 使用QT OpenGL模块(QOpenGLWidget等) 2) 使用QT 3D C++类(QEntity等) 3) 使用QT 3D QML类(Entity等) QT3D场景提供了一种快速设置3D场景的一种方式,用户凭借着封装好的实体可以快速的在顶层实体(画布)当中增加各种各样的实体,并且通过3DMax软件构造的OBJ文件与QT3D实现信息交互可以的帮助用户摆脱OpenGL的用代码绘制图形的繁琐. 下面以QT Demo “Basic Shapes…

JointJS绘制流程图

摘要: JointJS是一个javascript图表库.你可以使用它制作静态或者动态的图表.关系表.流程图. 效果图:…

NGUI UIPanel绘制原理学习

NGUI底层绘制都是调用UIDrawCall来完成的,它会动态实例化出材质球,改变UV偏移和缩放(图集显示).并且全部是面片 UIPanel也是面片,但是内部物体遮罩比较特殊,经过查找发现,影响UIPanel内部物体遮罩的是它的shader. ===================================== 查找过程: 1.首先是在UIPanel中找到mClipRange,然后在Fill中找到似乎和UIDrawCall有关. void Fill (Material mat) { //…

基于GOJS绘制流程图

基于GOJS封装的流程图设计(展示)工具类,主要分为两个工具类: 工具库依赖于go.js.jquery以及layer.js http://gojs.net/ http://jquery.com/ http://layer.layui.com/ 在线demo 点击这里流程设计器操作指南: 在任意位置双击设计器空白处:新建步骤: 选中步骤,单击右键:弹出右键菜单: 鼠标滑过步骤,显示连接点,拖动连接点即可创建新的连接线: 鼠标滑过步骤:显示tooltip. ##流程图数据 { "class&qu…

java Web 请求servlet绘制验证码简单例子

主要用来了解java代码怎么绘制验证码图片,实际开发中不会这样用 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //生成画布 int width = 120; int height = 40; BufferedImage bi = new BufferedImage(width, height, Buffer…

Java多线程学习——例子：模拟电影院抢座位

Cinema——List<Integer>数据结构存储电影院座位 public class Cinema{ private List<Integer> seats; //剩余座位 public Cinema(List<Integer> seats) { this.seats = seats; } public boolean seatGrabbing(List<Integer> needTickets){ if(needTickets.size()>s…

lambda表达式学习例子

https://www.cnblogs.com/franson-2016/p/5593080.html https://www.cnblogs.com/fx-blog/p/11745205.html 实例表达式说明将仓库数据,以id为key,仓库数据为value Map<Long, WareHouseDTO> warehouseMap = warehouseAllList.stream().collect(Collectors.toMap(WareHouseDTO::getId, t…

lua学习例子

extern "C"{ #include <lua.h> #include <lauxlib.h> #include <lualib.h> } #include <stdarg.h> #include <stdio.h> #include <stdlib.h> #pragma comment(lib,"lua.lib") void error(lua_State* L, const char*…

asp.net正则表达式学习例子

asp.net 获取网页Document时常会用到 edited by:曹永思-博客园 1.获取某个class的div内的标签获取<div class="imgList2">****</div>内的标签方法一: string g = " <div.*?class=\"imgList2\">(?<html>[\\s\\S]*?)</div>"; Regex reg = new Rege…

springMVC+ibatis数据持久化入门级学习例子

1.web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http:…

android SurfaceView绘制重新学习--控制动画移动

直接上demo,图是自己切的,将就用吧.点击左右两边分别向左右移动. public class MySurfaceView extends SurfaceView implements Callback, Runnable { private Thread th; private SurfaceHolder sfh; private int SH, SW; private Canvas canvas; private Paint p; private Paint p2; private Reso…