mxGraph入门二

标签：无分类：未分类创建时间：2021-02-24 01:37:18 更新时间：2024-11-23 02:04:26

1.删除节点

1 2	//删除全部节点 graph.removeCells(graph.getChildCells(graph.getDefaultParent()));

参考文章:
1.mxgraph删除所有的元素cells (这个方法删除了所有的节点，但是把连线留下来了)
2.Mxgraph一些基础功能 (这里面没有什么有价值的信息)
3.mxGraph进阶(一)mxGraph教程-开发入门指南 (这里也什么参考价值)
4.liuqing2018/xgraph (这个其实类似于一个入门教程的说明)

2.获取中心点坐标

当图形移动的时候，中心点坐标便会移动，如何保留中心点坐标呢？

var graph=this.graph;
// 获取当前视图的中心和缩放比例
var view=graph.getView();
// 保留缩放比例
var sc = view.getScale();//获取当前的缩放比例
// 获取偏移
var traslate=view.getTranslate();

// 下面这两步很重要，不能写成view.setTranslate(traslate.x,traslate.y);
var x=traslate.x;// 这两步很重要
var y=traslate.y;// 这两步很重要

var req = mxUtils.load(xmlName);   //XML_PATH = xml
doc = req.getDocumentElement().ownerDocument;
var codec = new mxCodec(doc);
codec.decode(doc.documentElement, graph.getModel());

// 重新进行缩放
graph.zoomTo(sc);//在进行缩放，否则是满屏状态，不好看
// 设置偏移
view.setTranslate(x,y);

参考文章：
1.MxGraph - 改变mxCell的位置和大小
2.mxgraph的艰难入门
3.mxGraph定位盲区图形到绘图区域中心位置 (这里通过id号获取图形，然后使用geometry.x获取图形的位置)
4.mxGraph进阶(一)mxGraph教程-开发入门指南 (入门指南，讲述了边、节点、样式表，编辑器等内容)

3.绘制提示框

参考文章：
1.js画图开发库–mxgraph所有接口演示(详细带实例) (这里有一些示例)
2.mxgraph部分接口和方法总结 (这里有些比较新奇的方法，就是设置html格式的label，设置节点样式等)
3.mxgraph-js/javascript/examples/htmllabel.html (这是官方的例子，使用html作为label进行绘制)
4.mxgraph样式设置
5.MxGraph - 改变mxCell的位置和大小 (使用cell的geometry，改变图形的大小和宽高)
6.MxGraph从入门到精通之3：设置图形样式 (说明了如何改变图形的样式)
7.javascript - mxGraph-如果超过默认大小，如何自动将mxCell调整为内容宽度 (这里也是使用了geometry进行了宽高的调整)

4.中文乱码

当在编辑器中编辑中文之后，导出相关的xml，重新加载xml之后，发现了中文变成了乱码。

解决办法就是把Text的字体设置为Simsun

5.自定义图形

可以通过两种方式，一种就是加载xml的方式，一种就是使用mxCellRenderer.registerShape注册的方式进行，在在线编辑示例中，就有使用这个方式进行注册图形的代码，Shapes.js

参考文章:
1.mxGraph中mxStencil的使用教程 (这里使用了自定义了一个简单的stencil，讲述了自定义图形的规则和方法)
2.mxgraph 系列【3】：底层状态树 mxCell (除了讲了Cell外，还分别用了两种方式实现了自定义图形，一种就是代码，一种就是xml文件)
3.mxgraph 之自定义双边框长方形（即：doubleRectangle） (通过代码自定义了一个图形)

往期推荐

文章目录

微信公众号

广告位

诚心邀请广大金主爸爸洽谈合作

每日一省

isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

每日二省

为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

每日三省

== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

每日英语

Happiness is time precipitation, smile is the lonely sad.

幸福是年华的沉淀，微笑是寂寞的悲伤。