自定义节点

注册 -- registerNode

我们通过以下接口往 G6 全局注册节点:

// 注册节点
G6.registerNode(name, {
// 绘制
draw(item) {
  return keyShape
 },
// 获取锚点
anchor: array || object || callback
}, extendShape);

绘制 -- draw

draw 是图项最终绘制的接口,决定了一个图项最终画成什么样。它是 G6 中拓展图形的最小接口,例如:

const data = {
"nodes": [
{
"shape": "customNode",
"id": "node1",
"x": 50,
"y": 100
},
{
"shape": "customNode",
"id": "node2",
"x": 250,
"y": 100
}
],
}; G6.registerNode('customNode', {
draw(item){
const group = item.getGraphicGroup();
const model = item.getModel();
group.addShape('text', {
attrs: {
x: 0,
y: 0,
fill: '#333',
text: '我是一个自定义节点,\n有下面那个方形和我自己组成'
}
});
group.addShape('text', {
attrs: {
x: 0,
y: 0,
fill: '#333',
text: ' ('+model.x+', '+model.y+') \n 原点是组的图坐标',
textBaseline: 'top'
}
});
group.addShape('circle', {
attrs: {
x: 0,
y: 0,
r: 4,
fill: 'blue'
}
});
return group.addShape('rect', {
attrs: {
x: 0,
y: 0,
width: 100,
height: 100,
stroke: 'red'
}
});
}
}); const graph = new G6.Graph({
container: 'mountNode', // dom 容器 或 容器ID
width: 500,           // 画布宽
height: 500,             // 画布高
});
graph.read(data);

关键形

draw 方法返回的图形既是该图项的 keyShape -- 关键形。简单来说,keyShape 是该图项参与图形计算的关键图形。所有的击中、锚点、控制点,都是根据关键图形生成的,所以这个形(shape)非常关键。

锚点 -- anchor

锚点是用户设置可用于连接的点 ,是 Node 和 Group 特有的概念。本文档仅介绍一种简单的设置锚点的方式,详细介绍见锚点详解 。

G6.registerNode('customNode', {
anchor: [
[0.5, 1], // 底边中点
[0.5, 0] // 上边中点
],
}); 文档来源地址:https://www.yuque.com/antv/g6/custom-node

流程图GGEditor 之 自定义节点相关属性的更多相关文章

  1. 用mel编写自定义节点的属性编辑器界面

    用mel编写自定义节点的属性编辑器界面比较麻烦,而且网上例子又少,下面给出一个范例,说明基本的格式 // 初始化节点时调用 global proc initControl(string $attrNa ...

  2. 原生JS中DOM节点相关API合集

    节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Text或Comment节点的文本值,只 ...

  3. 原生JSdom节点相关(非原创)

    节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Text或Comment节点的文本值,只 ...

  4. Spring源码情操陶冶-自定义节点的解析

    本文承接前文Spring源码情操陶冶-DefaultBeanDefinitionDocumentReader#parseBeanDefinitions,特开辟出一块新地来啃啃这块有意思的骨头 自定义节 ...

  5. ASP.NET基础知识汇总之WebConfig自定义节点详细介绍

    之前介绍过Webconfig的具体知识ASP.NET基础知识汇总之WebConfig各节点介绍.今天准备封装一个ConfigHelper类,涉及到了自定义节点的东东,平时虽然一直用,但也没有系统的总结 ...

  6. vue第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件)

    第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件) #课程目标 掌握vue实例的相关属性和方法的含义和使用 了解vue的数据响应原理 熟悉创建组件,了解全局 ...

  7. Activity Intent Flags及Task相关属性

    转自http://www.cnblogs.com/lwbqqyumidi/p/3775479.html 今天我们来讲一下Activity的task相关内容. 上次我们讲到Activity的四种启动模式 ...

  8. FusionCharts中仪表盘相关属性

    上上周用FusionCharts做了几个报表,里面有个仪表盘,当时查属性查疯了,现在把相关的一些属性记下来,方便以后查找. -------------------------仪表盘重要属性解析---- ...

  9. Web.config自定义节点configSections

    1.为什么需要自定义节点 为了增加应用程序的可移植性,通常网站需要配置一些自定义的节点,例如:文件上传的路径等,再深入的应用,可以定义工厂方法需要创建的类. 2.configSections使用方法 ...

随机推荐

  1. 运行MapReduce任务

    1:运行MapReduce任务 1:原始数据准备 统计用户的登录次数: 源数据login_log.txt如下: 7whygb5m@linshiyouxiang.net nuahvuhuoia@qq.c ...

  2. linux笔记之解压

    从1.15版本开始tar就可以自动识别压缩的格式,故不需人为区分压缩格式就能正确解压: Linux下常见的压缩包格式有5种:zip tar.gz tar.bz2 tar.xz tar.Z 其中tar是 ...

  3. Comb结合android开发

    https://blog.csdn.net/qq_29665509/article/details/79272441 参考comb官方文档 https://blog.csdn.net/qq_29665 ...

  4. 2019牛客多校2 F Partition problem(dfs)

    题意: n<=28个人,分成人数相同的两组,给你2*n*2*n的矩阵,如果(i,j)在不同的组里,竞争力增加v[i][j],问你怎么分配竞争力最 4s 思路: 枚举C(28,14)的状态,更新答 ...

  5. 基于 HTML5 WebGL 的智慧楼宇三维可视化监控

    前言 可视化的智慧楼宇在 21 世纪是有急迫需求的,中国被世界称为"基建狂魔",全球高层建筑数量位居首位,所以对于楼宇的监控是必不可少.智慧楼宇可视化系统更多突出的是管理方面的功能 ...

  6. vs 中明明包含了头文件所在路径,但是却找不到头文件

    vs基本不会出错,那么出错的只能是自己了. 哎,又被自己给蠢死了. 你可能在上面两个地方添加好了include 目录,但是却依然编译失败,失败的提示是找不到头文件所在路径,这是为什么呢. 很简单,因为 ...

  7. spark sql 执行计划生成案例

    前言 一个SQL从词法解析.语法解析.逻辑执行计划.物理执行计划最终转换为可以执行的RDD,中间经历了很多的步骤和流程.其中词法分析和语法分析均有ANTLR4完成,可以进一步学习ANTLR4的相关知识 ...

  8. php 截取字符串长度 并 把超出规定长度的内容用...替代

    <?php header("content-type:text/html;charset=utf-8");#设置文件编码 error_reporting(E_ALL);#设置 ...

  9. 浮动和包含框的关系,伪元素after解决高度塌陷

    浮动会使元素尽量向左或向右移动,直到碰到包含框或另外一个浮动元素的盒子模型的边缘 包含框并不会改变里面浮动元素的宽高,浮动元素宽高不会限制在包含块以内 <!DOCTYPE html> &l ...

  10. div中元素水平居中的方法

    使用align属性 <div class="main" align="center">        <h1>MAIN</h1&g ...