最新消息:

使用Axure制作可拖拽知识图谱/关系图谱

Axure高级教程 Jorkin 1109浏览

前言

知识图谱是一种基于语义网络的知识表示方法,它通过将实体、属性以及它们之间的关系构建成一个图谱,来表达人类知识的本质。

知识图谱在许多领域有广泛的应用。今天我们以太阳系为例,演示一下如何在Axure中创建一个可拖动的知识图谱。在拖动的同时保持相互关系,并且非常容易扩展。

演示地址

这是一个太阳系八大行星的知识图谱:

https://usrsky.axshare.com/#id=rxn54f&g=1

基础知识

需要用勾股定理来计算连线长度。

需要用反正切来计算连线旋转角度。

准备工作

新建一个全局变量theta,默认值0就可以。

根结点“太阳”:先拖出一个圆形,输入文字“太阳”,右键“转为动态面板”,动态面板取名Sun。最好一直置顶。

子节点“火星”:再拖出一个圆形,输入文字“火星”,右键“转为动态面板”,动态面板取名Mars

火星“连线”:拖出一个矩形,取名Line,宽度随意,高度为2,默认置底。不建议使用“水平线/垂直线”,总是莫名其妙的出问题。

元件结构如下:

“火星”教程

火星是一个引人入胜的行星,喜欢科学的都会有浓厚的兴趣,我们就先操作一下。

先来做“火星”的交互:

其中用到的局部变量p都是指Sun元件(p代表parentNode,意思为父节点),注意不要选到“元件文本”:

简单讲解一下“旋转时”的交互内容(方便读者复制粘贴):

  • 旋转时
  • 设置变量值
  • 设置全局变量theta的值为 [[Math.atan2(this.y+this.height/2-p.y-p.height/2,this.x+this.width/2-p.x-p.width/2)]]
  • 旋转
  • 旋转Line到达 [[theta*(180/3.14159265359)]]
  • 设置尺寸
  • 设置Line的尺寸为 宽度:[[Math.sqrt(Math.pow((p.y+p.height/2-this.y-this.height/2),2)+Math.pow((p.x+p.width/2-this.x-this.width/2),2))]] 高度:2
  • 移动
  • 移动Line到达 x坐标:[[p.x+p.width/2-Target.width/2*(1-(Math.cos(theta)))]] y坐标:[[p.y+p.height/2+(Math.sin(theta)*Target.width/2)]]

太阳动态面板“Sun”的交互,相当简单,只需要在自身移动时触发一下“Mars”的“移动时”:

这样,一个太阳与火星的关系图就做好了。

此时可以预览一下看看效果。

“地球”教程

地球是我们所居住的第三颗距离太阳最近的行星。我们也把它加进来。

我们同时选择Mars和Line,重复一份,新的动态面板改名为Earth,文本改为“地球”,并将新的Line置底。

新的元件关系如下:

这时,只需要在动态面板“Sun”上,多触发一下“Earth”的“移动时”就可以了。是不是简单到离谱?

也可以用同样的方法把太阳系的其他行星都加入进来。

“月球”教程

月球是地球的唯一自然卫星,是我们夜空中最明亮的天体之一。

我们再次同时选择Mars和对应的Line,重复一份,新的动态面板改名为Moon,文本改为“月”,同样将新的Line置底。

新的元件关系如下:

月亮的父节点应该为Earth对吧,所以,我们需要把“Moon”的交互里用到的局部变量p全部都改为Earth元件。

最后,在“Earth”移动时,通知一下“Moon”进行计算。

总结

我们将所有的计算都放在子节点上,这样会非常容易扩充及维护。只需要做到两点:

  1. 把子节点的局部变量p都指向自己的父节点。
  2. 在父节点的“移动时”只要触发所有子节点的“移动时”就可以了。

如果觉得我的教程做的不错呢,欢迎关注、收藏、转发、捐赠,谢谢。

原文链接:使用Axure制作可拖拽知识图谱/关系图谱

转载请注明:最InのAxure » 使用Axure制作可拖拽知识图谱/关系图谱