欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2023年05月05日 10:38:08   作者：沅芷湘蘭  
這篇文章主要為大家介紹了GoJs?圖片繪圖模板Picture使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

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

go.Picture的使用

圖片地址可以是本地圖片和網(wǎng)絡(luò)地址

import pic from '../../assets/img.jpg'//本地圖片
let jj = "https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg"http://掘金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),//圖片模板的寬高,設(shè)置的width和height會轉(zhuǎn)換成desiredSize
    margin:5,//圖片模板的外邊距
    source:pic,//圖片源,可以是本地圖片,也可以是網(wǎng)絡(luò)圖片
    flip:go.GraphObject.None,//默認(rèn)顯示,或者水平、垂直反轉(zhuǎn)
    imageStretch:go. GraphObject.Fill,// 設(shè)置圖片的拉伸方式
    imageAlignment:go.spot.center,//在圖片小于當(dāng)前當(dāng)前區(qū)域時(shí)候的對齊方式
 }

width、height、desiredSize屬性

圖片模板的寬高，其優(yōu)先級以desiredSize最高，設(shè)置的width、height最后也是會轉(zhuǎn)換成desiredSize。這里的寬高的設(shè)置和go.Shape不太相同的一點(diǎn)就是，圖片不會以最短的一邊為比例基準(zhǔn)，保證圖片不失真.而是會以設(shè)置的寬高為準(zhǔn)，不考慮圖片是否失真。其他類似于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屬性是設(shè)置圖片的url，可以是任何的圖片(png,jpg等)的url。如果在加載圖片的過程中沒有設(shè)置desiredSize屬性，則會重新加載.以圖片的原始尺寸進(jìn)行展示。其url可以是本地文件的相對地址，也可以是網(wǎng)絡(luò)地址。其效果在上文中已經(jīng)展示。

flip屬性

flip屬性為圖片的反轉(zhuǎn)屬性,可以根據(jù)設(shè)置進(jìn)行不同的反轉(zhuǎn)。go.GraphObject.None為默認(rèn)展示。go.GraphObject.FlipHorizontal為水平反轉(zhuǎn)。go.GraphObject.FlipVertical為垂直反轉(zhuǎn)。go.GraphObject.FlipBoth為對角線反轉(zhuǎn).

$$(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屬性是對圖片進(jìn)行一個拉伸的操作，可以根據(jù)不同的屬性設(shè)置不同的拉伸新效果。由下圖可以看出。go.GraphObject.None屬性是直接顯示了圖片的原始尺寸，并且顯示的圖片的正中心位置。go.GraphObject.Uniform則是以窄邊(寬度)的150為基準(zhǔn)，然后保證圖片不失真并且在長邊(高度)居中。go.GraphObject.UniformToFill則是以長邊(高度)為基準(zhǔn)，也是保證圖片不失真的放大，填充到窄邊(寬度)。go.GraphObject.Fill則是設(shè)置圖片在可視區(qū)域的一個填充.圖片會被拉伸失真。

$$(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則是可以調(diào)整拉伸之后的圖片的什么部位顯示到渲染的區(qū)域。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 }),
),

拓展

前面已經(jīng)說過了幾何圖形的go.Shape模板，那么可不可以用go.Shape和go.Picture結(jié)合起來。來實(shí)現(xiàn)一個幾何圖形的圖片顯示呢?答案當(dāng)然是可以的。

$$(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',}),
)

紅色區(qū)域就是我們的幾個圖形的區(qū)域，如果在節(jié)點(diǎn)內(nèi)部我們設(shè)置我們的幾何圖形的區(qū)域的填充顏色為背景顏色，就可以實(shí)現(xiàn)裁剪出幾何圖形的圖片了。如下圖

結(jié)語

節(jié)點(diǎn)中添加圖片可以暫時(shí)是一個縮略圖，在后續(xù)可以配合點(diǎn)擊事件和彈窗的形式顯示大圖。這樣既可以讓對應(yīng)的圖片對應(yīng)在節(jié)點(diǎn)的信息之中，也可以查看圖片的具體信息。讓可視化圖形的顯示更加豐富。

以上就是GoJs 圖片繪圖模板Picture使用示例詳解的詳細(xì)內(nèi)容，更多關(guān)于GoJs Picture圖片繪圖模板的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論