Ht for Web + Vue整合

2021-02-04  本文已影响0人  南城忆往

最近公司在做个大屏项目。前端使用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>

这只是最基本的使用,还有事件绑定、各种复杂交互等等。后续补充更新....

上一篇下一篇

猜你喜欢

热点阅读