DIA如何自定形狀

作者:cschen33.tw@yahoo.com.tw
建立日期:2007/8/20

基礎
dia的自定形狀至少包含了二個檔案
shape- 定義形狀要使用XML 的SVG格式,
sheet - 集合上述不同的形狀,一樣是使用XMLl格式

目錄在C:\Documents and Settings\使用者名稱\.dia的shape,sheet
你可以使用文字編輯器(支援UTF8)
檢視不同的檔案,參考,你只要注意 不含語言及 xml:lang="zh_tw"部份其於忽略不看

1.快速建立一個自定形狀

開啟 dia,設計一個寫的DIA ,然後匯出為shape檔,這將會產生兩個檔案, 一個 .shape和 .png 檔(當成圖示).
我隨便建立一個形狀,並匯出為c1.shape,匯出時會問大小,這是指圖示的大小(在工具列顯示),不影響真正形狀的大小
請匯出到C:\Documents and Settings\使用者名稱\.dia\shape

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns="http://www.daa.com.au/~james/dia-shape-ns" xmlns:svg="http://www.w3.org/2000/svg">
  <name>shape - c1</name>
  <icon>c1.png</icon>
  <connections/>
  <aspectratio type="fixed"/>
  <svg:svg>
    <svg:path style="fill: #ffffff" d="M 8.35 5.4 C 9.35,5.4 13.65,6.7 8.25,6.6 C 2.85,6.5 7.35,5.4 8.35,5.4z"/>
    <svg:path style="fill: none; fill-opacity:0; stroke-width: 0.1; stroke: #000000" d="M 8.35 5.4 C 9.35,5.4 13.65,6.7 8.25,6.6 C 2.85,6.5 7.35,5.4 8.35,5.4"/>
  </svg:svg>
</shape>
將<name>中的shape改為custom(註:name 是一個重要的key將shape檔關連到sheet檔,因此名稱要完全相同)
建立sheet檔案 本範例中稱 custom.sheet. 其內容是:
<?xml version="1.0" encoding="utf-8"?>
<sheet xmlns="http://www.lysator.liu.se/~alla/dia/dia-sheet-ns">
     <name>custom</name>
    <description>custom shape</description>
    <contents>
        <object name="custom - c1">
             <description>測試1</description>
        </object>
     </contents>
</sheet> 

當有多個 shape時， 只要在 object中多加入一個就可以了,設好之後, 然後重新啟動 Dia,新的物件將會顯示在 sheets列表.

#如果沒有顯示,可能是你的XML的語法有問題

2.說明
參考自dia網站上的文件說明
自定形狀模組
===================
使用XML檔案來描述形狀.

正確的形狀是使用SVG的格式. line, polyline, polygon, rect, circle, ellipse,path 和 g 支援元件e.  
注意路徑元件只支援包含M,m,L,l,H,h,V,v,C,c,S,s,Z 和 z 命令.
不支援變型和 CSS 單位,並且只有支援有限的CSS集合

一個文字text box可以關連到形狀.  自定的形狀碼將確定文字輸入會合乎其形狀的大小.  
文字text box的單位和形狀相同.
#文字盒的位置,請參考其形狀描述的位置,否則其位置會很奇怪


形狀
======

一個典型的形狀看起來如下:
  <?xml version="1.0"?>

  <shape xmlns="http://www.daa.com.au/~james/dia-shape-ns"
         xmlns:svg="http://www.w3.org/2000/svg">
    <name>Circuit - NPN Transistor</name>
    <icon>npn.xpm</icon>
    <connections>
      <point x="0" y="0"/>
      <point x="6" y="-4"/>
      <point x="6" y="4"/>
    </connections>

    <aspectratio type="fixed"/>

    <svg:svg width="3.0" height="3.0">
      <svg:line x1="0" y1="0" x2="3" y2="0" />
      <svg:line x1="3" y1="-3" x2="3" y2="3" />
      <svg:line x1="3" y1="-2" x2="6" y2="-4" />
      <svg:line x1="3" y1="2" x2="6" y2="4" />

      <svg:polyline points="5,4 6,4 5.6154,3.0769" />
    </svg:svg>
  </shape>

name和svg標籤是必須的
name是ID在載入和儲存時使用.

圖示icon指定一個 xpm或其它圖檔來使用在工具列的圖示. 
檔名是關連到形狀檔. 如果你沒有給則會使用預設的檔案.

connections 指定形狀的連接點. 座標系同svg形狀說明.

aspectratio 可以讓你指定變形. 有三種可能性是:
  <aspectratio type="free"/>    任何比列是OK的(預設)
  <aspectratio type="fixed"/>   固定比列.
  <aspectratio type="range" min="n" max="m"/>  指定某一範圍

最後的選項可以讓你指定某一數量的扭曲, 在某些狀況下很有用.

文字框(textbox) (不顯示)可以讓你將文字關連到形狀.  語法是:
  <textbox x1="left" y1="top" x2="right" y2="bottom"/>
這裏參數是指定邊界,座標系同SVG 形狀說明.注意:最後是/>

svg 標籤說明形狀.寬度和高度的參數是被忽略,並且只遵守的 SVG 規格.  更多的資訊在SVG, 請看 W3C 頁面相關說明:
  http://www.w3.org/Graphics/SVG/

下一節有關於SVG的規格可以使用在形狀檔的明細.


形狀說明
=====================

Scalable Vector Graphics(SVG) 格式用在這個形狀.

每一個 SVG 標籤的屬性. 屬性應該如下的格式:
  <svg:whatever style="name1: value1; name2: value2; ... name42: value42"/>

目前只有下面樣式屬性是可以使用:
  stroke-width - 線的寬度,相對使用者指定的寬度.
  stroke-linecap    - 線端點. 其中一個 butt, round, square,
                      projecting (a synonym for square), 或預設.
  stroke-linejoin   - 線連接格式. 其中一個 miter, round, bevel 或預設.
  stroke-pattern    - dash 樣本.  其中一個none, dashed, dash-dot,
                      dash-dot-dot, dotted 或預設.
  stroke-dashlength - 破折號的長度在dash 樣本的, 在相對於使用者選擇的值(預設是synonym for 1.0).

  stroke       - 筆觸的顏色.  你可以前景顏色 fg, 預設值, 背景, bg 相反,
                 文字或沒有, 或使用16進位的顏色值格式 #rrggbb.
  fill         - 填入顏色. 相同的值如描邊,
                 除了default 的意義外inverse 是交換.  預設不會填入顏色, 如果要填入顏色請使用"fill: default"

所以要繪製一個使用hairline的筆觸的方形, 下面使用技巧:
  <svg:rect style="stroke-width: 0" x="..." y="..." width="..." height="..."/>
被認出的繪製元件是:
<svg:g>
  群組元件.  你可以放置其它的元件在其中. 在群組元件的樣式將會繁殖到包含的元件(除非它被蓋寫).

<svg:line x1="..." y1="..." x2="..." y2="..."/>
  元件是線.

<svg:polyline points="...."/>
  這是一個折線.  That is, a number of connected line segments.
  The points attribute holds the coordinates of the end points for the
  line segments.  座標分開是使用空白鍵或逗號.  
  建議的格式是 "x1,y1 x2,y2 x3,y3 ...".

<svg:polygon points="...."/>
  多邊形.點的參數如同折線.

<svg:rect x1="..." y1="..." x2="..." y2="..."/>
  這是一個方形.  左上角是(x1,y1),右下角 (x2,y2).

<svg:circle cx="..." cy="..." r="..."/>
  圓形的圓心是 (cx,cy) 半徑是 r.

<svg:ellipse cx="..." cy="..." rx="..." ry="..."/>
  橢圓,圓心(cx, cy) 它的半徑rx 在 x 方向
  且 ry 在 y 方向.

<svg:path d="...."/>
  這是最複雜的繪製的元件.  它說明了一個路徑扮演line segments和bezier curves. 它目前
  支援elliptic arc 或quadratic bezier curves.  d 字串扮演數字命令由"x arg1 arg2 ..."
  這裏 x 是字元代碼是命令,而參數是使用空白或是逗號分開.每一個命令有一個絕對或相對的差異. .

  支援的命令是:
    M x,y                 移動游標
    L x,y                 繪製線到(x,y)
    H x                   繪製水平線到 x
    V y                   繪製垂直線到 y
    C x1,y1 x2,y2, x3,y3  繪製bezier 曲線由 (x3,y3)到 (x1,y1) 和 (x2,y2) 為控制點.
    S x1,y1 x2,y2         同上, 但是繪製`平滑' bezier.也就是, 推斷第一第一個控制點由前面的bezier.
    Z                     關閉路徑.

  如果路徑關閉使用 z 或 Z, 然後它可被填滿.