mxgraph中mxStencil使用教程

目錄

• 標籤巢狀關係
  • Shapes
    • shape
    • connections
    • background
    • foreground
    • 其他樣式
• 圖形內部顏色繪製
• 封閉線段繪製
• 設定一條線的顏色大小
• 樣例

官方文件：https://jgraph.github.io/mxgraph/docs/js-api/files/shape/mxStencil-js.html

標籤巢狀關係

<!--基本結構-->
<shapes>
 <shape name="linearrow" h="1" w="4" aspect="variable" strokewidth="inherit">
     <!--連線點-->
    <connections>
      <constraint x="0.5" y="0" perimeter="1" name="A" />
      <constraint x="0.5" y="1" perimeter="1" name="B" />
    </connections>
    <!--背景-->
    <background>
    </background>
    <!--前景-->
    <foreground>
    </foreground>
 </shape>
</shapes>

Shapes

相當於一個集合，裡面可以包含多個shape圖形

shape

一個shape相當於一個圖形，相關引數：

引數	解釋	型別	值
name	圖形名稱	string	自定義
w	圖形寬度	string	自定義，預設值為100
h	圖形高度	string	自定義，預設值為100
aspect	圖形比率	string	1.variable（預設值）表示調整大小圖形會以比率縮放，縮放使圖形寬高會改變 2.fixed（固定）圖形預設比率大小不能改變，縮放不會改變圖形的寬高
strokewidth	線條	string	預設值為1。"inherit"表示線條寬度僅在縮放時更改，而不是在調整大小時更改。如果使用數值，則在縮放和調整大小時都會改變線條寬度。這個引數要在後面每個線段前面加上strokewidth標籤賦值配合使用才能有效果

注意：mxStencil中圖形的座標不是按照普通x，y相對於原點來的，這裡x、y座標是以整個頁面的左上角為原點，到圖形的左上角的距離。

connections

連線點是用於和其他圖形建立連線的點，圖下藍色的小X

連線點的定義方式：

引數	解釋	值
perimeter	周長	0表示由x、y指定的連線點，1表示使連線點的位置從形狀左上角，通過x、y到與形狀周長相交的點
x、y	連線點的位置	周長為0時，x、y是相對座標最大值為1。周長為0時，由圖形座標點出發經過x、y座標最後與邊框相交
name	連線點的名稱	形狀上埠的唯一識別符號

實驗引數perimeter="0"的設定原理， 設定 兩個連線點

<constraint x="0" y="0.5" perimeter="0" name="!" />
<constraint x="1" y="0.5" perimeter="0" name="!" />

以圖形左上角為原點，(0,0)是左上角，(0,0.5)左邊中心，(1,0.5)是右邊界的中心，值可能小於0或大於1，以定位在形狀外部。

實驗引數perimeter="1"的設定原理，設定x=2.5，y=3.7,已知圖形的寬為5.7，高為7.5，那麼x、y所處的位置就是紅色方框標記，也就是改圖形的中心點，兩點連成一條線，由圖形座標點出發經過x、y座標最後與邊框相交的就是連線點的位置。

background

背景只能描繪輪廓（path），如果有填充圖形顏色，或者陰影部分只能放置前景中。

背景只能包含：筆劃（一條條的線）、矩形、圓矩形或橢圓元素。不能包括影像、文字或包含形狀

Move：用於繪製一個起點

line：用於描述終點，Move和line表示連成一條線，line的一直使用表示筆劃不中斷

 <path>
        <move x="0" y="10" />
        <line x="10" y="10" />
  </path>

  <path>
        <move x="2.79999999999991" y="0.700000000000114" />
        <line x="0.699999999999886" y="6.81676937119846E-14" />
        <line x="0.7" y="6.81676937119846E-14" />
        <line x="0.7" y="1.40000000000016" />
        <line x="0.699999999999886" y="1.40000000000016" />
        <line x="2.79999999999991" y="0.700000000000114" />
        <close />
  </path>

close：把起點和終點連起來閉合，常見於弧線，封閉圖形裡面

arc：

 <path>
        <move x="x1" y="y1" />
        <arc rx="0.7" ry="0.7" x-axis-rotation="" large-arc-flag="" sweep-flag="" x="x2" y="y2" />
</path>

• x1、y1:起點

• x2、y2:終點

• rx、ry：中心點

• x-axis-rotation：圖形旋轉角度（0~360）

• sweep-flag：弧線方向 0表示逆時針 1表示順時針

• large-arc-flag：起點和終點連成一條線做這個線的中垂線，根據中心點，就有四段弧

  這裡要講的引數是large-arc-flag（角度大小） 和sweep-flag（弧線方向），large-arc-flag決定弧線是大於還是小於180度，0表示小角度弧，1表示大角度弧。sweep-flag表示弧線的方向，0表示從起點到終點沿逆時針畫弧，1表示從起點到終點沿順時針畫弧。下面的例子展示了這四種情況。

  

• quad：二次貝塞爾曲線

• curve：三次貝塞爾曲線

foreground

前景可以包含：封閉路徑、文字等等

文字：

• str：需要顯示的文字字串。
• x、y：文字元素的十進位制位置（x，y），必需。
• align：文字元素的水平對齊，可以是“left”、“center”或“right”。可選，預設為“左”。
• valign：文字元素的垂直對齊，可以是“top”、“middle”或“bottom”。可選，預設為“top”。
• localized：0或1，如果是1，“str”實際上包含一個鍵，用於從mxResources中獲取值。可選，預設值為mxStencil.defaultLocalized。
• 垂直：0或1，如果為1，則垂直渲染標籤（旋轉90度）。可選，預設值為0。
• 旋轉角度：單位為度（0到360）。旋轉文字的角度。可選，預設值為0。
• 對齊形狀：或1，如果0，則在設定文字旋轉時忽略形狀的旋轉。可選，預設值為1。

其他樣式

在當前狀態中更改顏色的元素都採用雜湊字首的十六進位制顏色程式碼（“ffae80”）

• strokecolor，這將設定在發出筆劃或圓角命令時圖形路徑將呈現的顏色。

• fillcolor，這將設定在發出“填充”或“圓角筆劃”命令時，閉合路徑內部將呈現的顏色。

• fontcolor，這設定了在繪製文字時字型渲染的顏色。

• alpha定義了在1.0和0.0之間使用的完全不透明透明度程度，而完全透明時使用的透明度等級。

• fillalpha定義了在1.0和0.0之間使用的完全不透明填充透明度的程度，以及完全透明的0.0。

• Strokeapha定義了在1.0之間使用的完全不透明筆劃透明度的程度，以及為完全透明而使用的0.0之間的筆劃透明度。

• strokewidth定義通過撫摸渲染的圖形圖元的整數厚度。使用fixed=“1”按原樣應用該值，而不必縮放。

• dashed 為“1”，表示啟用破折號，“0”表示禁用。啟用虛線時，當前的劃線圖案（由dashpattern定義）將用於筆劃。dashpattern是一個間隔的“開，關”長度序列，定義繪製筆劃的距離，dashpattern可以設定虛線的樣式。例如：

  

字型樣式：

• fontsize，整數，
• fontstyle，一個粗體（1）、斜體（2）和下劃線（4）的ORed位模式，即粗體下劃線為“5”
• fontfamily是一個字串，定義要使用的字型

圖形內部顏色繪製

在foreground前景中繪製一段路徑path，在path前面加上fillcolor用於表示封閉路徑的顏色，最後在path後面加上fillstroke表示這是填充筆畫。

<foreground>
     <!--渲染圖形路徑的顏色-->
     <strokecolor color="#ffffff" />
     <!--填充的顏色-->
      <fillcolor color="#000000" />
      <path>
        <move x="0.61" y="1.69937846768753" />
        <arc rx="1.78938082222999" ry="1.78938082222999" x-axis-rotation="0" large-arc-flag="0" sweep-flag="1" x="4.19" y="1.69937846768753" />
      </path>
      <fillstroke />
</foreground>

封閉線段繪製

 <path>
        <move x="4.79999999999988" y="4.0998037856843" />
        <line x="2.4" y="5.26937846768752" />
        <line x="2.92038760422274" y="5.52297520382388" />
        <line x="4.79999999999988" y="6.43895314969076" />
        <line x="4.79999999999988" y="4.0998037856843" />
        <close />
  </path>

設定一條線的顏色大小

<background>
    <!--渲染圖形路徑的顏色-->
   <strokecolor color="#ffff00" />
     <!--渲染線的寬度-->
   <strokewidth width="0" />
     <!--設定線的樣式-->
   <dashed dashed="0" />
    <path>
        <move x="1.04" y="2.1" />
        <line x="1.04" y="3.59" />
    </path>
    <stroke/>
</background>

樣例

<shape aspect="variable" h="92" name="4 Point Star" strokewidth="inherit" w="92">
    <connections>
        <constraint name="N" perimeter="0" x="0.5" y="0"/>
        <constraint name="S" perimeter="0" x="0.5" y="1"/>
        <constraint name="W" perimeter="0" x="0" y="0.5"/>
        <constraint name="E" perimeter="0" x="1" y="0.5"/>
    </connections>
    <background>
        <path>
            <move x="46" y="0"/>
            <line x="56" y="36"/>
            <line x="92" y="46"/>
            <line x="56" y="56"/>
            <line x="46" y="92"/>
            <line x="36" y="56"/>
            <line x="0" y="46"/>
            <line x="36" y="36"/>
            <close/>
        </path>
    </background>
    <foreground>
        <fillstroke/>
    </foreground>
</shape>

<shape name="jcontvvncwd" h="6.46937846768753" w="4.8" aspect="variable" strokewidth="inherit">
    <connections>
      <constraint x="0" y="0.74" perimeter="1" name="!" />
      <constraint x="1" y="0.74" perimeter="1" name="!" />
    </connections>
    <background>
      <strokecolor color="#ffff00" />
      <strokewidth width="0" />
      <dashed dashed="0" />
      <path>
        <move x="0" y="6.46937846768753" />
        <line x="4.8" y="4.06937846768753" />
      </path>
      <stroke />
      <strokecolor color="#ffff00" />
      <strokewidth width="0" />
      <dashed dashed="0" />
      <path>
        <move x="4.8" y="6.46937846768753" />
        <line x="0" y="4.06937846768753" />
      </path>
      <stroke />
      <strokecolor color="#ffff00" />
      <strokewidth width="0.0200080032012812" />
      <dashed dashed="0" />
      <path>
        <move x="0" y="4.06937846768753" />
        <line x="0" y="6.46937846768753" />
      </path>
      <stroke />
      <strokecolor color="#ffff00" />
      <strokewidth width="0.0200080032012812" />
      <dashed dashed="0" />
      <path>
        <move x="0" y="4.06937846768753" />
        <line x="4.8" y="4.06937846768753" />
      </path>
      <stroke />
      <strokecolor color="#ffff00" />
      <strokewidth width="0.0200080032012812" />
      <dashed dashed="0" />
      <path>
        <move x="4.8" y="4.06937846768753" />
        <line x="4.8" y="6.46937846768753" />
      </path>
      <stroke />
      <strokecolor color="#ffff00" />
      <strokewidth width="0.0200080032012812" />
      <dashed dashed="0" />
      <path>
        <move x="0" y="6.46937846768753" />
        <line x="4.8" y="6.46937846768753" />
      </path>
      <stroke />
      <strokecolor color="#ffff00" />
      <strokewidth width="0.0200080032012812" />
      <dashed dashed="0" />
      <path>
        <move x="0" y="6.46937846768753" />
        <line x="4.8" y="4.06937846768753" />
      </path>
      <stroke />
      <strokecolor color="#ffff00" />
      <strokewidth width="0.0200080032012812" />
      <dashed dashed="0" />
      <path>
        <move x="4.8" y="4.06937846768753" />
        <line x="4.8" y="6.46937846768753" />
      </path>
      <stroke />
      <strokecolor color="#ffff00" />
      <strokewidth width="0.0200080032012812" />
      <dashed dashed="0" />
      <path>
        <move x="4.8" y="6.46937846768753" />
        <line x="0" y="4.06937846768753" />
      </path>
      <stroke />
      <strokecolor color="#ffff00" />
      <strokewidth width="0.0200080032012812" />
      <dashed dashed="0" />
      <path>
        <move x="0.61" y="1.69937846768753" />
        <line x="2.4" y="1.69937846768753" />
      </path>
      <stroke />
      <strokecolor color="#ffff00" />
      <strokewidth width="0.0200080032012812" />
      <dashed dashed="0" />
      <path>
        <move x="2.4" y="1.69937846768753" />
        <line x="4.19" y="1.69937846768753" />
      </path>
      <stroke />
      <strokecolor color="#ffff00" />
      <strokewidth width="0.0200080032012812" />
      <dashed dashed="0" />
      <path>
        <move x="2.4" y="1.69937846768753" />
        <line x="2.4" y="5.26937846768753" />
      </path>
      <stroke />
      <strokecolor color="#ffff00" />
      <strokewidth width="0" />
      <dashed dashed="0" />
      <path>
        <move x="4.8" y="4.09937846768753" />
        <line x="4.8" y="6.43937846768753" />
      </path>
      <stroke />
      <strokecolor color="#ffff00" />
      <strokewidth width="0" />
      <dashed dashed="0" />
      <path>
        <move x="0" y="4.09937846768753" />
        <line x="0" y="6.43937846768753" />
      </path>
      <stroke />
      <strokecolor color="#ffff00" />
      <strokewidth width="0" />
      <dashed dashed="0" />
      <path>
        <move x="0" y="4.09937846768753" />
        <line x="2.92" y="5.51937846768753" />
      </path>
      <stroke />
      <strokecolor color="#ffff00" />
      <strokewidth width="0" />
      <dashed dashed="0" />
      <path>
        <move x="4.8" y="4.09937846768753" />
        <line x="1.88" y="5.51937846768753" />
      </path>
      <stroke />
      <strokecolor color="#ffff00" />
      <strokewidth width="0" />
      <dashed dashed="0" />
      <path>
        <move x="2.92" y="5.51937846768753" />
        <line x="4.8" y="6.43937846768753" />
      </path>
      <stroke />
      <strokecolor color="#ffff00" />
      <strokewidth width="0" />
      <dashed dashed="0" />
      <path>
        <move x="1.88" y="5.51937846768753" />
        <line x="0" y="6.43937846768753" />
      </path>
      <stroke />
    </background>
    <foreground>
      <strokecolor color="#ffffff" />
      <fillcolor color="#000000" />
      <path>
        <move x="0.61" y="1.69937846768753" />
        <arc rx="1.78938082222999" ry="1.78938082222999" x-axis-rotation="0" large-arc-flag="0" sweep-flag="1" x="4.19" y="1.69937846768753" />
      </path>
      <fillstroke />
      <insert x="2.4" y="5.26937846768753">
      </insert>
      <fillcolor color="#ffff00" />
      <path>
        <move x="1.17239551400417E-13" y="4.0998037856843" />
        <line x="1.17239551400417E-13" y="6.43895314969076" />
        <line x="1.87961239577726" y="5.52297520382388" />
        <line x="2.4" y="5.26937846768752" />
        <line x="1.17239551400417E-13" y="4.0998037856843" />
        <close />
      </path>
      <fill />
      <fillcolor color="#ffff00" />
      <path>
        <move x="4.79999999999988" y="4.0998037856843" />
        <line x="2.4" y="5.26937846768752" />
        <line x="2.92038760422274" y="5.52297520382388" />
        <line x="4.79999999999988" y="6.43895314969076" />
        <line x="4.79999999999988" y="4.0998037856843" />
        <close />
      </path>
      <fill />
    </foreground>
</shape>