前言
知识图谱是一种基于语义网络的知识表示方法,它通过将实体、属性以及它们之间的关系构建成一个图谱,来表达人类知识的本质。
知识图谱在许多领域有广泛的应用。今天我们以太阳系为例,演示一下如何在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”进行计算。
总结
我们将所有的计算都放在子节点上,这样会非常容易扩充及维护。只需要做到两点:
- 把子节点的局部变量p都指向自己的父节点。
- 在父节点的“移动时”只要触发所有子节点的“移动时”就可以了。
如果觉得我的教程做的不错呢,欢迎关注、收藏、转发、捐赠,谢谢。
转载请注明:最InのAxure » 使用Axure制作可拖拽知识图谱/关系图谱