国产一区二区日韩精品一区在线,2025国产福利小视频,国产日韩对

多比圖形控件（Web版）教程（二）：Html/asp/jsp繪圖的第一個例子

原創(chuàng)|使用教程|編輯：黃竹雯|2017-12-21 14:26:31.000|閱讀 608 次

概述：下面，我們以一個最簡單的例子，來說明怎么使用多比圖形控件（Web版）。這個例子只設(shè)計在網(wǎng)頁上顯示圖形，不涉及圖片的保存和更新。

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

相關(guān)鏈接：

下面，我們以一個最簡單的例子，來說明怎么使用多比圖形控件（Web版）。這個例子只設(shè)計在網(wǎng)頁上顯示圖形，不涉及圖片的保存和更新。

多比圖形控件（Web版）下載>>>

2.1 引入庫文件

我們要做的第一步，是準(zhǔn)備一個空網(wǎng)頁。需要注意的是，因為我們在網(wǎng)頁中要使用中文，所以要設(shè)置content-type為utf-8.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <title>Hello World</title>
   </head>
   <body>
   </body>
 </html>

?2.2 加載多比需要的庫文件
我們需要在head標(biāo)簽下面多比所有的庫，這看起來有點復(fù)雜，但是沒有關(guān)系，你只要把代碼拷貝到head標(biāo)簽里面就可以了。這里還加載了extjs和jquery的庫，這些是多比編輯器需要的。

<link rel="stylesheet" type="text/css" href="ext-all/resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="ext-all/resources/css/xtheme-default.css" />
    <script type="text/javascript" src="ext-all/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext-all/ext-all-debug.js"></script>
    <script type="text/javascript" src="ext-all/examples/ux/Spinner.js"></script>
  <script type="text/javascript" src="ext-all/examples/ux/SpinnerField.js"></script>
    <link rel="stylesheet" type="text/css" href="ext-all/examples/ux/css/Spinner.css" />
    <script type="text/javascript" src="duobee/colorfield/js/Ext.ux.ColorField.js"></script>
    <link rel="stylesheet" type="text/css" href="duobee/colorfield/css/Ext.ux.ColorField.css" />
    <!-- Loads and initiaizes the library -->
    <link rel="stylesheet" type="text/css" href="css/grapheditor.css" />
    <!--script type="text/javascript" src="js/new_planner.js"></script-->
   <script type="text/javascript" src="duobee/jquery-ui-1.7.2/jquery-1.3.2.js"></script>
   <script type="text/javascript" src="duobee/jquery-ui-1.7.2/ui/jquery-ui.js"></script>

2.3 顯示一個圖

我們先看看如何顯示一個最簡單的圖，如下圖所示。

要顯示一個已經(jīng)生成好的矢量圖非常簡單，只需要以下一段代碼就可以了。

$(document).ready(function() {
            Duobee.createDiagram("diagram");
});

這其中最關(guān)鍵一點是createDiagram的參數(shù)，我們再往后面看，可以發(fā)現(xiàn)這是一個DOM的id。而這個DOM包含了要顯示的數(shù)據(jù)。 

<div id="diagram" class="osdiagram">
         <dl>
            <dt>width</dt><dd>400</dd>
            <dt>height</dt><dd>300</dd>
         </dl>
         <ol>
            <li class="shape StandardShapes_Rectangle">
               <dl>
                  <dt>name</dt><dd>Rectangle-0</dd>
                  <dt>x</dt><dd>100</dd>
                  <dt>y</dt><dd>100</dd>
               </dl>
            </li> 
         </ol>
</div>

以上的數(shù)據(jù)非常簡單，但是要說明幾點：

第一格標(biāo)簽dl中的數(shù)據(jù)是是整個圖表個配置參數(shù)，
每一個圖元的定義在li中，
標(biāo)簽dl的格式是dt和dd配套，就是key-value類似的鍵值對（hash表）。

2.4 用程序增加一個圖形
我們經(jīng)常需要用到的就是利用程序給畫布添加圖形。一般遵循以下幾個步驟：

先生成一個畫布
等待畫布flash加載
利用畫布的createShape方法，產(chǎn)生一個圖形
將圖形畫在畫布上。

具體的代碼如下：

$(document).ready(function () {
    //得到一個畫圖空間
    var sa = Duobee.createDiagram("diagram");
    //等待flash加載完成
    sa.onready = function () {
        //使用jquery綁定事件
        $("#test").click(function () {
            //使用畫圖空間產(chǎn)生一個圖形
            var shape = sa.createShape("StandardShapes.Rectangle", { height: 200, width: 200 });
            //畫到畫布上
            shape.draw();
        });
    }
});