【无限思维画布】制作思维导图第五步，节点创建与连接，拖拽对齐与双击缩放

正在为无限词典制作单词思维导图功能，实现无限单词导图，无限思维画布。目前制作到第五步，实现节点创建、节点连接、节点拖拽对齐：

节点创建与连接，拖拽对齐

Details

第四步，推倒重来。

一开始受vue-mindmap影响，用的是一个大型svg嵌套所有，其实没多大道理，大可不必。更重要的是，无论何种方法，在移动端放大的情况下，拖拽移动会很卡。用了亿点小技巧解决了（思路是原生结合js，解决）

不断推导重来，总共迭代出了八个副本，每个都是不大相同的路线：

第五步，拖拽对齐、节点连接、双击缩放

简单记录下。

拖拽对齐就是移动节点的时候，按照100像素对齐。否则节点容易歪歪斜斜的。

总布局呢是个巨大的div，初始大小1500x2500，接近黄金比例，作为一个画布单位，可以无限拓展。然后初始化的时候用transform属性将总布局缩小，适配设备宽度。

这样，我们的思维画布天生就有了 chrome 、 webview 的惯性平滑滚动，岂不美哉！

至于“双击快速缩放”功能，原本是原生就有的功能，后来取消了，但可手动模拟。具体不谈，可参考我开源仓库里的RLContainerSlider.java代码，这是个多才多艺的布局容器，融合了opera浏览器式左右翻页、下拉键盘、双击快速缩放等功能。

节点连接还是用svg实现的，在巨型svg下动态创建path。这里有个坑点，普通的createElement、className等可能无效，需要用createElementNS、setAttribute('class’等等，参考使用了这篇博客：用js在页面中创建svg标签不显示的问题的这个方法：

		// https://blog.csdn.net/yiyueqinghui/article/details/108004272
		function makeSVG(tag, attrs) {
			const ns = 'http://www.w3.org/2000/svg';
			const xlinkns = 'http://www.w3.org/1999/xlink';
			let el= document.createElementNS(ns, tag);
			if (tag==='svg'){
				el.setAttribute('xmlns:xlink', xlinkns);
			}
			for (let k in attrs) {
				if (k === 'xlink:href') {
					el.setAttributeNS(xlinkns, k, attrs[k]);
				} else {
					el.setAttribute(k, attrs[k]);
				}
			}
			return el;
		}

---

最后需要解决放大状态下，拖拽移动卡顿的问题。这个只在移动端发现，应该不是性能瓶颈造成的，而是chrome工程师偷藏的一个BUG。桌面也可用触摸板双指放大，但并未发现任何卡顿现象。

怎么办，提交bug report？别逗了，chromium开发组怕是没空理会这些“简单”问题的， 上次我提交的bug（好不容易说服老外哪里存在BUG）还没改正呢，人微言轻啊！

其实可以自己动手丰衣足食，用原生端java代码配合前端页面，通过JavaScript bridge 模拟拖拽即可解决，首先要在拖拽发生的刹那禁止原webview的滚动，做法有很多，可以重写 webview 的 overScrollby 方法直接返回，我的做法是在 RLContainerSlider 布局容器中，onInterceptTouchEvent 拦截，稍后再通过 evaluateJavascript 模拟拖拽，效果还行。不过开启对齐后，好像就不明显了？

这部分耦合较大，就不直接贴代码了。