[置顶] 基于HTML5快速搭建TP-LINK电信拓扑设备面板

最新推荐文章于 2021-06-02 21:06:02 发布

吃货乙

最新推荐文章于 2021-06-02 21:06:02 发布

阅读量458

点赞数

分类专栏： HT for Web</div> 拓扑图</div> 电信</div> HTML5</div>

本文链接：https://blog.csdn.net/yixiaof/article/details/79010831

版权

本文介绍了如何利用HTML5技术快速搭建一个TP-LINK设备面板，包括基本图形的绘制、自定义图形的实现、指示灯闪烁效果、连线的绘制以及流动效果的添加。通过HT for Web库，详细展示了从数据模型容器创建到各种图形元素的动态效果实现过程。

摘要由CSDN通过智能技术生成

　　今天我们以真实的TP-LINK设备面板为模型，完成设备面板的搭建，和指示灯的闪烁和图元流动。

　　先来目睹下最终的实现效果：http://www.hightopo.com/demo/blog_tplink_20170511/index.html

1、TP-LINK面板

我们从TP-LINK的设备面板开始，设备面板的示意图如下：

显而易见，设备面板基本上能由HT for Web（http://www.hightopo.com/guide/guide/core/beginners/ht-beginners-guide.html）的基本图形（rect、circle、oval等）构成，而中间的接口需要用自定义图形来解决，下面让我们一步步实现它，准备工作如下：

导入我们的HT（http://www.hightopo.com/）：

<script src="ht.js"></script>

创建数据模型容器，并将其加入DOM：

dataModel = new ht.DataModel();//创建数据模型容器  
graphView = new ht.graph.GraphView(dataModel);//创建拓扑图组件  
graphView.addToDOM();

可能有人看到这里的addToDOM()很疑惑？没错，这是HT新增的API！之前我们要创建一个图形界面，不光需要在CSS样式中定义mian的top、left，还需要对window对象的resize事件进行监听等等，所以我们新增addToDOM()帮您做好这一系列的事情，可以看看源代码中的实现方式：

    p.addToDOM = function(){     
        var self = this,  
            view = self.getView(),     
            style = view.style;  
        document.body.appendChild(view);              
        style.left = '0';  
        style.right = '0';  
        style.top = '0';  
        style.bottom = '0';        
        window.addEventListener('resize', function () { self.iv(); }, false);  
        self.iv();  
    },

准备工作完成后，就可以开始面板的绘制，对于基本图形，只需设置其相应地样式即可，例如有立体效果的按钮部分：

{  
      type: "circle",  
      shadow: true,  
      background: "rgb(0,0,0)",  
      borderWidth: 1,  
      borderColor: "rgb(0,0,0)",  
      border3d: true,  
      gradient: "spread.horizontal",  
      gradientColor: "rgb(79,77,77)",  
      dashColor: "rgb(0,0,0)",  
      rotation: 3.141592653589793,  
      rect: [  
        677, 157,  
        43, 34  
      ]  
}

对于自定义图形，前面也有介绍过，详见HT for Web形状手册（http://www.hightopo.com/guide/guide/core/shape/ht-shape-guide.html）。需要制定