最近公司在做个大屏项目。前端使用Ht来画页面，这是一款收费软件。网上的资料很少，能够搜索到的基本都是其官方的酷炫示例。本人也是花了好久时间才慢慢熟悉了该软件。只能开发一些2D的页面，3D的目前还没研究过。目前能够满足项目需求了，至少这是个好的开始。
集成到Vue
很简单，在index.html中引入对应的js即可。
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- 全局加载Ht依赖库,ht有很多插件，按需加载吧。-->
<script type="text/javascript" src='./ht-enjoy/libs/core/ht.js'></script>
<script type="text/javascript" src='./ht-enjoy/libs/plugin/ht-obj.js'></script>
<script type="text/javascript" src='./ht-enjoy/libs/plugin/ht-dialog.js'></script>
<script type="text/javascript" src='./ht-enjoy/libs/plugin/ht-cssanimation.js'></script>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
</body>
</html>
编写你的功能模块
<style scoped>
.ht-view {
position: relative;
width: 100%;
height: 1080px;
}
</style>
<template>
<div id="topo" class="ht-view"></div>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
init () {
let data = new ht.DataModel();
let graphView = new ht.graph.GraphView(data);
// demo.json是将页面通过编辑器序列化后的文件。
// 页面序列化后可存储到数据库，可通过api获取，也可存储在本地。
ht.Default.xhrLoad('/ht-enjoy/json/demo.json', function(text) {
let json = ht.Default.parse(text);
data.deserialize(json);
// 平移展示所有图元
graphView.fitContent(true, 10, true);
});
// 绑定到div上。此处为什么这样写呢。因为我在做的过程中发现，加载完成后它的图层会在最上层。
// 可能会覆盖你的页面。我调了好久也没找到好的办法，最后就把它绑定到一个可控的div上。
// 这样就比较灵活了。操作起来也很方便...如果你有更好的方法，请一定留言告诉我。
graphView.addToDOM(this.$el);
}
},
mounted () {
// 初始化页面
this.init();
}
}
</script>
这只是最基本的使用，还有事件绑定、各种复杂交互等等。后续补充更新....
网友评论