GoJs 圖片繪圖模板Picture使用示例詳解

Posted on by

前言

前面已經說過瞭通過go.TextBlock(文本)和go.Shape(集合圖形)來豐富節點內部的顯示內容。而有些時候需要在節點內部上傳一些說明材料，恰好這些材料又是圖片材料。如果拿圖片和節點信息對照觀看的話，一一對照會特別麻煩.如果能夠在節點內部顯示縮略圖的話。在信息對應上就會特別清晰。

go.Picture的使用

圖片地址可以是本地圖片和網絡地址

import pic from '../../assets/img.jpg'//本地圖片
let jj = "https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg"//掘金logo圖片
$$(go.Picture,{ margin:5,source:jj }),
$$(go.Picture,{ width: 107, height: 22,margin:5,source:jj }),
$$(go.Picture,{ width: 200, height: 200,margin:5,source:pic }),

go.Picture的屬性

{ 
    width: 200,//圖片模板的寬度
    height: 200,//圖片模板的高度
    desiredSize: new go.Size(200, 300),//圖片模板的寬高,設置的width和height會轉換成desiredSize
    margin:5,//圖片模板的外邊距
    source:pic,//圖片源,可以是本地圖片,也可以是網絡圖片
    flip:go.GraphObject.None,//默認顯示,或者水平、垂直反轉
    imageStretch:go. GraphObject.Fill,// 設置圖片的拉伸方式
    imageAlignment:go.spot.center,//在圖片小於當前當前區域時候的對齊方式
 }

width、height、desiredSize屬性

圖片模板的寬高，其優先級以desiredSize最高，設置的width、height最後也是會轉換成desiredSize。這裡的寬高的設置和go.Shape不太相同的一點就是，圖片不會以最短的一邊為比例基準，保證圖片不失真.而是會以設置的寬高為準，不考慮圖片是否失真。其他類似於margin之類的通用屬性則是正常生效

$$(go.Picture,{ width: 200, height: 200,margin:5,source:pic }),
$$(go.Picture,{ width: 100, height: 200,margin:5,source:pic }),
$$(go.Picture,{ width: 200, height: 100,margin:5,source:pic }),

source屬性

source屬性是設置圖片的url，可以是任何的圖片(png,jpg等)的url。如果在加載圖片的過程中沒有設置desiredSize屬性，則會重新加載.以圖片的原始尺寸進行展示。其url可以是本地文件的相對地址，也可以是網絡地址。其效果在上文中已經展示。

flip屬性

flip屬性為圖片的反轉屬性,可以根據設置進行不同的反轉。go.GraphObject.None為默認展示。go.GraphObject.FlipHorizontal為水平反轉。go.GraphObject.FlipVertical為垂直反轉。go.GraphObject.FlipBoth為對角線反轉.

$$(go.Picture,{ width: 200, height: 200,margin:5,source:pic,flip:go.GraphObject.None }),
$$(go.Picture,{ width: 200, height: 200,margin:5,source:pic,flip:go.GraphObject.FlipHorizontal }),
$$(go.Picture,{ width: 200, height: 200,margin:5,source:pic,flip:go.GraphObject.FlipVertical }),
$$(go.Picture,{ width: 200, height: 200,margin:5,source:pic,flip:go.GraphObject.FlipBoth }),

imageStretch、imageAlignment屬性

imageStretch屬性是對圖片進行一個拉伸的操作，可以根據不同的屬性設置不同的拉伸新效果。由下圖可以看出。go.GraphObject.None屬性是直接顯示瞭圖片的原始尺寸，並且顯示的圖片的正中心位置。go.GraphObject.Uniform則是以窄邊(寬度)的150為基準，然後保證圖片不失真並且在長邊(高度)居中。go.GraphObject.UniformToFill則是以長邊(高度)為基準，也是保證圖片不失真的放大，填充到窄邊(寬度)。go.GraphObject.Fill則是設置圖片在可視區域的一個填充.圖片會被拉伸失真。

$$(go.Picture,{ width: 150, height: 200,margin:5,source:pic,imageStretch:go.GraphObject.None }),
$$(go.Picture,{ width: 150, height: 200,margin:5,source:pic,imageStretch:go.GraphObject.Uniform }),
$$(go.Picture,{ width: 150, height: 200,margin:5,source:pic,imageStretch:go.GraphObject.UniformToFill }),
$$(go.Picture,{ width: 150, height: 200,margin:5,source:pic,imageStretch:go.GraphObject.Fill }),

而imageAlignment則是可以調整拉伸之後的圖片的什麼部位顯示到渲染的區域。go.Spot.Top是顯示居上。go.Spot.Center是顯示居中。go.Spot.Bottom是顯示居下。go.Spot.Left是顯示居左。go.Spot.Right是顯示居右。

$$(go.Panel,"Horizontal",
    $$(go.Shape,"Rectangle",{ width: 150, height: 200,margin:5,stroke:"#FF9900",fill:null}),
    $$(go.Shape,"Rectangle",{ width: 150, height: 200,margin:5,stroke:"#FF9900",fill:null}),
    $$(go.Shape,"Rectangle",{ width: 150, height: 200,margin:5,stroke:"#FF9900",fill:null}),
    $$(go.Shape,"Rectangle",{ width: 200, height: 150,margin:5,stroke:"#FF9900",fill:null}),
    $$(go.Shape,"Rectangle",{ width: 200, height: 150,margin:5,stroke:"#FF9900",fill:null}),
    $$(go.Shape,"Rectangle",{ width: 200, height: 150,margin:5,stroke:"#FF9900",fill:null}),
),
$$(go.Panel,"Horizontal",
    $$(go.Picture,{ width: 150, height: 200,margin:5,source:pic,imageStretch:go.GraphObject.Uniform,imageAlignment:go.Spot.Top }),
    $$(go.Picture,{ width: 150, height: 200,margin:5,source:pic,imageStretch:go.GraphObject.Uniform,imageAlignment:go.Spot.Center }),
    $$(go.Picture,{ width: 150, height: 200,margin:5,source:pic,imageStretch:go.GraphObject.Uniform,imageAlignment:go.Spot.Bottom }),
    $$(go.Picture,{ width: 200, height: 150,margin:5,source:pic,imageStretch:go.GraphObject.Uniform,imageAlignment:go.Spot.Left }),
    $$(go.Picture,{ width: 200, height: 150,margin:5,source:pic,imageStretch:go.GraphObject.Uniform,imageAlignment:go.Spot.Center }),
    $$(go.Picture,{ width: 200, height: 150,margin:5,source:pic,imageStretch:go.GraphObject.Uniform,imageAlignment:go.Spot.Right }),
),

拓展

前面已經說過瞭幾何圖形的go.Shape模板，那麼可不可以用go.Shape和go.Picture結合起來。來實現一個幾何圖形的圖片顯示呢?答案當然是可以的。

$$(go.Panel,"Spot",
    $$(go.Picture,{ desiredSize: new go.Size(200, 200),source:pic }),
    $$(go.Shape,{ width: 200, height: 200,stroke:"#FF9900",fill:"red",geometryString: 'f M0 0 L100 0 L100 100 L0 100 z M5,50a45,45 0 1,0 90,0a45,45 0 1,0 -90,0 z',}),
)

紅色區域就是我們的幾個圖形的區域，如果在節點內部我們設置我們的幾何圖形的區域的填充顏色為背景顏色，就可以實現裁剪出幾何圖形的圖片瞭。如下圖

結語

節點中添加圖片可以暫時是一個縮略圖，在後續可以配合點擊事件和彈窗的形式顯示大圖。這樣既可以讓對應的圖片對應在節點的信息之中，也可以查看圖片的具體信息。讓可視化圖形的顯示更加豐富。

以上就是GoJs 圖片繪圖模板Picture使用示例詳解的詳細內容，更多關於GoJs Picture圖片繪圖模板的資料請關註WalkonNet其它相關文章！

推薦閱讀：