HTML5 기반의 TP-LINK 통신 토폴로지 장비 패널을 빠르게 구축하는 구현 방법

오늘 우리는 실제 TP-LINK 장치 패널을 모델으로 사용하여 장치 패널의 구성, 표시등의 깜박임 및 그래픽 요소의 흐름을 완료합니다.

1. TP-LINK 패널

TP-LINK 장치에서 시작합니다. 패널 처음에 장치 패널의 개략도는 다음과 같습니다.

분명히 장치 패널은 기본적으로 웹의 경우 HT 를 사용할 수 있습니다.) , 중간 인터페이스는 커스텀 그래픽으로 풀어야 합니다. 준비 작업은 다음과 같습니다.

HT를 가져옵니다. >

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

데이터 모델 컨테이너를 생성하고 DOM에 추가합니다.

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

여기서 addToDOM()을 보고 혼란스러워하는 사람이 있을까요? 예, 이것은 HT에 새로 추가된 것입니다

🎜 >API! 그래픽 인터페이스를 만들기 전에 CSS 스타일로 메인 상단과 왼쪽을 정의해야 했을 뿐만 아니라 창 개체<의 크기도 조정해야 했습니다. 🎜> 이벤트 등이 모니터링되므로 이 일련의 작업을 수행하는 데 도움이 되도록 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 Shape 매뉴얼을 참고하세요.

벡터

유형은 Shape로 지정해야 하며, 그 모양은 주로 <🎜 2개로 설명됩니다. > 속성 : 포인트 및 세그먼트: Points는 ht.List 유형 배열

의 정점 정보이며, 정점은 { x: 100, y:200};

segments는 ht.List 유형 선 세그먼트 배열 정보입니다. 선 세그먼트는 1부터 5까지

정수

입니다. , 다양한 정점 연결 방법을 나타냅니다. 세그먼트는 주로 곡선을 그리거나 경로의 시작점을 지정하는 데 사용됩니다. 🎜> 2: lineTo는 점 정보를 차지하며 마지막 마지막 점에서 이 점까지의 연결을 나타냅니다. 3:quadraticCurveTo, 세 점 정보를 점유하며 첫 번째 점은 다음과 같이 사용됩니다. 곡선 제어점, 두 번째 점이 곡선 끝점으로 사용됩니다.

4: bezierCurveTo, 3개 점 점유 점 정보, 첫 번째 및 두 번째 점은 곡선 제어점으로 사용됩니다. , 세 번째 점은 곡선 끝점으로 사용됩니다.

5: closePath, 점 정보를 차지하지 않고 이 경로를 나타냅니다. 도면이 끝나고 시작점에서 닫힙니다. 길.

                                                                                     > 우리 TPLINK 패널의 데이터 통합 ​​방법은 다음과 같습니다:

    ht.Default.setImage('tplink', {  
        width: 97,  
        height: 106,  
        comps: [  
            {  
          type: "shape",  
          background: "rgb(20,60,140)",  
          borderWidth: 8,  
          borderColor: "gray",  
          borderCap: "round",  
          points: [  
            269, 140,  
            359, 140,  
            359, 180,  
            329, 180,  
            329, 190,  
            299, 190,  
            299, 180,  
            269, 180,  
            269, 140  
          ]}  
        ]  
    });

이것은 사진

을 등록하는 방법 중 하나일 뿐입니다. URL을 통해 직접 등록할 수도 있습니다(자세한 내용은 웹용 HT 참조) 시작하기 매뉴얼):

    ht.Default.setImage('tplink', {  
        width: 97,  
        height: 106,  
        comps: [  
            {  
          type: "shape",  
          background: "rgb(20,60,140)",  
          borderWidth: 8,  
          borderColor: "gray",  
          borderCap: "round",  
          points: [  
            269, 140,  
            359, 140,  
            359, 180,  
            329, 180,  
            329, 190,  
            299, 190,  
            299, 180,  
            269, 180,  
            269, 140  
          ]},  
           {  
          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,  
          rect: [  
            677, 157,  
            43, 34  
          ]},  
          //...  
          //...  
          //...  
          //多个图形组件  
      ]  
    });

등록된 벡터 이미지

조각 이름을 모델에 설정합니다:

    var node = new ht.Node(),  
    node.setImage('tplink');  
    dataModel.add(node);

甚至在最新版的HT中，已经支持无需注册，直接调用setImage()，传入URL参数的方式（在我的Demo中就是使用的这种方法）。这种方法更加简洁，但是如果许多场景都应用到同一图片时，还是建议用户通过注册的图片的，避免多次修改URL：

    node.setImage('symbols/TPLink.json');

好了，现在在浏览器中预览你的HTML文档，是不是有个TPLINK面板？

最后，怎么让我们的指示灯闪烁起来呢？用HT开发的产品，要实现闪烁效果很简单，因为HT预定于图形组件默认就已与DataModel中的Data数据绑定，绑定的格式也很简单，只需将以前的参数值用一个带func属性的对象替换即可，详见HT for Web数据绑定手册。在这里指示灯的闪烁实际上是visible属性值变化产生的结果，所以我们只需要给visible属性数据绑定，如下所示：

    {  
          "type": "oval",  
          "visible": {  
            "func": "attr@visibility1"  
          },  
          "shadow": true,  
          "shadowColor": "rgba(208,240,2,0.35)",  
          "background": "rgb(178,184,141)",  
          "gradient": "radial.center",  
          "gradientColor": "rgb(247,255,0)",  
          "rect": [  
            79, 53,  
            31, 32  
          ]  
     },setInterval(function(){

                    node.a('visibility1', !t_node.a('visibility1'));  
}, 400);

到这里，你已经成功完成一个TPLINK面板的制作 (~ . ~)，当然还剩服务器的制作，这里就不再赘述，复杂TPLINK面板都完成了，服务器还远吗？

2、连线

　　大家也有注意到，我们的Demo中有两条连线，那连线应该怎么做呢？

　　HT默认提供的是直线和多点连线，但是在绘制流程图、组织结构图和思维导图等应用还需要更多的连线类型， 详情戳HT for Web连线类型手册

　　

　　在我们的Demo中，两条连接服务器和TP-LINK的曲线，均是使用自定义的新连线类型。

　　ht.Default.setEdgeType(type, func, mutual)函数可以用来自定义连线类型：

　　其中：

　　type：字符串类型的连线类型，对应style的edge.type属性；

　　　　fuc：函数类型，根据传入参数(edge, gap, graphView, sameSourceWithFirstEdge)返回走线的走向信息；

edge：当前连线对象；

gap：多条连线成捆时，笨连线对象对应中心连线的间距；

graphView：当前对应的拓扑组件对象；

sameSourceWithFirstEdge：boolean类型，该连线是否与同组的同一条连线同源；

返回值为{points：new ht.List(...)，segments：new ht.List(...)}结构的连线走向信息，segments的取值同上；

　　　　mutual：该参数决定连线是否影响起始或者结束节点上的所有连线，默认为false代表只影响同source和target的EdgeGroup中的连线。

　　具体实现时，我们需要再引入：

    <script src=&#39;ht-edgetype.js&#39;></script>

　　然后调用ht.Default.setEdgeType(type, func, mutual)函数，代码如下：

    ht.Default.setEdgeType('line', function(edge){  
                        var sourcePoint = edge.getSourceAgent().getPosition(),  
                            targetPoint = edge.getTargetAgent().getPosition(),  
                            points = new ht.List();         
                            points.add(sourcePoint);  
                            points.add({  
                                x: (sourcePoint.x + targetPoint.x)/2,   
                                y: (sourcePoint.y + targetPoint.y)/2 + 300  
                            });                    
                            points.add(targetPoint);                                                         
      
                        return {  
                            points: points,  
                            segments: new ht.List([1, 3])  
                        };                   
    });

　　创建一条新的连线时，注意这时候连线类型edge.type为我们自定义的连线类型‘line’：

    var edge = new ht.Edge();  
    edge.setSource(startNode);  
    edge.setTarget(endNode);  
    edge.setLayer('edgeLayer');  
    edge.s({  
           'edge.type': 'line',  
           'edge.color': '#0A3791',  
           'edge.width': 8,  
           'edge.center': true  
           });  
    dataModel.add(edge);

　　到这里连线已经基本完成，还有一点，大家可能对setLayer()方法不是很熟悉，其实这个方法是用于设置连线和图元的层级，因为默认的层级是edge在node之下，所以需要设置层级后，调用graphView的setLayers方法更改层级之间的关系：　

    graphView.setLayers(['nodeLayer', 'edgeLayer']);

　　若对自定义连线类型仍旧有疑问，加深了解。

3、流动

　　先来看看HT产品中流动的炫酷效果情：

　　

　　在我的Demo中两条连线应用了不同方式的流动，但是两种方式需要ht.flow插件。这个插件在ht.Shape和ht.Edge类型上扩展了样式控制流动效果，用户可以通过ht.Shape.setStyle()和ht.Edge.setStyle()来操作这些样式，下面简单介绍几种样式：

　　1、flow值为true和false，控制此ht.Shape和ht.Edge是否可流动，默认为false；

　　2、flow.count，控制流动组的个数，默认为1；

　　3、flow.step，控制流动的步进，默认为3；

　　4、flow.element.image，字符串类型，指定流动组元素的图片，图片须提前通过ht.Default.setImage()注册；

　　....

　　等等，还有很多的样式任你玩，

　　 这里必须要引入流动特效插件：

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

　　在这里，我们先将流动的图片提前注册：

 ht.Default.setImage('arrow', 'symbols/arrow.json');

　　第一种方式中，直接在连线edge上设置流动相关的属性（做完后别忘了调用启动流动的API），在这里通过设置flow.element.image属性值为'arrow'的方式设置流动的图片：

    edge.setStyle({  
        'edge.type': 'line',  
        'edge.color': '#0A3791',  
        'edge.width': 8,  
        'edge.center': true,  
        'flow': true,  
        'flow.element.image': 'arrow',  
        'flow.element.count': 1,   
        'flow.element.max': 30,                                                 
        'flow.element.autorotate': true                         
    });  
    raphView.enableFlow(40);//启动流动；

　　刷新页面，arrow在edge上流动起来了！可能还有人会疑问“如果我的流动组元素不是图片，是图元呢？”，没错，这就是第二种方式！

　　第二种方式，针对的是流动元素组是图元的情况：

    var flowNode = new ht.Node();                   
    flowNode.setImage('arrow');

　　因为流动实际上是图元的位置随着时间发生了变化，所以，我们可以更改图元的位置来控制它的流动，通过调用flow插件现成的API- - -calculateLength计算出流动线的长度length，然后改变当前步进百分比currentPercentage，具体实现如下：

    graphView.validate();//刷新；  
    var length = graphView.calculateLength(edge),//流动线长度；  
        step = 4, //步进单位像素；  
        stepPercentage = step / length * 100, // 步进百分比；  
        currentPercentage = 0; //当前步进百分比；  
      
    setInterval(function(){  
        var pos = graphView.getPercentPosition(edge, currentPercentage);//第二个参数为百分比，范围0到100;  
        flowNode.setPosition(pos.x, pos.y);//改变流动节点的位置；  
        currentPercentage += stepPercentage;  
        if (currentPercentage > 100) currentPercentage = 0;  
    }, 400);

　　做完这些之后，刷新页面，怎么仍旧没有流动效果？

　　其实这里有一个坑，那就是在计算length之前，必须先调用graphView.validate()，为什么呢？为了提高效率，graphView并不是实时刷新，而是多个图元发生改变后统一刷新，所以这里的graphView.validate()的功能是进行刷新graphView.

 

위 내용은 HTML5 기반의 TP-LINK 통신 토폴로지 장비 패널을 빠르게 구축하는 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!