详细介绍通过HTML5的Drag和Drop生成拓扑图片Base64信息的案例

百变鹏仔 2个月前 (10-18) #H5教程

文章标签拓扑

html5 原生的 drag and drop是很不错的功能，本文将搞个有点使用价值的例子，通过drag and drop生成图片的base64的字符串信息。

使用Base64方式的图片有诸多好处，可将多个图片信息整合到单个js文件避免多次http请求，可以避免WebGL例子跨域访问的安全限制无法本地文件运行等好处，当然弊端也不少例如不能有效利用浏览器图片缓存机制等。使用HT for Web的朋友会发现HT的例子很多注册图片都采用Base64的方式，这主要是为了方便用户直接本地文件打开HT的手册即可操作浏览，无需构建web服务器发布进行访问，用户常问然后将图片转出Base64信息，我们使用的就是本文介绍的小工具。

该工具由一个列表、一个拓扑图和一个文本框三部分组成，用户任意拖拽本地多图片文件到任意页面部分，HT自动将图片信息生成对应的DataModel数据模型，列表显示图片效果、名称和宽高信息，拓扑显示图片、修改时间和文件大小等信息，文本框生成对应注册到htDefault.setImage函数的代码片段，用户直接可以将文本框内的代码拷贝到自己的工程的js文件进行使用。

function init(){                                                                     dataModel = new ht.DataModel();                                                                                 listView = new ht.widget.ListView(dataModel);     graphView = new ht.graph.GraphView(dataModel);    splitView = new ht.widget.SplitView(listView, graphView);    textArea = new ht.widget.TextArea();     textArea.getElement().style.wordWrap = &#39;normal&#39;;    textArea.getElement().style.color = &#39;#777&#39;;    textArea.setEditable(false);    new ht.widget.SplitView(splitView, textArea, &#39;v&#39;).addToDOM();        new ht.layout.ForceLayout(graphView).start();                                listView.setRowHeight(50);       listView.drawRowBackground = function(g, data, selected, x, y, width, height){        if(this.isSelected(data)){            g.fillStyle = &#39;#87A6CB&#39;;        }        else if(this.getRowIndex(data) % 2 === 0){            g.fillStyle = &#39;#F1F4F7&#39;;        }        else{            g.fillStyle = &#39;#FAFAFA&#39;;        }        g.beginPath();        g.rect(x, y, width, height);        g.fill();    };    ht.Default.setImage(&#39;icon&#39;, {        width: 50,        height: 50,        clip: function(g, width, height) {               g.beginPath();            g.arc(width/2, height/2, Math.min(width, height)/2-3, 0, Math.PI * 2, true);                        g.clip();                                },        comps: [            {                type: &#39;image&#39;,                stretch: &#39;uniform&#39;,                rect: [0, 0, 50, 50],                name: {func: &#39;getImage&#39;}            }        ]    });    listView.setIndent(60);      listView.setVisibleFunc(function(data){        return data instanceof ht.Node;    });    listView.getIcon = function(data){        return &#39;icon&#39;;    };                                      listView.getLabel = function(data){        var name = data.getName(name);        var image = ht.Default.getImage(name);        if(image){            name += &#39; ( &#39; + image.width + &#39; X &#39; + image.height + &#39; )&#39;;        }        return name;    };    window.addEventListener("dragenter", dragEnter, false);    window.addEventListener("dragexit", dragExit, false);    window.addEventListener("dragover", dragOver, false);    window.addEventListener("drop", drop, false);                                             }function dragEnter(evt) {    evt.stopPropagation();    evt.preventDefault();}function dragExit(evt) {    evt.stopPropagation();    evt.preventDefault();}function dragOver(evt) {    evt.stopPropagation();    evt.preventDefault();}function drop(evt) {    evt.stopPropagation();    evt.preventDefault();    dataModel.clear();    textArea.setText("");    lastNode = null;                    var files = evt.dataTransfer.files;    var count = files.length;                    for (var i = 0; i < count; i++) {        var file = files[i];        var reader = new FileReader();        reader.onloadend = handleReaderLoadEnd;        reader.file = file;        reader.readAsDataURL(file);    }}function handleReaderLoadEnd(evt) {    var reader = evt.target;      var file = reader.file;    var name = file.name;    name = name.substr(0, name.length - 4);    var text = "ht.Default.setImage(&#39;" + name + "&#39;, &#39;" + reader.result + "&#39;);\n";    textArea.setText(textArea.getText() + text);                     ht.Default.setImage(name, reader.result);     var note = &#39;Date: &#39; + file.lastModifiedDate.toLocaleString() + &#39;\n&#39;            + &#39;Name: &#39; + file.name + &#39;\n&#39;            + &#39;Size: &#39; + file.size + &#39;\n&#39;            + &#39;Type: &#39; + file.type;    var node = new ht.Node();    node.setName(name);    node.setImage(name);    node.s({        &#39;note&#39;: note,        &#39;note.position&#39;: 3    });    dataModel.add(node);    if(lastNode){        var edge = new ht.Edge(lastNode, node);        dataModel.add(edge);                        }    lastNode = node;                }

立即学习“前端免费学习笔记（深入）”；

该代码主要对window添加了dragenter、dragexit、dragover和drop的拖拽处理，大部分都是通过e.stopPropagation();和evt.preventDefault();阻止默认行为，我们仅需在最后的drop事件中通过e.dataTransfer.files得到所有当前拖拽文件信息，构建FileReader进行加载，然后对加载的信息构建对应DataModel中的ht.Node对象和属性就完事了。

最后代码中还有几处使用HT for Web的技术细节值得提到，左侧list列表通过自定义矢量图标，并且在定义矢量时采用了clip的功能，这样列表的图标就会显示成clip裁剪后的圆形效果。重载了listView.drawRowBackground函数，实现隔行变色的列表效果。重载了listView.getLabel显示了更多的动态文本信息。通过listView.setVisibleFunc过滤不显示连线信息在列表中。

以下为该Base64转换工具的操作效果视频和抓图供参考：

文章推荐

详细介绍通过HTML5的Drag和Drop生成拓扑图片Base64信息的案例

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集