在数学中，矩阵是按行和列排列的数字、符号或表达式的矩形阵列，任何矩阵都可以与相关字段中的标量元素相乘。矩阵的主要应用是表示线性变换，即f(x)=4x等线性函数的推广。例如，在3D空间中旋转一个向量就是一个线性变换，可以用一个旋转矩阵来表示：如果v是一个描述（只有一列的矩阵）空间中一点位置的列向量，则乘积Rv为描述旋转后点位置的列向量。两个变换矩阵的乘积是表示两个变换的组合的矩阵。矩阵的另一个应用是求解线性方程组。如果一个矩阵是方阵，它的一些性质可以通过计算它的行??列式来推断。例如，方阵具有相反的当且仅当其行列式非零。线性变换的几何形状（以及其他信息）可以从矩阵的特征值和特征向量中看出。在大多数科学领域都可以找到矩阵的应用。物理学的每个分支，包括经典力学、光学、电磁学、量子力学和量子电动力学，都用于研究物理现象，例如刚体的运动。在计算机图形学中，它们用于操纵3D模型并将它们投影到2D屏幕上。在概率论和统计学中，随机矩阵用于描述概率集；例如，它们在PageRank算法中用于在Google搜索中对页面进行排名。矩阵微积分概括了经典的分析概念，例如导数和指数更高的维度。矩阵在经济学中用于描述经济关系系统。首先，这个实现真的很酷。从来不知道分子中的引力和斥力组合矩阵可以产生这么酷的效果，而且代码量还是非常少的。这个例子在医疗领域和生物行业也应该有广泛的应用，但是如果用的好，在工业上一定会有不小的成就。http://www.hightopo.com/demo/...我接下来的任务就是帮你轻松实现这个效果。HT把elastic布局的js文件放到了一个单独的文件里，引用了这个js文件需要先导入ht.js，因为我们也做了一个form表单，所以还需要导入form表单的js文件。并不是HT封装的所有功能都需要导入专门的js文件，额外的js文件的使用手册顶部会有介绍。这里forcelayout弹性布局的js和form表单的js的释放顺序没有关系：首先我们定义一个颜色数组变量来存储每个弹力球的颜色，同时定义一个随机函数在数组中生成随机颜色：varcolorList=['#FFAFA4','#B887C5','#B9EA9C','#CFD9E7','#4590B8','#FF9C30'],colorLen=colorList.length;varrandomColor=function(){varran=Math.random()*colorLen;返回colorList[Math.floor(ran)];//随机6种颜色};然后创建一个弹力球，简单生成一个3D节点，通过设置节点的style属性控制节点的显示方式，其中“shape3d”设置为“sphere”，将ht.Node的六面体变成一个3D球体模型，然后设置“shape3d”属性为上面定义的随机颜色，s3也是设置HT封装的3D节点大小的函数，最后添加这个节点进入数据模型dataModel：varcreateNode=函数(dm){//创建节点节点圆varnode=newht.Node();node.s({'shape3d':'sphere','shape3d.color':randomColor()});node.s3(40,40,40);dm.add(节点);返回节点；}；现在效果图上的弹力球之间有了联系。乍一看，我们觉得这种联系很不寻常。也是通过节点的构建。该节点是HTforWeb建模手册中setShape3dModel函数自定义的3D模型，命名为'custom'：ht.Default.setShape3dModel(//根据xy平面的曲线创建模型，形成3D模型'自定义',ht.Default.createRingModel([0.5,0.5,-0.2,0,0.5,-0.5],[1,3]));HT将自定义属性和HT默认属性调用方法分为node.a和node.s，这样可以有效区分两者。我们在创建管道时调用了这个方法：varupdatePipeline=function(edge){//重置边的样式varpipeline=edge.a('pipeline');pipeline.s3(1,1,1);pipeline.p3(0,0,0);varnode1=edge.getSourceAgent(),//获取图上连接的起始节点node2=edge.getTargetAgent();pipeline.s('mat',createMatrix(node1.p3(),node2.p3(),20));//3d整体图形矩阵变化};我们知道矩阵可以描述任何线性变换。线性变换保留直线和平行线。虽然线性变换保留直线，但其他几何属性（例如长度、角度、面积和体积）可能会因变换而改变。简单地说，线性变换可以“拉伸”坐标系，但不会“弯曲”或“扭曲”坐标系。该函数主要是对拖动弹性球后拖动的连线进行“改变矩阵”操作。变化矩阵也是HT封装的ht.Default.createMatrix函数，可以非常方便的创建变化。Matrix:varcreateMatrix=function(p1,p2,width){//createMatrix(array,matrix)将JSON中描述的一组缩放、移动、旋转等操作转换成对应的变化矩阵varvec=[p2[0]-p1[0],p2[1]-p1[1],p2[2]-p1[2]],dist=ht.Default.getDistance(p1,p2);//获取两点之间的距离，或者向量长度returnht.Default.createMatrix({s3:[width,dist,width],r3:[Math.PI/2-Math.asin(vec[1]/dist),Math.atan2(vec[0],vec[2]),0],旋转模式:'xyz',t3:[(p1[0]+p2[0])/2,(p1[1]+p2[1])/2,(p1[2]+p2[2])/2]});};基本配件都定义好了，然后设置“shape3d”属性为自定义3D模型“custom”，设置“layoutable”属性为“false”，防止图形元素参与布局，点与点之间的连接通过edge.a('pipeline',node)刷新，并添加到数据模型dataModel:varcreateEdge=function(dm,node1,node2){//createedgevarnodeof'custom'model=newht.Node();node.s({'shape3d':'custom','shape3d.color':'#ECE0D4','layoutable':false});分米。添加（节点）；varedge=newht.Edge(点头e1,节点2);edge.a('管道',节点);edge.s('edge.color','rgba(0,0,0,0)');dm.add(边);返回边缘；};我们还可以利用业界的HeatMap热力图做文章，效果还是很炫的，具体地址http://hightopo.com/guide/gui...这里还是重点完成图上的本例界面全部绘制完成后，只剩下form表单了。首先在HTML页面添加form表单，使用HT封装的ht.widget.FormPane函数：varformPane=newht.widget.FormPane();formPane.setWidth(230);formPane.setHeight(125);formPane.addToDOM();记住，窗体的宽高一定要设置，否则显示不出来。通过addRow函数向表单添加行。让我们关注以下几行，颜色、范围和强度。这三个名称主要是用来控制“大灯”的。在HT中，直接使用setHeadlightColor/setHeadlightRange/setHeadlightIntensity这三个函数来控制“头灯”的颜色、范围和强度。Intensity'].forEach(function(name){varobj={id:name},func=function(oV,nV){g3d['setHeadlight'+name](nV);//===g3d.setHeadlightColor(nV)/g3d.setHeadlightRange(nV)/g3d.setHeadlightIntensity(nV)};if(name==='Color')obj.colorPicker={//ht.widget.ColorPicker为颜色选择框instant:true,value:g3d['getHeadlight'+name](),//===g3d.getHeadlightColor()onValueChanged:func};elseobj.slider={//slidermin:0,max:name==='Range'?20000:3,step:0.1,value:g3d['getHeadlight'+name](),onValueChanged:func};formPane.addRow([name,obj],[70,0.1]);});slider和colorPicker都是HT自定义的slider和colorselector，详见HTforWebForm手册。如果还有不明白的可以咨询我，或者直接上HTforWeb官网查看说明书。
