오늘부터 가장 기본적인 수준부터 HTML5 Canvas 토폴로지 그래프 애플리케이션을 구축하는 방법을 분석하겠습니다. HT는 가장 풍부한 2D 기능을 갖춘 구성 요소인 토폴로지 그래프 구성 요소인 ht.graph.GraphView(이하 GraphView)를 내부적으로 캡슐화합니다. HT 프레임워크 및 관련 클래스 라이브러리는 모두 ht.graph 패키지 아래에 있습니다. GraphView는 기본적인 그래픽 표현 및 편집 기능, 토폴로지 노드 연결 및 자동 레이아웃 기능, 전력, 통신 등 산업 분야에서 미리 정의된 객체, 애니메이션 렌더링 등의 특수 효과를 갖추고 있으므로 광범위한 응용 분야로 활용될 수 있습니다. 모니터링 분야의 그리기 도구 및 인적 자원. 기계 인터페이스를 갖추고 있으며 일반 그래픽 편집 도구로 사용할 수 있으며 워크플로 및 조직도와 같은 엔터프라이즈 애플리케이션으로 확장할 수 있습니다. 간단히 말해서 토폴로지 다이어그램은 일반화된 용어로, 통신 네트워크 관리의 네트워크 토폴로지 다이어그램, 전력망 토폴로지 다이어그램, 산업 제어 모니터링 다이어그램, 작업 흐름 다이어그램, 사고 브레인 맵 등을 간단히 말하면 노드 연결로 구성됩니다. 여기에 언급된 토폴로지 다이어그램은 다음과 같습니다.
HT를 사용하면 네트워크 토폴로지 다이어그램을 개발하는 것은 매우 쉽습니다. 간단한 서버 및 클라이언트 토폴로지 다이어그램을 완성하려면 몇 줄의 코드만 있으면 됩니다.
이 예는 매우 기본적이며 서버와 클라이언트의 거의 모든 토폴로지 기능을 완료합니다. 더 이상 고민하지 말고 HTML 태그의 모든 부분을 포함하여 이 예제에 대해 총 몇 줄의 코드가 필요한지 추측해 보세요. 빈줄 빼면 50줄밖에 안되는데 스타일 디자인도 많이 했네요 결국 제가 보여드리고 싶은 예는 너무 못생겼을수가 없어요~
tuputu_jb51.rar에서 직접 코드를 다운로드할 수 있습니다. json 파일이 있기 때문에 이미지에 크로스 도메인 문제가 있을 수 있으므로 이를 실행하려면 Firefox나 로컬 서버를 사용해야 합니다.
처음에 HT는 HTML5 표준을 기반으로 하는 엔터프라이즈 애플리케이션 그래픽 인터페이스를 위한 원스톱 솔루션이라는 점을 설명하겠습니다. 여기에는 일반 구성 요소, 토폴로지 구성 요소 및 3D 렌더링 엔진과 같은 풍부한 그래픽 인터페이스 개발 라이브러리가 포함되어 있습니다. .js이며 HT는 전역 변수 ht만 선언하기 때문에 다른 것과 전혀 충돌하지 않습니다.
다음으로, 코드 부분을 분석하여 토폴로지 맵 장면을 구축합니다.
dm = new ht.DataModel();//데이터 컨테이너 gv = new ht.graph.GraphView(dm);//토폴로지 구성요소 매개변수는 dm gv.addToDOM()에 의해 바인딩된 데이터 모델입니다.//토폴로지 그래프 추가 몸 속으로
HT의 모든 구성 요소의 루트는 getView() 메서드를 통해 얻은 div입니다. addToDOM 메서드에서 이 메서드를 사용합니다.
addToDOM = function(){ var self = this, view = self.getView(), //구성요소의 기본 div 가져오기 style = view.style; document.body.appendChild(view); 본문 style.left = '0'; //HT는 일반적으로 구성요소를 절대 위치로 설정합니다. style.right = '0' style.top = '0'; window.addEventListener('resize', function () { self.iv(); }, false); //이벤트 수신 창 크기 변경, iv는 지연된 새로 고침 구성 요소입니다.}그런 다음 토폴로지 장면에 서버 및 클라이언트 노드를 추가합니다.
var server = new ht.Node();server.setName('server');//노드 이름을 설정하고 노드 아래에 표시합니다. server.setImage('serverImage');//노드 이미지 설정 server.setSize( 20, 60 );//노드 크기 설정 dm.add(server);//데이터 컨테이너에 노드 추가 dm server.setPosition(100, 100);//노드 좌표 설정(x, y) var group = new ht.Group();//그룹, 그룹에 여러 노드가 있을 수 있음 group.setImage('groupImage');//이미지 설정 dm .add(그룹);var 클라이언트 = 신규 ht.Node();//이 노드는 client.setName('client');client.setImage('clientImage');dm.add(client);group.addChild(client);// 추가 그룹에 추가됩니다. 그룹의 하위 항목 group.setExpanded(true);//그룹을 확장 모드로 설정 client.setPosition(200, 100);//노드 위치를 설정합니다. 그룹에 노드가 하나만 있는 경우 이 노드의 위치가 그룹의 위치가 될 수 있습니다.서버와 클라이언트 간의 연결? 코드 2줄 완성! 실제로 HT에서 노드를 추가하는 방법은 매우 간단합니다. 일반적으로 코드 두 줄만 필요합니다. 먼저 인스턴스 변수를 선언한 다음 인스턴스 변수를 데이터 컨테이너에 추가합니다.
var edge = new ht.Edge(서버, 클라이언트);dm.add(edge);
점선은 어떻게 만들어지는지 궁금합니다. 점선의 형성은 연결선을 기준으로 이루어지며 다음의 3단계로 이루어집니다.
매우 간단하지 않습니까! 다음으로 설정 방법을 살펴보겠습니다.
edge.s({//노드 설정 스타일 attribute'edge.dash': true,//점선 표시'edge.dash.flow': true,//점선 흐름 활성화'edge.dash.color': 'yellow ', //점선 색상'edge.dash.pattern': [8, 8],//점선 스타일 'label': 'flow',//노드 주석 'label.Background': 'pink',// 노드 주석 배경색 });이렇게 디스플레이 부분이 모두 소개되었습니다~잠깐 뭔가 빠진거 같은데요? 그런데 HT에서 ht.Group 클래스를 도입하는 것을 잊어버렸습니다. 이름에서 알 수 있듯이 그룹에는 여러 노드가 포함될 수 있습니다. 위의 코드는 그룹에 있는 모든 노드를 표시하거나 숨길 수 있습니다. , 그러나 여전히 약간의 움직임을 보였습니다. 즉, 그룹의 오른쪽 상단 모서리에 있는 표시 부분은 실제로 지침을 프롬프트하는 데 사용되는 표시입니다.
group.s({ 'group.ground': 'rgba(255, 255, 0, 0.1)',//그룹의 배경색 설정'note': 더블 클릭하세요!,//표시된 내용에 주석 달기'note .position ': 13,//주석 위치 'note.offset.y': 10,//주석 위치의 Y축 오프셋});note.position을 통해 주석의 위치를 변경할 수 있습니다(구체적인 위치 정보는 HT의 웹 위치 매뉴얼을 참조하세요). 또는 note.offset.x 및 note.offset.y를 사용하여 주석의 위치를 변경할 수 있습니다. 주석.
모든 코드 분석이 완료되었습니다! 가능한 한 빨리 업데이트하겠습니다. 진행이 느리다고 생각되면 공식 웹사이트(HT for Web)에 가서 직접 학습하여 더 많은 것을 얻을 수 있기를 바랍니다. 이 글의 내용을 당신의 지식으로 바꿔보세요!
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.