論一種基于JS技術的WEB前端動態生成框圖的方法

李文鵬發布于2019-08-29 14:09 / 699人閱讀

摘要：前言是一種標記語言，由的標簽元素和文本編寫的文檔可被瀏覽器描述為一幅網頁。以下列舉了一些常用的對象方法，可供大家參考可登陸網站詳細查看，實現繪圖的方式主要基于這些常用的方法。

前言

HTML是一種標記語言，由HTML的標簽元素和文本編寫的文檔可被瀏覽器描述為一幅網頁。通常情況下網頁的實現是由HTML、CSS和Javascript三者結合完成的，HTML負責網頁的結構，CSS渲染網頁元素的樣式，而Javascript腳本給網頁增加了動態的行為，比如響應用戶的行為等。

眾所周知，在web上繪圖是一件挺頭疼的事情，通常情況下開發人員需要借助第三方插件實現，目前HTML5中引入了canvas元素可通過JavaScript在頁面上繪制線條、圖形、添加文字和圖像等大部分的繪圖需求，但是仍然存在兼容性的問題，比如Firefox3.0+、Chrome3.0+支持，但IE是在9.0版本后才開始支持（如下圖瀏覽器主流版本分布圖可知IE8的應用仍然很廣泛）。因此本文介紹下如何使用最基礎的方式來實現畫圖。

DOM介紹

由于此處是通過JavaScript方式動態生成圖形的，那么在介紹實現方式之前，有必要先提下DOM（文檔對象模型），它是W3C組織推薦的處理可擴展標記語言（HTMLXML）的標準編程接口，它將文檔中的對象組織在一個樹形結構模型中,因此整個文檔映射為一個由層次節點組成的文件，并且以面向對象方式描述了文件中各對象的行為、屬性以及這些對象之間的關系，通過 JavaScript可對HTML文檔中所有對象進行訪問和操作，如動態地添加、刪除和修改各元素。

如下圖所示，每個方框是文檔的一個節點，總共包括三種節點，樹形的根部是文檔（Document）節點,代表整個文檔，元素（Element）節點代表了HTML中的元素，文本（Text）節點代表了文本。

同時節點樹中的節點彼此擁有層級關系，如下圖所示，節點是根節點，下一級為和節點，他們擁有相同父節點，屬于同級的同胞節點，以此類推。

以下列舉了一些常用的DOM對象方法，可供大家參考（可登陸W3school網站詳細查看），實現繪圖的方式主要基于這些常用的方法。

繪制圖形的基本過程是將所要求顯示的元素節點逐個添加到頁面中的排布位置中，操作包括：

創建DOM節點

   var oDiv = document.createElement("div");

添加樣式：（Style 對象屬性設置樣式/Class繼承外部文件定義的樣式）

   document.getElementById("id").style.property="值"
   object.className=classname

插入DOM節點：（把節點插入到父節點的末尾/把節點插入到父節點的某個兄弟節點的前面）

   document.body.appendChild(oDiv); //把div插入到body中，并且位于末尾
   var oP = createElement("p");  //創建一個p節點
   document.body.insertBefore(oP,oDiv); //把p節點插入到div的前面

位置的定位排布：CSS的position屬性建立了元素布局所用的定位機制，我們可以將元素顯示在頁面中的任何位置，下圖顯示了position屬性的參數值和用法。文本使用absolute絕對定位方式，如left:100px;top:150px;表示元素距離頁面左側100px，距離頁面頂部150px。

實例代碼

方框實現:三行方框的排布為123，絕對定位的位置需要根據排布的要求定位。生成方框后的頁面HTML和CSS內容如下圖所示，rootPen繼承了btn-flat樣式的特性，并對部分參數重新定義。

   for (var k = 0; k < 3; k++)
   {//三行
       topsize = 150*k;
       leftsize = 600 - 65*k;
       for (var j = 0; j < k+1; j++)
       {//每行k+1個方框
           var divNewele = document.createElement("div");
           divNewele.className = "btn-flat rootPen"http://css文件定義樣式
           divNewele.style.position = "absolute";//頁面絕對定位  
           leftsize = leftsize+150;
           divNewele.style.left = String(leftsize)+ "px";
           divNewele.style.top = String(topsize)+ "px";
           parent.appendChild(divNewele);
       }
   }


   /* CSS方框樣式 */
     .btn-flat.rootPen {
       padding: 8px 8px 8px 1px;
         font-size: 13px;
       color: #1a2129;
         text-align: center;
         width: 80px;
         height:60px; 
       margin-top: 1%;
       background: #e6ebf3;
       border: 1px solid #d8dde4;
       box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.4) inset, 0px 1px 0px 0px #cccccc; }
       .btn-flat.rootPen:active {
         background: #e0e6ef;
         -webkit-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.3) inset;
         -moz-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.3) inset;
         box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.3) inset; }
       .btn-flat.rootPen i {
         font-size: 14px; }

連接線實現:原理與方框的實現相同，只是在樣式上有所區別，由于頁面元素一切皆以方框形式出現，那么實現連接線時我們需要修改CSS的屬性值，顯示橫線時width值為0px，顯示豎線時height值為0px。

   /* CSS畫線 */
   .line{
     border:3px solid #000000;
     margin-left:20px;
     position:absolute;
     }       
     .horLine {
       height:0px;
          }
     .verLine {
       width:0px;
          }

文本實現:在方框中顯示文本內容可在方框元素中繼續添加文本節點createTextNode。

總結

最終實現的方框拓撲圖如下所示，基于該方法的繪圖方式更側重于繪圖需求簡單，但對瀏覽器的版本兼容較寬（特別是IE8的兼容）的場合，該方法的缺陷主要為需要提前計算各元素布局的位置，并且繪制如下圖較復雜的斜線、曲線時工作量較大。另外，目前canvas對于IE8的限制，可以通過開源項目ExplorerCanvas來解決，后續會介紹如何實現。

GPU云服務器云服務器前端js驗證碼的生成人工智能一種現代的方法基于web的即時通訊基于區塊鏈技術的

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112953.html

論一種基于JS技術的WEB前端動態生成框圖的方法

摘要：前言是一種標記語言，由的標簽元素和文本編寫的文檔可被瀏覽器描述為一幅網頁。以下列舉了一些常用的對象方法，可供大家參考可登陸網站詳細查看，實現繪圖的方式主要基于這些常用的方法。前言 HTML是一種標記語言，由HTML的標簽元素和文本編寫的文檔可被瀏覽器描述為一幅網頁。通常情況下網頁的實現是由HTML、CSS和Javascript三者結合完成的，HTML負責網頁的結構，CSS渲染網頁元素...

NSFish 2019-08-01 18:19 評論0 收藏0
論一種基于JS技術的WEB前端動態生成框圖的方法

摘要：前言是一種標記語言，由的標簽元素和文本編寫的文檔可被瀏覽器描述為一幅網頁。以下列舉了一些常用的對象方法，可供大家參考可登陸網站詳細查看，實現繪圖的方式主要基于這些常用的方法。前言 HTML是一種標記語言，由HTML的標簽元素和文本編寫的文檔可被瀏覽器描述為一幅網頁。通常情況下網頁的實現是由HTML、CSS和Javascript三者結合完成的，HTML負責網頁的結構，CSS渲染網頁元素...

curlyCheng 2019-08-21 18:31 評論0 收藏0
前端開發者手冊2019

摘要：年，和前端開發者與應用程序前端開發者之間產生了巨大的分歧。開發最常見的解決方案有手機和平板的原生應用程序桌面應用程序桌面應用程序原生技術最后，前端開發者可以從瀏覽器開發中學習到，編寫代碼不需要考慮瀏覽器引擎的限制。前端開發者手冊2019 Cody Lindley 編著原文地址本手冊由Frontend Masters贊助，通過深入現代化的前端工程課程來提高你的技能。下載：PDF ...

church 2019-08-02 16:18 評論0 收藏0
前端開發者手冊2019

摘要：年，和前端開發者與應用程序前端開發者之間產生了巨大的分歧。開發最常見的解決方案有手機和平板的原生應用程序桌面應用程序桌面應用程序原生技術最后，前端開發者可以從瀏覽器開發中學習到，編寫代碼不需要考慮瀏覽器引擎的限制。前端開發者手冊2019 Cody Lindley 編著原文地址本手冊由Frontend Masters贊助，通過深入現代化的前端工程課程來提高你的技能。下載：PDF ...

xiao7cn 2019-08-26 13:47 評論0 收藏0
前端開發者手冊2019

摘要：年，和前端開發者與應用程序前端開發者之間產生了巨大的分歧。開發最常見的解決方案有手機和平板的原生應用程序桌面應用程序桌面應用程序原生技術最后，前端開發者可以從瀏覽器開發中學習到，編寫代碼不需要考慮瀏覽器引擎的限制。前端開發者手冊2019 Cody Lindley 編著原文地址本手冊由Frontend Masters贊助，通過深入現代化的前端工程課程來提高你的技能。下載：PDF ...

鄒立鵬 2019-08-30 10:56 評論0 收藏0