www日本免费,超碰欧美,欧美一区在线看

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

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

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

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

相關鏈接：

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

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

2.1 引入庫文件

我們要做的第一步，是準備一個空網頁。需要注意的是，因為我們在網頁中要使用中文，所以要設置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標簽下面多比所有的庫，這看起來有點復雜，但是沒有關系，你只要把代碼拷貝到head標簽里面就可以了。這里還加載了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 顯示一個圖

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

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

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

這其中最關鍵一點是createDiagram的參數，我們再往后面看，可以發現這是一個DOM的id。而這個DOM包含了要顯示的數據。 

<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>

以上的數據非常簡單，但是要說明幾點：

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

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

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

具體的代碼如下：

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