目錄

• mxgraph中mxStencil使用經驗
  • 標簽嵌套關系
    • Shapes
      • shape
      • connections
      • background
      • foreground
      • 其他樣式
      • 新增標簽
  • 圖形內部顏色繪制
  • 封閉線段繪制
  • 設置一條線的顏色大小
  • 樣例

mxgraph中mxStencil使用經驗

官方文檔：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的一直使用表示筆划不中斷

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

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

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。
• vertical：0或1，如果為1，則垂直渲染標簽（旋轉90度）。可選，默認值為0。
• rotation：單位為度（0到360）。旋轉文本的角度。可選，默認值為0。
• align-shape：或1，如果0，則在設置文本旋轉時忽略形狀的旋轉。可選，默認值為1。

其他樣式

在當前狀態中更改顏色的元素都采用哈希前綴的十六進制顏色代碼#ffae80

• strokecolor，這將設置在發出筆划或圓角命令時圖形路徑將呈現的顏色。即線條的顏色

  <strokecolor color="#000000" />
   <path>
      <move x="0" y="3.5" />
      <line x="22" y="3.5" />
   </path>
  <stroke/>
  

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

  <fillcolor color="#000000" />
        <path>
          <move x="0.61" y="1.69937846768753" />
          <arc rx="1.78" ry="1.7" x-axis-rotation="0" large-arc-flag="0" sweep-flag="1" x="4.19" y="1.6" />
        </path>
  <fillstroke />
  

  fillcolor要和fillstroke一起配合使用才有效

• fontcolor，這設置了在繪制文本時字體渲染的顏色。

  <fontcolor color="#000000" />
  <text str="RTOP" x="22.18" y="9.42" rotation="0" />
  

• 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是一個間隔的“開，關”長度序列，定義繪制筆划的距離， 就是指畫短划線的時候，第一筆長3個單位，空白1個單位，接下來長2個單位，再空5個單位，如此循環，dashpattern可以設置虛線的樣式。例如：

  

  <strokewidth width="0"/>
  <dashed dashpattern="3 1 2 5" />
    <path>
        <move x="22" y="7"/>
        <line x="0" y="7"/>
   </path>
  <stroke />
  

字體樣式：

• fontsize，整數，

• fontstyle，一個粗體（1）、斜體（2）和下划線（4）的ORed位模式，即粗體下划線為“5”

• fontfamily是一個字符串，定義要使用的字體

  <fontsize size="2" />
  <fontcolor color="#000000" />
  <text str="CONTROLNAME" x="1.63" y="6.03" rotation="0" />
  

新增標簽

1. 插入點標簽

 <insert x="1" y="0"></insert>

2. 連接點狀態

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

Inflow為0代表只能流入 1代表只能流出 2代表都可使用

圖形內部顏色繪制

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

<foreground>
     <!--渲染圖形外部路徑的顏色-->
     <strokecolor color="#000000" />
     <!--填充的顏色-->
      <fillcolor color="#00ffff" />
      <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>

第二種：是繪制了一段封閉路徑，然后給封閉路徑加上了填充顏色。

  <fillcolor color="#00ffff" />
      <path>
        <move x="2.4" y="1.08" />
        <line x="4.55186899564266" y="2.155934497821" />
        <line x="4.55186899564266" y="0.0040655021789977" />
        <line x="2.4" y="1.08" />
        <close />
      </path>
      <fill />

封閉線段繪制

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