SVG控制元件
# Smart 控制元件使用(SVG)
以下組中包含用於顯示SVG圖形相關的控制元件。
# 1. TRSSVGDocument
此控制元件為SVG圖形的顯示控制元件提供訪問庫。可通過在此控制元件的FileName
屬性中指定SVG檔案的目錄地址,或者在Lines
屬性中引入SVG文字來實現引入的功能。
# 1.1. 屬性
屬性 | 功能說明 |
---|---|
DefaultAspectRatio | 定義 SVG 的預設縱橫比。如果 SVG 中未使用preserveAspectRatio 屬性對縱橫比進行指定,則 SVG 將使用此預設值的縱橫比來顯示圖形。 |
DefaultColorInterpolation | 設定SVG圖形使用的預設顏色插值演算法型別,可使用漸變顏色插值或者Alpha通道合成顏色空間 |
DefaultColorRendering | 指定SVG圖形預設的顏色渲染型別,向SVG庫提供有關如何優化其顏色插值和合成操作的提示 |
DefaultShapeRendering | 預設形狀渲染型別,它向 SVG 庫提供了有關在渲染向量圖形元素(例如路徑元素)和基本形狀(例如圓形和矩形)時要進行哪些權衡的提示 |
DefaultTextRendering | 預設文字渲染型別,它向 SVG 庫提供有關在渲染文字時進行哪些權衡的提示 |
DPI | 用於計算將字串長度轉換為實際值的單位係數的每英吋點數,DPI 應該在載入 SVG 之前設定。例如,如果輸入字串包含「1cm」,則 DPI 可幫助 SVG 庫計算出一釐米有多大 |
EmbedSVGAsBinary | 是否將SVG文件作為二進制嵌入到表單中。將 EmbedSVGABinary 設定為 true 以將 SVG 作為二進制嵌入到表單中。 與使用 RSSVGCtrls.TRSSVGDocument.Lines 屬性或從檔案載入 SVG 相比,將 SVG 嵌入為二進制通常允許更快的表單初始化 |
Filename | 定義要在設計時和運行時載入的 SVG 文件的檔名。使用 RSSVGCtrls.TRSSVGDocument.EmbedSVGABinary 屬性將 SVG 作為二進制數據嵌入到表單中。使用 RSSVGCtrls.TRSSVGDocument.Lines 屬性將 SVG 作為 XML 文字載入和嵌入 |
Lines | 定義要載入的 SVG 的 XML 文字。 使用 RSSVGCtrls.TRSSVGDocument.EmbedSVGABinary 屬性將 SVG 作為二進制數據嵌入到表單中。使用 RSSVGCtrls.TRSSVGDocument.Lines 屬性將 SVG 作為 XML 文字載入和嵌入 |
Options | 定義用於讀取、顯示和寫入文件的選項 |
PreferredLanguage | 指定用於 SVG 的首選語言。 |
# 1.1.1. DefaultAspectRatio
property DefaultAspectRatio: TSVGPreserveAspectRatio;
定義 SVG 的預設縱橫比。如果 SVG 中未使用preserveAspectRatio
屬性對縱橫比進行指定,則 SVG 將使用此預設值的縱橫比來顯示圖形。其中使用到的屬性如下:
- Align:指示是否強制統一縮放。有以下型別的選項:
saNone
:不使用強制統一縮放。saXMaxYMax
:使用強制統一縮放。將元素viewBox
的<min-x>+<width>
取值與控制元件可視視窗的最大值X對齊。將元素viewBox
的<min-y>+<height>
取值與控制元件可視視窗的最大值Y對齊。saXMaxYMid
:使用強制統一縮放。將元素viewBox
的<min-x>+<width>
取值與控制元件可視視窗的最大值X對齊。將元素viewBox
的<min-y>
取值與控制元件可視視窗的中點Y值對齊。saXMaxYMin
:使用強制統一縮放。將元素viewBox
的<min-x>+<width>
取值與控制元件可視視窗的最大值X對齊。將元素viewBox
的<min-y>
取值與控制元件可視視窗的最小值Y對齊。saXMidYMax
:使用強制統一縮放。將元素viewBox
的中點X值與控制元件可視視窗中的中點X值對齊。將元素viewBox
的<min-y>+<height>
取值與控制元件可視視窗的最大值Y對齊。saXMidYMid
:使用強制統一縮放。將元素viewBox
的中點X值與控制元件可視視窗中的中點X值對齊。將元素viewBox
的中點Y值與控制元件可視視窗中的中點Y值對齊。saXMidYMin
:使用強制統一縮放。將元素viewBox
的中點X值與控制元件可視視窗中的中點X值對齊。將元素viewBox
的<min-y>
取值與控制元件可視視窗的最小值Y對齊。saXMinYMax
:使用強制統一縮放。將元素viewBox
的<min-x>
取值與控制元件可視視窗的最小值X對齊。將元素viewBox
的<min-y>+<height>
取值與控制元件可視視窗的最大值Y對齊。saXMinYMid
:使用強制統一縮放。使用強制統一縮放。將元素viewBox
的<min-x>
取值與控制元件可視視窗的最小值X對齊。將元素viewBox
的<min-y>
取值與控制元件可視視窗的中點Y值對齊。saXMinYMin
:使用強制統一縮放。使用強制統一縮放。將元素viewBox
的<min-x>
取值與控制元件可視視窗的最小值X對齊。將元素viewBox
的<min-y>
取值與控制元件可視視窗的最小值Y對齊。
- Defer:設定縱橫比與 TSVGImage 元素一起使用時的效果。 如果此項屬性設定為 true,則會使用SVG中定義的
preserveAspectRatio
屬性(如果存在)。 如果引用的SVG中缺少preserveAspectRatio
屬性的值,則按照正常的其他規則來處理preserveAspectRatio
屬性(即忽略Defer
屬性的設定)。 對於其他SVG元素上的preserveAspectRatio
,不會使用此屬性。 - Slice:設定圖形是否為拉伸覆蓋。
# 1.1.2. DefaultColorInterpolation
property DefaultColorInterpolation: TSVGColorInterpolation;
設定SVG圖形使用的預設顏色插值演算法型別,可使用漸變顏色插值或者Alpha通道合成顏色空間。有以下選項可選擇:
名稱 | 說明 |
---|---|
sciAuto | 表示使用者可以選擇sRGB或linearRGB的顏色空間進行顏色插值。 此選項表示不需要指定特定的顏色空間中進行顏色插值 |
sciLinearRGB | 指定在linearRGB顏色空間中進行顏色插值 |
sciNone | 不使用顏色空間插值 |
sciSRGB | 指定在sRGB顏色空間中進行顏色插值 |
# 1.1.3. DefaultColorRendering
property DefaultColorRendering: TSVGColorRendering;
預設顏色渲染型別,它向 SVG 庫提供有關如何優化其顏色插值和合成操作的提示,有以下選項可選擇。
名稱 | 說明 |
---|---|
clrnAuto | 自動選擇,以平衡顏色渲染速度和質量,兩者之間會偏向注重質量 |
clrnNone | 不設定顏色渲染型別 |
clrnOptimizeQuality | 更加註重顏色渲染的質量而不是渲染速度 |
clrnOptimizeSpeed | 更加註重渲染速度而非質量 |
# 1.1.4. DefaultShapeRendering
property DefaultShapeRendering: TSVGShapeRendering;
指定預設形狀渲染型別,它向 SVG 庫提供了在渲染向量圖形元素(例如路徑元素)和基本形狀(例如圓形和矩形)時要進行哪些權衡的提示。
名稱 | 說明 |
---|---|
srnAuto | 進行適當的權衡以平衡速度、邊緣清晰度和幾何精度,但幾何精度比速度和邊緣清晰度更重要 |
srnCrispEdges | 更加註重邊緣清晰度,而不是渲染速度和幾何精度 |
srnGeometricPrecision | 更加註重幾何精度,而不是速度和邊緣清晰度 |
srnNone | 無特別權衡的專案 |
srnOptimizeSpeed | 更加註重渲染速度,而不是幾何精度、邊緣清晰度,無抗鋸齒 |
# 1.1.5. DefaultTextRendering
property DefaultTextRendering: TSVGTextRendering;
預設文字渲染型別,它向 SVG 庫提供有關在渲染文字時進行哪些權衡的提示。
名稱 | 說明 |
---|---|
txrnAuto | 進行適當的設定以平衡速度、易讀性和幾何精度,但易讀性比速度和幾何精度更重要 |
txrnGeometricPrecision | 更加註重幾何精度而不是易讀性和渲染速度 |
txrnNone | 無特別權衡的專案 |
txrnOptimizeLegibility | 更加註重易讀性而不是渲染速度和幾何精度 |
txrnOptimizeSpeed | 更加註重渲染速度而不是易讀性和幾何精度 |
# 1.1.6. DPI
property DPI: Integer;
目前屬性用於將字串長度轉換為單位英吋包含的畫素點數,DPI 應該在載入 SVG 之前設定。例如,如果輸入字串包含「1cm」,則 DPI 可幫助 SVG庫計算出一釐米有多大。
# 1.1.7. EmbedSVGAsBinary
property EmbedSVGAsBinary: Boolean;
此屬性用於設定是否將SVG文件作為二進制嵌入到表單中。此屬性設定為true時,將SVG作為二進制嵌入到表單中。 與單使用 Lines
屬性或單從FilName
屬性載入 SVG 相比,將 SVG 嵌入為二進制可以使表單更快實現初始化效果。
# 1.1.8. FileName
property Filename: String;
定義要在設計時和運行時載入的 SVG 文件的檔名。
# 1.1.9. Lines
property Lines: TStrings;
定義要載入的 SVG 的 XML 文字。
# 1.1.10. Options
property Options: TSVGOptions;
定義用於讀取、顯示和寫入文件的選項。包含以下選項:
名稱 | 說明 |
---|---|
soApplyClipping | 設定是否為繪圖使用剪下路徑 |
soCompactExport | 設定導出SVG時,是否只導出非繼承類屬性 |
soEnforceUniqueID | 為SVG元素強制應用唯一ID除非引發異常。如果此選項不存在,SVG文件將產生唯一ID(可能會破壞 URI)以確保保留唯一性 |
soExportDisabled | 設定導出 SVG 時,是否導出禁用元素和啟用元素 |
soExportOptimizedBinaryStyleProperties | 設定導出二進制 SVG 時,優化樣式屬性集(繼承和首選樣式)的流式傳輸方式 |
soExportUnknownXML | 設定導出SVG時,是否導出未知的svg/xml元素 |
soFMXRadialGradientPatch | 設定此項以獲得最佳質量 |
soSkipUnknownXML | 設定在載入 XML 時,跳過未知節點,否則在載入時會引發異常 |
soUseFillText | 在繪製文字元素時,是否使用 FillText(更快但不太相容),如果設定為False,在繪製文字元素時會將文字轉換為路徑並使用 FillPath(更慢但更相容) |
soUseLocaleForLanguage | 使用系統區域設定語言顯示元素(適用於 Switch SVG 元素) |
# 1.1.11. PreferredLanguage
property PreferredLanguage: String;
設定指定用於 SVG 的首選語言。不同的語言之間使用,
進行分隔。
# 1.2. 事件
事件 | 何時觸發 |
---|---|
OnAddStyle | 當樣式新增至文件時觸發事件 |
OnDisableAppearance | 在禁用元素即將被繪製到畫布之前觸發事件 |
OnDrawing | 在繪製目前元素及其子元素之前觸發事件 |
OnDraw | 在繪製 SVG 元素之後觸發事件 |
OnParsedNode | 解析 SVG 元素的子元素之後觸發事件。當載入並解析 SVG 元素及其所有子元素時,會發生此事件 |
OnParsingNode | 解析 SVG 元素的子元素之前觸發事件。當一個 SVG 元素已經被解析為它自己的屬性但在它的任何子元素被載入和解析之前,這個事件發生 |
OnRemoveStyle | 從文件中提取或刪除樣式時觸發事件 |
# 1.3. 方法
# 1.3.1. LoadSVGFromStrings
procedure LoadSVGFromStrings( const Lines: TStrings );
從TStrings
參數中獲取SVG。
# 1.4. 用法
一個 SVG 文件元件可以作為多個 TRSSVGImage 控制元件的數據提供者。 例如,如果 SVG 文件包含一副完整的卡片,您可以使用 SVGRoot 屬性為每張卡片設定多個 TRSSVGImage 控制元件。使用 TRSSVGDocument.Lines
屬性將您的 SVG 文件「捆綁」到應用程式中。
在設計階段,可使用以下方式來使用:
- 在窗體中放置一個
TRSSVGDocument
元件。 - 設定
TRSSVGDocument
元件的FileName
屬性,指定為SVG檔案,也可以在Lines
屬性中輸入SVG的數據資訊。 - 在窗體中放置一個
TRSSVGImage
元件。 - 設定
TRSSVGImage
元件的SVGDocument
屬性為TRSSVGDocument
的名稱。
或者,如果您只想顯示 SVG 文件的一個分支,您可以將 TRSSVGImage.SVGRoot
屬性設定為您想要顯示的 SVG 元素。 如果 SVGRoot 不為空並且它不等於文件中的任何 SVG 元素,則不會顯示任何內容。
# 2. TRSSVGPanel
此控制元件提供一個面板,用於為 SVG 產生設計時或運行時對象。 與 TRSSVGImage 元件不同,TRSSVGPanel 元件不使用畫布操作繪製 SVG。 相反,它產生 控制元件來繪製 SVG。TRSSVGPanel 在功能和與 SVG 規範的相容性方面受到更多限制。 限制包括不能剪裁、旋轉和縮放的控制元件可能會被剪裁。 建議僅在經過測試的 SVG 圖形上使用 TRSSVGPanel 以防止錯誤。
# 2.1. 屬性
屬性 | 功能說明 |
---|---|
ScaleOriginal | 指定用於繪製 SVG 的比例。使用 ScaleOriginal 屬性可以在控制元件內放大或縮小 SVG。 這對於控制平鋪 SVG 或放大或縮小 SVG 很有用 |
SVGDocument | 指定要在控制元件中顯示的SVG文件的名稱。SVGDocument和SVGRootID屬性精確控制要顯示的SVG文件和SVG文件層次結構分支 |
SVGRootID | 指定將 SVGDocument 中的某個節點繪製為頂級 SVG 文件。使用 SVGRootID 屬性可僅顯示 SVGDocument 中的一部分內容 |
WrapMode | 指定是否調整SVG圖形,以及設定如何調整影象大小、複製和定位SVG影象以呈現在控制元件中 |
# 2.1.1. ScaleOriginal
property ScaleOriginal: Single;
指定用於繪製 SVG 的比例。使用 ScaleOriginal 屬性可以在 TRSSVGImage 元件內放大或縮小 SVG。 這對於控制平鋪 SVG 或放大或縮小 SVG 很有用。
# 2.1.2. SVGDocument
property SVGDocument: TRSSVGDocument;
指定要在控制元件中顯示的SVG文件的名稱。SVGDocument和SVGRootID屬性精確控制要顯示的SVG文件和SVG文件層次結構分支。
# 2.1.3. SVGRootID
property SVGRootID: String;
指定將 SVGDocument 中的某個節點繪製為頂級 SVG 文件。使用 SVGRootID 屬性可僅顯示 SVGDocument 中的一部分內容。
# 2.1.4. WrapMode
property WrapMode: TSVGImageWrapMode
指定是否調整SVG圖形,以及設定如何調整影象大小、複製和定位SVG影象以呈現在TRSSVGImage中。
iwOriginal
: 以原始尺寸顯示 SVG。iwFit
: TRSSVGImage 矩形的最佳擬合(保持 SVG 比例 - 寬度和高度之間的比率)。此項為預設設定項。iwStretch
:拉伸SVG以填充TRSSVGImage元件的整個矩形。iwTile
:平鋪 TRSSVGImage 影象以覆蓋 TRSSVGImage 元件的整個矩形。iwCenter
: 將 SVG 在 TRSSVGImage 元件內居中。
# 2.2. 事件
事件 | 何時觸發 |
---|---|
OnGenerateControl | 為SVG元素產生控制元件時觸發的事件,在為SVG元素建立和初始化控制元件之後,使用OnGenerateControl事件來修改它。 |
# 2.3. 方法
# 2.3.1. ClearSVGDocument
procedure ClearSVGDocument;
此方法用於清除SVGDocument
屬性而不刪除 SVG 元素。
# 2.3.2. FindControl
function FindControl(SVGID: String): TControl;
返回具有等於SVGID
屬性的參數名稱的面板子控制元件。
# 3. TRSSVGImage
TRSSVGImage可用於顯示SVG的圖形影象。 該控制元件在縮放控制元件時通過重新繪製SVG來確保影象始終具有最高解析度。
使用 TRSSVGImage在表單上顯示 SVG 的圖形影象。 使用SVGDocument和SVGRootID屬性來控制影象中顯示的SVG。 TRSSVGImage引入了幾個屬性來確定如何在TRSSVGImage對象的邊界內顯示SVG。
# 3.1. 屬性
屬性 | 功能說明 |
---|---|
Buffered | 指定是否將SVG繪製到後臺緩衝區,然後將該影象複製到前臺(預設設定)還是直接在前臺繪製SVG圖形 |
FindOptions | 此屬性用於幫助控制元件確定哪個svg元素位於滑鼠游標處 |
Opacity | 指定SVG影象的不透明度。如果Opacity小於1,則SVG顯示為半透明。 如果 Opacity為 0,則不顯示SVG |
Quality | 控制SVG影象的TRSSVGImage.Buffered 繪畫的質量。 質量值可以取值于1(低)到 8(非常高) |
ScaleQriginal | 指定用於繪製 SVG 的比例。使用 ScaleOriginal 屬性可以在 TRSSVGImage 元件內放大或縮小 SVG。 這對於控制平鋪 SVG 或放大或縮小 SVG 很有用 |
SVGDocument | 指定要在控制元件中顯示的SVG文件的名稱。SVGDocument和SVGRootID屬性精確控制要顯示的SVG文件和SVG文件層次結構分支 |
SVGRootID | 指定將 SVGDocument 中的某個節點繪製為頂級 SVG 文件。使用 SVGRootID 屬性可僅顯示 SVGDocument 中的一部分內容 |
Transform | 指定要應用於SVG影象的整體轉換模式 |
WrapMode | 指定是否調整SVG圖形,以及設定如何調整影象大小、複製和定位SVG影象以呈現在控制元件中 |
# 3.1.1. Buffered
property Buffered: Boolean;
此屬性用於指定是否將SVG繪製到後臺緩衝區,然後將該影象複製到前臺(預設設定)還是直接在前臺繪製SVG圖形 。當 Opacity 小於 1 或平鋪 SVG 時,緩衝功能將始終處於啟用狀態。
# 3.1.2. FindOptions
property FindOptions: TSVGFindOptions
此屬性用於幫助控制元件確定哪個svg元素位於滑鼠游標處。
名稱 | 說明 |
---|---|
foFindDisabled | 當此選項存在時,搜索演算法將檢測禁用的 (TSVGElement.Enabled=False) 元素以及啟用的元素。當此選項不存在時,搜索演算法將只檢測啟用的元素 |
foFindGroups | 是否將分組與SVG作為元素查詢。如果此選項不存在,則只能找到組的子項,而不是組本身 |
foFindHiddenElements | 是否查詢隱藏的元素。當這個選項存在時,仍然可以找到不可見的元素 |
foFindNonFilled | 當此選項存在時,搜索演算法會將具有Brush.Kind = None 的svg元素視為沒有孔的實體對象。當此選項不存在時,帶有 Brush.Kind = None 的 svg 元素將被視為「空心」,並且只會檢測元素輪廓上的點 |
foFindNoRecursion | 當此選項存在時,查詢演算法將不會嘗試查詢元素的子元素 |
foUseBoundingBox | 當此選項存在時,使用它們的邊界框查詢元素(更快但不太準確)。當此選項不存在時,按形狀查詢元素(更慢但更準確) |
# 3.1.3. Opacity
property Opacity: Single;
此屬性用於指定SVG影象的不透明度。如果Opacity小於1,則SVG顯示為半透明。 如果 Opacity為 0,則不顯示SVG。
# 3.1.4. Quality
property Quality: Integer;
此屬性控制SVG影象的TRSSVGImage.Buffered
繪畫的質量。 質量值可以取值于1(低)到 8(非常高)。
# 3.1.5. ScaleQriginal
property ScaleOriginal: Single;
指定用於繪製 SVG 的比例。使用 ScaleOriginal 屬性可以在 TRSSVGImage 元件內放大或縮小 SVG。 這對於控制平鋪 SVG 或放大或縮小 SVG 很有用。
# 3.1.6. SVGDocument
property SVGDocument: TRSSVGDocument;
指定要在控制元件中顯示的SVG文件的名稱。SVGDocument和SVGRootID屬性精確控制要顯示的SVG文件和SVG文件層次結構分支。
# 3.1.7. SVGRootID
property SVGRootID: String;
指定將 SVGDocument 中的某個節點繪製為頂級 SVG 文件。使用 SVGRootID 屬性可僅顯示 SVGDocument 中的一部分內容。
# 3.1.8. Transform
property Transform: TRSTransform;
指定要應用於SVG影象的整體轉換模式。
# 3.1.9. WrapMode
property WrapMode: TSVGImageWrapMode
指定是否調整SVG圖形,以及設定如何調整影象大小、複製和定位SVG影象以呈現在TRSSVGImage中。
iwOriginal
: 以原始尺寸顯示 SVG。iwFit
: TRSSVGImage 矩形的最佳擬合(保持 SVG 比例 - 寬度和高度之間的比率)。此項為預設設定項。iwStretch
:拉伸SVG以填充TRSSVGImage元件的整個矩形。iwTile
:平鋪 TRSSVGImage 影象以覆蓋 TRSSVGImage 元件的整個矩形。iwCenter
: 將 SVG 在 TRSSVGImage 元件內居中。
# 3.2. 事件
事件 | 何時觸發 |
---|---|
OnClickElement | 在控制元件中單擊滑鼠時發生。 Element參數指定滑鼠游標下的元素,如果滑鼠下沒有元素,則為nil。TRSSVGImage.FindOptions 屬性指定控制元件如何確定滑鼠游標下的 svg 元素。 |
# 3.3. 方法
# 3.3.1. GetOpacity
function GetOpacity: Single;
返回控制元件的不透明度。
# 3.3.2. IsBuffered
function IsBuffered: Boolean;
如果應該將 SVG 繪製到螢幕外點陣圖,則返回 True。
# 3.3.3. SetOpacity
procedure SetOpacity(const Value: Single);
設定控制元件的不透明度。 如果 Opacity 小於 1,則 SVG 顯示為半透明。 如果 Opacity 為 0,則不顯示 SVG。
# 4. TRSSVGImageList
定義一個完全由 SVG 組成的 TImageList,以實現對不同螢幕解析度和密度的緊湊圖形支援。
TImageList 元件表示一組相同大小的影象,每個影象都可以通過其索引引用。 它可以在影象列表的 Width 和 Height 發生變化時重新產生點陣圖。
TRSSVGImageList.Items 屬性包含影象列表中的 SVG 列表。也可在設計模式下,右鍵點選此控制元件,在功能表中選擇[Edit SVG Image List...]
來打開界面進行新增。
# 4.1. 屬性
屬性 | 功能說明 |
---|---|
ColorDepth | 指定儲存的圖形的顏色位深度,預設為32位 |
Height | 指定影象列表中圖片的高度 |
Items | 定義影象列表中的 SVG 集合,用於為其他控制元件提供影象列表使用的影象 |
MasterImageList | 指定用於為影象列表提供主SVG影象列表。 如果 MasterImageList 不為 nil,則目前控制元件中的TRSSVGImageList.Items 為空,SVG 由 MasterImageList 提供。 |
Quality | 控制 SVG 影象繪製的採樣質量。 質量值可以在 1(預設質量)到 8(最佳質量) 之間變化 |
Width | 指定影象列表中圖片的寬度 |
# 4.1.1. ColorDepth
property ColorDepth default cd32Bit;
指定儲存的圖形的顏色位深度,預設為32位。
# 4.1.2. Height
property Height: Integer;
指定影象列表中圖片的高度。
# 4.1.3. Items
property Items: TSVGCollection;
定義影象列表中的 SVG 集合,用於為其他控制元件提供影象列表使用的影象。
# 4.1.4. MasterImageList
property MasterImageList: TRSSVGImageList;
此屬性指定用於為影象列表提供主SVG影象列表。 如果 MasterImageList 不為 nil,則目前控制元件中的TRSSVGImageList.Items
為空,SVG 由 MasterImageList 提供。。 如果 MasterImageList 為 nil,則 Items 屬性為影象提供 SVG。
# 4.1.5. Quality
property Quality: Integer;
控制 SVG 影象繪製的過採樣質量。 質量值可以在 1(預設質量)到 8(最佳質量) 之間變化。此屬性控制在緩衝繪圖中執行的過採樣量。 其取值為螢幕外緩衝區的尺寸乘以屬性值。 在繪製控制元件時,對螢幕外緩衝區進行下采樣,提供緩衝繪圖的抗鋸齒特性。 如果 Quality 為 1,則使用預設的 GDI+ 質量來繪製 SVG,這會使繪圖結果趨於平滑。 如果您想要更清晰的結果,請增大屬性的取值。
# 4.1.6. Width
property Width: Integer;
指定影象列表中圖片的寬度。
# 5. TRSSVGScreen
TRSSVGScreen 控制元件用於顯示 SVG 的圖形影象。 該控制元件通過在重新縮放控制元件時重新繪製 SVG 來確保影象始終具有最高解析度。
使用 TRSSVGScreen 在表單上顯示 SVG 的圖形影象。 使用 SVGDocument 和 SVGRootID 屬性來控制影象中顯示的 SVG。 TRSSVGScreen 引入了幾個屬性來確定如何在 TRSSVGScreen 對象的邊界內顯示 SVG。
# 5.1. 屬性
屬性 | 功能說明 |
---|---|
Buffered | 指定是否將SVG繪製到後臺緩衝區,然後將該影象複製到前臺(預設設定)還是直接在前臺繪製SVG圖形 |
FindOptions | 此屬性用於幫助控制元件確定哪個svg元素位於滑鼠游標處 |
Opacity | 指定SVG影象的不透明度。如果Opacity小於1,則SVG顯示為半透明。 如果 Opacity為 0,則不顯示SVG |
Quality | 控制SVG影象的Buffered 繪畫的質量。 質量值可以取值于1(低)到 8(非常高) |
ScaleQriginal | 指定用於繪製 SVG 的比例。使用 ScaleOriginal 屬性可以在 TRSSVGImage 元件內放大或縮小 SVG。 這對於控制平鋪 SVG 或放大或縮小 SVG 很有用 |
SVGDocument | 指定要在控制元件中顯示的SVG文件的名稱。SVGDocument和SVGRootID屬性精確控制要顯示的SVG文件和SVG文件層次結構分支 |
SVGRootID | 指定將 SVGDocument 中的某個節點繪製為頂級 SVG 文件。使用 SVGRootID 屬性可僅顯示 SVGDocument 中的一部分內容 |
Transform | 指定要應用於SVG影象的整體轉換模式 |
WrapMode | 指定是否調整SVG圖形,以及設定如何調整影象大小、複製和定位SVG影象以呈現在控制元件中 |
# 5.1.1. Buffered
property Buffered: Boolean;
此屬性用於指定是否將SVG繪製到後臺緩衝區,然後將該影象複製到前臺(預設設定)還是直接在前臺繪製SVG圖形 。當 Opacity 小於 1 或平鋪 SVG 時,緩衝功能將始終處於啟用狀態。
# 5.1.2. FindOptions
property FindOptions: TSVGFindOptions
此屬性用於幫助控制元件確定哪個svg元素位於滑鼠游標處。
名稱 | 說明 |
---|---|
foFindDisabled | 當此選項存在時,搜索演算法將檢測禁用的 (TSVGElement.Enabled=False) 元素以及啟用的元素。當此選項不存在時,搜索演算法將只檢測啟用的元素 |
foFindGroups | 是否將分組與SVG作為元素查詢。如果此選項不存在,則只能找到組的子項,而不是組本身 |
foFindHiddenElements | 是否查詢隱藏的元素。當這個選項存在時,仍然可以找到不可見的元素 |
foFindNonFilled | 當此選項存在時,搜索演算法會將具有Brush.Kind = None 的svg元素視為沒有孔的實體對象。當此選項不存在時,帶有 Brush.Kind = None 的 svg 元素將被視為「空心」,並且只會檢測元素輪廓上的點 |
foFindNoRecursion | 當此選項存在時,查詢演算法將不會嘗試查詢元素的子元素 |
foUseBoundingBox | 當此選項存在時,使用它們的邊界框查詢元素(更快但不太準確)。當此選項不存在時,按形狀查詢元素(更慢但更準確) |
# 5.1.3. Opacity
property Opacity: Single;
此屬性用於指定SVG影象的不透明度。如果Opacity小於1,則SVG顯示為半透明。 如果 Opacity為 0,則不顯示SVG。
# 5.1.4. Quality
property Quality: Integer;
此屬性控制SVG影象的Buffered
繪畫的質量。 質量值可以取值于1(低)到 8(非常高)。
# 5.1.5. ScaleQriginal
property ScaleOriginal: Single;
指定用於繪製 SVG 的比例。使用 ScaleOriginal 屬性可以在元件內放大或縮小 SVG。 這對於控制平鋪 SVG 或放大或縮小 SVG 很有用。
# 5.1.6. SVGDocument
property SVGDocument: TRSSVGDocument;
指定要在控制元件中顯示的SVG文件的名稱。SVGDocument和SVGRootID屬性精確控制要顯示的SVG文件和SVG文件層次結構分支。
# 5.1.7. SVGRootID
property SVGRootID: String;
指定將 SVGDocument 中的某個節點繪製為頂級 SVG 文件。使用 SVGRootID 屬性可僅顯示 SVGDocument 中的一部分內容。
# 5.1.8. Transform
property Transform: TRSTransform;
指定要應用於SVG影象的整體轉換模式。
# 5.1.9. WrapMode
property WrapMode: TSVGImageWrapMode
指定是否調整SVG圖形,以及設定如何調整影象大小、複製和定位SVG影象以呈現在控制元件中。
iwOriginal
: 以原始尺寸顯示 SVG。iwFit
: 控制元件矩形的最佳擬合(保持 SVG 比例 - 寬度和高度之間的比率)。此項為預設設定項。iwStretch
:拉伸SVG以填充控制元件的整個矩形。iwTile
:平鋪 TRSSVGImage 影象以覆蓋控制元件的整個矩形。iwCenter
: 將 SVG 在控制元件內居中。
# 5.2. 事件
事件 | 何時觸發 |
---|---|
OnClickElement | 在控制元件中單擊滑鼠時發生。 Element 參數指定滑鼠游標下的元素,如果滑鼠下沒有元素,則為 nil。FindOptions 屬性指定控制元件如何確定滑鼠游標下的 svg 元素。 |
# 5.3. 方法
# 5.3.1. GetOpacity
function GetOpacity: Single;
返回控制元件的不透明度。
# 5.3.2. IsBuffered
function IsBuffered: Boolean;
如果要將 SVG 繪製到螢幕外的點陣圖緩衝區中,則返回 True。
# 5.3.3. SetOpacity
procedure SetOpacity(const Value: Single);
設定控制元件的不透明度。 如果 Opacity 小於 1,則 SVG 顯示為半透明。 如果 Opacity 為 0,則不顯示 SVG。
# 6. TRSSVGThreadImage
TRSSVGThreadImage 顯示 SVG 的圖形影象。 該控制元件通過在重新縮放控制元件時重新繪製 SVG 來確保影象始終具有最高解析度。
使用 TRSSVGThreadImage 在表單上顯示 SVG 的圖形影象。 使用 Filename 或 Lines 屬性來控制影象中顯示的 SVG。
在TRSSVGThreadImage中預置了一個目錄用於放置預設或者自定義的SVG圖形列表。其目錄位於Smart安裝目錄中的resources/images/svg
中,所有的SVG圖形按照資料夾進行分組放置。通過雙擊控制元件來打開SVG相簿,進行圖片的選擇。
# 6.1. 屬性
屬性 | 功能說明 |
---|---|
DefaultAspectRatio | 定義 SVG 的預設縱橫比。如果 SVG 中未使用preserveAspectRatio 屬性對縱橫比進行指定,則 SVG 將使用此預設值的縱橫比來顯示圖形。 |
DefaultColorInterpolation | 設定SVG圖形使用的預設顏色插值演算法型別,可使用漸變顏色插值或者Alpha通道合成顏色空間 |
DefaultColorRendering | 指定SVG圖形預設的顏色渲染型別,向SVG庫提供有關如何優化其顏色插值和合成操作的提示 |
DefaultShapeRendering | 預設形狀渲染型別,它向 SVG 庫提供了有關在渲染向量圖形元素(例如路徑元素)和基本形狀(例如圓形和矩形)時要進行哪些權衡的提示 |
DefaultTextRendering | 預設文字渲染型別,它向 SVG 庫提供有關在渲染文字時進行哪些權衡的提示 |
DPI | 用於計算將字串長度轉換為實際值的單位係數的每英吋點數,DPI 應該在載入 SVG 之前設定。例如,如果輸入字串包含「1cm」,則 DPI 可幫助 SVG 庫計算出一釐米有多大 |
Filename | 定義要在設計時和運行時載入的 SVG 文件的檔名。 |
FindOptions | 此屬性用於幫助控制元件確定哪個svg元素位於滑鼠游標處。 |
Lines | 定義要載入的 SVG 文字。 當您不想從具有 Filename 屬性的檔案載入 SVG 時,Lines 屬性非常有用 |
Opacity | 指定 SVG 影象的不透明度。 如果 Opacity 小於 1,則 SVG 顯示為半透明。 如果 Opacity 為 0,則不顯示 SVG |
Options | 定義用於讀取、顯示和寫入文件的選項 |
ScaleOriginal | 設定 SVG 的縮放比例,使用 ScaleOriginal 屬性在控制元件內放大或縮小 SVG。 這對於控制平鋪 SVG 或放大或縮小 SVG 很有用 |
SVGRootID | 指定將 SVGDocument 的哪個節點繪製為頂級 SVG 文件。使用 SVGRootID 屬性僅顯示 SVGDocument 的一部分。 |
Transform | 指定要應用於 SVG 影象的整體轉換。 |
WrapMode | 指定是否以及如何調整大小、複製和定位 SVG 影象以呈現在控制元件表面。 |
# 6.1.1. DefaultAspectRatio
property DefaultAspectRatio: TSVGPreserveAspectRatio;
定義 SVG 的預設縱橫比。如果 SVG 中未使用preserveAspectRatio
屬性對縱橫比進行指定,則 SVG 將使用此預設值的縱橫比來顯示圖形。其中使用到的屬性如下:
- Align:指示是否強制統一縮放。有以下型別的選項:
saNone
:不使用強制統一縮放。saXMaxYMax
:使用強制統一縮放。將元素viewBox
的<min-x>+<width>
取值與控制元件可視視窗的最大值X對齊。將元素viewBox
的<min-y>+<height>
取值與控制元件可視視窗的最大值Y對齊。saXMaxYMid
:使用強制統一縮放。將元素viewBox
的<min-x>+<width>
取值與控制元件可視視窗的最大值X對齊。將元素viewBox
的<min-y>
取值與控制元件可視視窗的中點Y值對齊。saXMaxYMin
:使用強制統一縮放。將元素viewBox
的<min-x>+<width>
取值與控制元件可視視窗的最大值X對齊。將元素viewBox
的<min-y>
取值與控制元件可視視窗的最小值Y對齊。saXMidYMax
:使用強制統一縮放。將元素viewBox
的中點X值與控制元件可視視窗中的中點X值對齊。將元素viewBox
的<min-y>+<height>
取值與控制元件可視視窗的最大值Y對齊。saXMidYMid
:使用強制統一縮放。將元素viewBox
的中點X值與控制元件可視視窗中的中點X值對齊。將元素viewBox
的中點Y值與控制元件可視視窗中的中點Y值對齊。saXMidYMin
:使用強制統一縮放。將元素viewBox
的中點X值與控制元件可視視窗中的中點X值對齊。將元素viewBox
的<min-y>
取值與控制元件可視視窗的最小值Y對齊。saXMinYMax
:使用強制統一縮放。將元素viewBox
的<min-x>
取值與控制元件可視視窗的最小值X對齊。將元素viewBox
的<min-y>+<height>
取值與控制元件可視視窗的最大值Y對齊。saXMinYMid
:使用強制統一縮放。使用強制統一縮放。將元素viewBox
的<min-x>
取值與控制元件可視視窗的最小值X對齊。將元素viewBox
的<min-y>
取值與控制元件可視視窗的中點Y值對齊。saXMinYMin
:使用強制統一縮放。使用強制統一縮放。將元素viewBox
的<min-x>
取值與控制元件可視視窗的最小值X對齊。將元素viewBox
的<min-y>
取值與控制元件可視視窗的最小值Y對齊。
- Defer:設定縱橫比與 TSVGImage 元素一起使用時的效果。 如果此項屬性設定為 true,則會使用SVG中定義的
preserveAspectRatio
屬性(如果存在)。 如果引用的SVG中缺少preserveAspectRatio
屬性的值,則按照正常的其他規則來處理preserveAspectRatio
屬性(即忽略Defer
屬性的設定)。 對於其他SVG元素上的preserveAspectRatio
,不會使用此屬性。 - Slice:設定圖形是否為拉伸覆蓋。
# 6.1.2. DefaultColorInterpolation
property DefaultColorInterpolation: TSVGColorInterpolation;
設定SVG圖形使用的預設顏色插值演算法型別,可使用漸變顏色插值或者Alpha通道合成顏色空間。有以下選項可選擇:
名稱 | 說明 |
---|---|
sciAuto | 表示使用者可以選擇sRGB或linearRGB的顏色空間進行顏色插值。 此選項表示不需要指定特定的顏色空間中進行顏色插值 |
sciLinearRGB | 指定在linearRGB顏色空間中進行顏色插值 |
sciNone | 不使用顏色空間插值 |
sciSRGB | 指定在sRGB顏色空間中進行顏色插值 |
# 6.1.3. DefaultColorRendering
property DefaultColorRendering: TSVGColorRendering;
預設顏色渲染型別,它向 SVG 庫提供有關如何優化其顏色插值和合成操作的提示,有以下選項可選擇。
名稱 | 說明 |
---|---|
clrnAuto | 自動選擇,以平衡顏色渲染速度和質量,兩者之間會偏向注重質量 |
clrnNone | 不設定顏色渲染型別 |
clrnOptimizeQuality | 更加註重顏色渲染的質量而不是渲染速度 |
clrnOptimizeSpeed | 更加註重渲染速度而非質量 |
# 6.1.4. DefaultShapeRendering
property DefaultShapeRendering: TSVGShapeRendering;
指定預設形狀渲染型別,它向 SVG 庫提供了在渲染向量圖形元素(例如路徑元素)和基本形狀(例如圓形和矩形)時要進行哪些權衡的提示。
名稱 | 說明 |
---|---|
srnAuto | 進行適當的權衡以平衡速度、邊緣清晰度和幾何精度,但幾何精度比速度和邊緣清晰度更重要 |
srnCrispEdges | 更加註重邊緣清晰度,而不是渲染速度和幾何精度 |
srnGeometricPrecision | 更加註重幾何精度,而不是速度和邊緣清晰度 |
srnNone | 無特別權衡的專案 |
srnOptimizeSpeed | 更加註重渲染速度,而不是幾何精度、邊緣清晰度,無抗鋸齒 |
# 6.1.5. DefaultTextRendering
property DefaultTextRendering: TSVGTextRendering;
預設文字渲染型別,它向 SVG 庫提供有關在渲染文字時進行哪些權衡的提示。
名稱 | 說明 |
---|---|
txrnAuto | 進行適當的設定以平衡速度、易讀性和幾何精度,但易讀性比速度和幾何精度更重要 |
txrnGeometricPrecision | 更加註重幾何精度而不是易讀性和渲染速度 |
txrnNone | 無特別權衡的專案 |
txrnOptimizeLegibility | 更加註重易讀性而不是渲染速度和幾何精度 |
txrnOptimizeSpeed | 更加註重渲染速度而不是易讀性和幾何精度 |
# 6.1.6. DPI
property DPI: Integer;
目前屬性用於將字串長度轉換為單位英吋包含的畫素點數,DPI 應該在載入 SVG 之前設定。例如,如果輸入字串包含「1cm」,則 DPI 可幫助 SVG庫計算出一釐米有多大。
# 6.1.7. FileName
property Filename: String;
定義要在設計時和運行時載入的 SVG 文件的檔名。
# 6.1.8. FindOptions
property FindOptions: TSVGFindOptions;
此屬性用於幫助控制元件確定哪個svg元素位於滑鼠游標處。
名稱 | 說明 |
---|---|
foFindDisabled | 當此選項存在時,搜索演算法將檢測禁用的 (TSVGElement.Enabled=False) 元素以及啟用的元素。當此選項不存在時,搜索演算法將只檢測啟用的元素 |
foFindGroups | 將組或視口作為元素查詢。如果此選項不存在,則只能找到組的子項,而不是組本身 |
foFindHiddenElements | 找到隱藏的元素。當這個選項存在時,仍然可以找到不可見的元素 |
foFindNonFilled | 當此選項存在時,搜索演算法會將具有 Brush.Kind = None 的 svg 元素視為沒有孔的實體對象。當此選項不存在時,帶有 Brush.Kind = None 的 svg 元素將被視為「空心」,並且只會檢測元素輪廓上的點 |
foFindNoRecursion | 當此選項存在時,查詢演算法將不會嘗試查詢元素的子元素 |
foUseBoundingBox | 當此選項存在時,使用它們的邊界框查詢元素(更快但不太準確)。當此選項不存在時,按形狀查詢元素(更慢但更準確) |
# 6.1.9. Lines
property Lines: TStrings;
定義要載入的 SVG 的 XML 文字。當您不想從具有 Filename 屬性的檔案載入 SVG 時,Lines 屬性非常有用。
# 6.1.10. Opacity
property Opacity: Single;
指定 SVG 影象的不透明度或透明度。 如果 Opacity 小於 1,則 SVG 顯示為半透明。 如果 Opacity 為 0,則不顯示 SVG。
# 6.1.11. Options
property Options: TSVGOptions;
定義用於讀取、顯示和寫入文件的選項。包含以下選項:
名稱 | 說明 |
---|---|
soApplyClipping | 為繪圖應用剪下路徑 |
soCompactExport | 導出SVG時,只導出非繼承屬性 |
soEnforceUniqueID | 為 SVG 元素強制執行唯一 ID 或引發異常。如果此選項不存在,SVG 文件將產生唯一 ID(可能會破壞 URI)以確保保留唯一性 |
soExportDisabled | 導出 SVG 時,導出禁用元素和啟用元素 |
soExportOptimizedBinaryStyleProperties | 導出二進制 SVG 時,優化樣式屬性集(繼承和首選樣式)的流式傳輸方式。優化集合流的速度要快得多,因為它會流出樣式屬性列舉值的序數值。但是,如果樣式屬性列舉的順序將來發生變化,您可能會載入不正確的結果 |
soExportUnknownXML | 導出SVG時,導出未知的svg/xml元素 |
soFMXRadialGradientPatch | 設定 Gradient.Transform 屬性以獲得最佳渲染質量 |
soSkipUnknownXML | 載入 XML 時跳過未知節點或在載入時觸發異常 |
soUseFillText | 繪製文字元素時,使用 FillText(更快但不太相容)或將文字轉換為路徑並使用 FillPath(更慢但更相容) |
soUseLocaleForLanguage | 使用系統區域設定語言顯示元素(適用於 Switch SVG 元素)(僅限 Windows) |
# 6.1.12. ScaleQriginal
property ScaleOriginal: Single;
指定用於繪製 SVG 的比例因子。使用 ScaleOriginal 屬性在 TRSSVGImage 元件內放大或縮小 SVG。 這對於控制平鋪 SVG 或放大或縮小 SVG 很有用。
# 6.1.13. SVGRootID
property SVGRootID: String;
指定將 SVGDocument 的哪個節點繪製為頂級 SVG 文件。使用 SVGRootID 屬性僅顯示 SVGDocument 的一部分。
# 6.1.14. Transform
property Transform: TRSTransform;
指定要應用於 SVG 影象的整體轉換。
# 6.1.15. WrapMode
property WrapMode: TSVGImageWrapMode
指定是否調整SVG圖形,以及設定如何調整影象大小、複製和定位SVG影象以呈現在控制元件中。
iwOriginal
: 以原始尺寸顯示 SVG。iwFit
: 控制元件矩形的最佳擬合(保持 SVG 比例 - 寬度和高度之間的比率)。此項為預設設定項。iwStretch
:拉伸SVG以填充控制元件的整個矩形。iwTile
:平鋪 TRSSVGImage 影象以覆蓋控制元件的整個矩形。iwCenter
: 將 SVG 在控制元件內居中。
# 6.2. 事件
事件 | 何時觸發 |
---|---|
OnClickElement | 在控制元件中單擊滑鼠時發生。 Element 參數指定滑鼠游標下的元素,如果滑鼠下沒有元素,則為 nil。FindOptions 屬性指定控制元件如何確定滑鼠游標下的 svg 元素。 |
# 6.3. 方法
# 6.3.1. GetOpacity
function GetOpacity: Single;
返回控制元件的不透明度。
# 6.3.2. SetOpacity
procedure SetOpacity(const Value: Single);
設定控制元件的不透明度。 如果 Opacity 小於 1,則 SVG 顯示為半透明。 如果 Opacity 為 0,則不顯示 SVG。
# 7. TRSSVGText
為 SVG 文字元素定義 TText。 當爲 SVG 產生 對像時使用這個類(不是使用 TRSSVGImage 元件直接繪製它們),它提供對 SVG 元素的控制元件訪問。
# 7.1. 屬性
屬性 | 功能說明 |
---|---|
SVGID | 產生此控制元件的 SVG 元素名稱 |
SVGText | 設定文字顯示的屬性資訊 |
# 7.1.1. SVGID
property SVGID: String;
指定產生此控制元件的SVG元素名稱。
# 7.1.2. SVGText
property SVGText: TSVGText;
設定文字顯示的屬性資訊。
# 8. TRSSVGPath
為 SVG 影象元素定義路徑控制元件。 當爲 SVG 產生控制元件時使用這個類(不是使用 TRSSVGImage 元件直接繪製它們),它提供對 SVG 元素的控制元件訪問。
# 8.1. 屬性
屬性 | 功能說明 |
---|---|
SVGID | 產生此控制元件的 SVG 元素名稱 |
# 8.1.1. SVGID
property SVGID: String;
產生此控制元件的 SVG 元素名稱。
# 9. TRSSVGLayout
為 SVG 組元素定義佔位符控制元件。 當爲 SVG 產生控制元件對像時使用這個類(而不是使用 TRSSVGImage 元件直接繪製它們),它提供對 SVG 元素的控制元件訪問。
# 9.1. 屬性
屬性 | 功能說明 |
---|---|
SVGID | 產生此控制元件的 SVG 元素名稱 |
# 9.1.1. SVGID
property SVGID: String;
產生此控制元件的 SVG 元素名稱。
# 10. TSVGThreadImage
該控制元件實現的功能與TRSSVGThreadImage相同,其功能為對SVG列表中的內容進行輪播。下面介紹其新增的屬性。
# 10.1. 屬性
屬性 | 功能說明 |
---|---|
SVGImgList | 設定顯示輪播圖形使用的影象列表控制元件名稱 |
Interval | 設定輪播的時間間隔,以ms為單位 |
ThreadEnabled | 設定是否啟用圖片輪播的功能 |
# 10.1.1. SVGImgList
property SVGImgList: TRSSVGImageList;
此屬性用於設定顯示輪播圖形使用的影象列表控制元件的名稱。
# 10.1.2. Interval
property Interval: Integer;
此屬性用於設定圖片輪播的時間間隔,以ms為單位。
# 10.1.3. ThreadEnabled
property ThreadEnabled: Boolean;
此屬性用於設定是否啟用圖片的輪播功能。