主頁 > .NET開發 > 【WPF學習】第四十四章 圖畫

【WPF學習】第四十四章 圖畫

2020-09-11 05:22:56 .NET開發

  通過上一章的學習,Geometry抽象類表示形狀或路徑,Drawing抽象類扮演了互補的角色,它表示2D圖畫(Drawing)——換句話說,它包含了顯示矢量影像或位圖需要的所有資訊,

  盡管有幾類畫圖類,但只有GeometryDrawing類能使用已經學習過的幾何圖形,它增加了決定如何繪制圖形的畫筆和填充細節,可將GeometryDrawing物件視為矢量插圖中的形狀,例如,可將標準的視窗元檔案格式(.wmf)轉換成準備插入用戶界面的GeometryDrawing物件的集合,

  分析一個簡單的示例有幫助的,前面已經看到了如何定義表示三角形的PathGeometry物件:

<PathGeometry>
     <PathFigure IsClosed="True" StartPoint="0,100">
            <LineSegment Point="100,100"/>
             <LineSegment Point="100,50"/>
     </PathFigure>
</PathGeometry>

  可使用PathGeometry物件創建GeometryDrawing物件,如下所示:

<GeometryDrawing  Brush="Yellow" >
            <GeometryDrawing.Pen>
                <Pen Brush="Blue" Thickness="3"></Pen>
            </GeometryDrawing.Pen>
            <GeometryDrawing.Geometry>
                <PathGeometry>
                    <PathFigure IsClosed="True" StartPoint="10,100">
                        <LineSegment Point="100,100" />
                        <LineSegment Point="100,50" />
                    </PathFigure>
                </PathGeometry>
            </GeometryDrawing.Geometry>
</GeometryDrawing>

  現在,PathGeometry物件定義了形狀(三角形),GeometryDrawing物件定義了形狀的外觀(具有藍色邊界的黃色三角形),PathGeometry物件和GeometryDrawing物件都不是元素,所以不能直接使用這兩個物件中的任何一個為視窗添加自己繪制的內容,而需要使用另一個支持圖畫的類,

  GeometryDrawing類不是WPF總唯一的圖畫類(盡管當使用2D矢量圖形時,該類是最相關的一個類),實際上,Drawing類用于表示所有型別的2D圖形,并且還有一個小組類繼承自該類,下表列出了所有這些類,

表 圖畫類

 

 一、顯示圖畫

  因為繼承自Drawing的類不是元素,所以不能將它們放置到用戶界面中,為了顯示圖畫,需要使用下表列出的三個類中的一個,

表 用于顯示圖畫的類

 

   所有這些類中都存在通用主題,非常簡單,它們提供了使用更少系統資源顯示2D內容的方法,

  例如,假如希望使用矢量影像為按鈕創建圖表,最簡單的方法(也是占用資源最多的方法)是在按鈕中放置Canvas控制元件,并在Canvas控制元件中放置一系列繼承自Shape類的元素:

<Button ...>
    <Canvas ...>
        <Polyline ...>
        <Polyline ...>
        <Rectangle ...>
        <Ellipse ...>
        <Polygon ...>
    </Canvas>
</Button>

  現在已經知道,如果是使用這種方法,每個元素都是完全獨立的,具有自己的記憶體區域和事件處理程式等,一個更好的減少元素數量的方法是Path元素,因為每個路徑具有單獨的筆畫和填充,所以仍需要大量Path物件,不過這還是能夠在一定程度上減少元素數量:

<Button ...>
    <Canvas ...>
        <Path ...>
        <Path ...>
        ...
    </Canvas>
 </Button>

  一旦開始使用Path元素,就將獨立形狀變換為不同的幾何圖形,可從路徑中提取幾何圖形、筆畫以及填充資訊并將它們轉換成圖畫,從而再增加一個抽象層,然后可在DrawingGroup物件中將這些圖畫融合在一起,并將DrawingGroup物件放置到DrawingImage物件中,DrawingImage物件又可被放入到Image元素中,下面是這一程序創建的新標記:

<Button ...>
    <Image ...>
        <Image.Source>
            <DrawingImage>
                <DrawingImage.Drawing>
                    <DrawingGroup>
                        <GeometryDrawing ...>
                        <GeometryDrawing ...>
                        <GeometryDrawing ...>
                        ...
                    </DrawingGroup>
                </DrawingImage.Drawing>
            </DrawingImage>
        </Image.Source>
    </Image>
</Button>

  這是一次意義重大的改變,該例并沒有簡化標記,只是用GeometryDrawing物件代替了每個Path物件,然而,由于減少了元素的數量,因此降低了所需的開銷,在前面的示例中創建了包含在按鈕中的Canvas控制元件,并為每個路徑添加了單獨的元素,但該例只需要一個嵌套的元素:位于按鈕中的Image元素,付出的代價是不能再為每個不同的路徑處理事件(例如,不能探測滑鼠在圖畫中獨立區域的單擊操作),但在用于按鈕的靜態影像中,未必需要使用這種功能,

  盡管使用DrawingImage物件已經節省了大量資源,但仍可進一步提高效率,借助于Drawing洗掉另一個元素,

  基本思想是在DrawingBrush物件中的封裝DrawingImage物件,如下所示:

<Button ...>
    <Button.Background>
        <DrawingBrush>
            <DrawingBrush.Drawing>
                <DrawingGroup>
                    <GeometryDrawing ...>
                    <GeometryDrawing ...>
                    <GeometryDrawing ...>
                    <....>
                </DrawingGroup>
            </DrawingBrush.Drawing>
        </DrawingBrush>
    </Button.Background>
</Button>

  DrawingBrush方法和前面介紹的DrawingImage方法不完全相同,因為Image元素改變其內容的默認方式是不同的,Image.Stretch屬性的默認值是Uniform,該設定會為了適應可用空間而放大或縮小影像,DrawingBrush.Stretch屬性的默認值是Fill,該設定可能會扭曲影像,

  當改變DrawingBrush的Stretch屬性時,為明確扭曲填充區域中圖畫的位置和尺寸,也可能希望調整Viewport設定,例如,下面的標記縮放由圖畫畫刷使用的圖畫,以占用填充區域的90%:

<DrawinBrush Stretch="Fill" Viewport="0,0 0.9,0.9">

  對于按鈕示例這是非常有用的,因為可為按鈕周圍的邊框留出一定的空間,因為DrawingBrush并非元素,所以不能使用WPF布局程序,這意味著和Image元素不同,DrawingBrush中的內容放置不會考慮Button.Paddin屬性值,

  使用DrawingBrush方式的一個古怪問題是,將滑鼠移到按鈕上時內容會消失,并且會使用一個新畫刷繪制按鈕表面,但當使用Image方式時,圖片就不受影響,為了解決這個問題,需要為按鈕創建自定義按鈕控制元件模板,該模板使用不同的方式繪制按鈕的背景,

  無論是在DrawingImage本身中使用圖形,還是使用DrawingBrush封裝圖形,都應當考慮使用資源分解標記,基本思想是作為不同資源定義每個DrawingImage或DrawingBrush物件,從而當需要時就可以參考定義的物件,如果希望在多個元素或視窗中顯示相同的內容,這是特別好的思想,因為只需要重用資源,而不必復制整塊標記,如下面的示例所示:

<Window x:Class="Drawing.Drawings"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Drawings" Height="300" Width="300">
    <Window.Resources>
        <GeometryDrawing x:Key="Drawing" Brush="Yellow" >
            <GeometryDrawing.Pen>
                <Pen Brush="Blue" Thickness="3"></Pen>
            </GeometryDrawing.Pen>
            <GeometryDrawing.Geometry>
                <PathGeometry>
                    <PathFigure IsClosed="True" StartPoint="10,100">
                        <LineSegment Point="100,100" />
                        <LineSegment Point="100,50" />
                    </PathFigure>
                </PathGeometry>
            </GeometryDrawing.Geometry>
        </GeometryDrawing>
    </Window.Resources>

    <StackPanel Orientation="Horizontal" Margin="5">
        <Button Width="30" Height="30">
            <Image>
                <Image.Source>
                    <DrawingImage Drawing="{StaticResource Drawing}">
                    </DrawingImage>
                </Image.Source>
            </Image>
        </Button>
        <Button Width="30" Height="30">
            <Button.Background>
                <DrawingBrush Stretch="Uniform" Viewport="0,0 0.9,1" Drawing="{StaticResource Drawing}">
                </DrawingBrush>
            </Button.Background>
        </Button>
    </StackPanel>
</Window>
Drawings

 

 二、匯出插圖

  盡管所有這些示例都行內地宣告他們的圖畫,但更常用的方法是將該內容的某些部分放到資源字典中,從而可在整個應用程式中重用(并非一個地方進行修改),由用戶來確定如何將這些標記分割到資源中,但兩種常用的方法是,存盤一個充滿DrawingImage物件的字典,或存盤一個保存DrawingBrush物件的字典,此外,也可以分離出Geometry物件,并將它們存盤為獨立的資源,如上面的示例所示,

  當然,很少有開發人員會手動撰寫大量圖形,反而, 他們將使用專門的設計工具匯出所需的XAML內容,大多數設計工具目前還不支持XAML匯出功能,不過有許多插件和轉換工具可以彌補這一缺陷,下面是幾個例子:

  •   http://www.mikeswanson.com/XAMLExport/上有一個用于Adobe Illustrator工具的免費XAML插件
  •   http://www.mikeswanson.com/swf2xaml/上有一個用于Adobe Flash檔案的免費XAML轉換工具,
  •   Expression Design是Microsoft公司的插入和圖形設計程式,內置了XAML匯出功能,該程式能夠讀取各種矢量圖形檔案格式,包括.wmf(Windows元檔案格式)檔案,還可以匯入已經存在的插圖并將其匯出為XAML格式,

  然而,即使使用其中某個工具,前面學習的有關圖形和圖畫的知識依然十分重要,主要原因如下幾點:

  首先,許多程式允許選擇是希望作為Canvas控制元件中的獨立元素的組合匯出圖畫,還是希望作為DrawingBrush或DrawingImage資源的集合匯出圖畫,通常,第一種選擇是默認選擇,因為它保留了許多特性,然而,如果使用大量圖畫,并且圖畫很復雜,或者只是希望為了盡可能減少記憶體需求而使用靜態圖形,如按鈕圖形,使用DrawingBrush或DrawingImage資源更好的多,而且,這些格式和用戶界面的其他部分是相互獨立的,所以在以后很容易更新它們,

  之所以說理解2D圖形基礎知識是很重要的,另一個原因是這樣可以更容易地控制它們,例如,可通過以下方式替換標準的2D圖形:修改用于繪制各種形狀的畫刷、為單個幾何圖形應用變化、改變不透明度或者變換整個形狀層(通過DrawingGroup物件),更富有戲劇性的是,可添加、洗掉和替換單個幾何圖形,

 

轉載請註明出處,本文鏈接:https://www.uj5u.com/net/4472.html

標籤:WPF

上一篇:WPF教程一:基礎

下一篇:【WPF學習】第四十五章 可視化物件

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C#(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • WebAPI簡介

    Web體系結構: 有三個核心:資源(resource),URL(統一資源識別符號)和表示 他們的關系是這樣的:一個資源由一個URL進行標識,HTTP客戶端使用URL定位資源,表示是從資源回傳資料,媒體型別是資源回傳的資料格式。 接下來我們說下HTTP. HTTP協議的系統是一種無狀態的方式,使用請求/ ......

    uj5u.com 2020-09-09 22:07:47 more
  • asp.net core 3.1 入口:Program.cs中的Main函式

    本文分析Program.cs 中Main()函式中代碼的運行順序分析asp.net core程式的啟動,重點不是剖析原始碼,而是理清程式開始時執行的順序。到呼叫了哪些實體,哪些法方。asp.net core 3.1 的程式入口在專案Program.cs檔案里,如下。ususing System; us ......

    uj5u.com 2020-09-09 22:07:49 more
  • asp.net網站作為websocket服務端的應用該如何寫

    最近被websocket的一個問題困擾了很久,有一個需求是在web網站中搭建websocket服務。客戶端通過網頁與服務器建立連接,然后服務器根據ip給客戶端網頁發送資訊。 其實,這個需求并不難,只是剛開始對websocket的內容不太了解。上網搜索了一下,有通過asp.net core 實作的、有 ......

    uj5u.com 2020-09-09 22:08:02 more
  • ASP.NET 開源匯入匯出庫Magicodes.IE Docker中使用

    Magicodes.IE在Docker中使用 更新歷史 2019.02.13 【Nuget】版本更新到2.0.2 【匯入】修復單列匯入的Bug,單元測驗“OneColumnImporter_Test”。問題見(https://github.com/dotnetcore/Magicodes.IE/is ......

    uj5u.com 2020-09-09 22:08:05 more
  • 在webform中使用ajax

    如果你用過Asp.net webform, 說明你也算是.NET 開發的老兵了。WEBform應該是2011 2013左右,當時還用visual studio 2005、 visual studio 2008。后來基本都用的是MVC。 如果是新開發的專案,估計沒人會用webform技術。但是有些舊版 ......

    uj5u.com 2020-09-09 22:08:50 more
  • iis添加asp.net網站,訪問提示:由于擴展配置問題而無法提供您請求的

    今天在iis服務器配置asp.net網站,遇到一個問題,記錄一下: 問題:由于擴展配置問題而無法提供您請求的頁面。如果該頁面是腳本,請添加處理程式。如果應下載檔案,請添加 MIME 映射。 WindowServer2012服務器,添加角色安裝完.netframework和iis之后,運行aspx頁面 ......

    uj5u.com 2020-09-09 22:10:00 more
  • WebAPI-處理架構

    帶著問題去思考,大家好! 問題1:HTTP請求和回傳相應的HTTP回應資訊之間發生了什么? 1:首先是最底層,托管層,位于WebAPI和底層HTTP堆疊之間 2:其次是 訊息處理程式管道層,這里比如日志和快取。OWIN的參考是將訊息處理程式管道的一些功能下移到堆疊下端的OWIN中間件了。 3:控制器處理 ......

    uj5u.com 2020-09-09 22:11:13 more
  • 微信門戶開發框架-使用指導說明書

    微信門戶應用管理系統,采用基于 MVC + Bootstrap + Ajax + Enterprise Library的技術路線,界面層采用Boostrap + Metronic組合的前端框架,資料訪問層支持Oracle、SQLServer、MySQL、PostgreSQL等資料庫。框架以MVC5,... ......

    uj5u.com 2020-09-09 22:15:18 more
  • WebAPI-HTTP編程模型

    帶著問題去思考,大家好!它是什么?它包含什么?它能干什么? 訊息 HTTP編程模型的核心就是訊息抽象,表示為:HttPRequestMessage,HttpResponseMessage.用于客戶端和服務端之間交換請求和回應訊息。 HttpMethod類包含了一組靜態屬性: private stat ......

    uj5u.com 2020-09-09 22:15:23 more
  • 部署WebApi隨筆

    一、跨域 NuGet參考Microsoft.AspNet.WebApi.Cors WebApiConfig.cs中配置: // Web API 配置和服務 config.EnableCors(new EnableCorsAttribute("*", "*", "*")); 二、清除默認回傳XML格式 ......

    uj5u.com 2020-09-09 22:15:48 more
最新发布
  • C#多執行緒學習(二) 如何操縱一個執行緒

    <a href="https://www.cnblogs.com/x-zhi/" target="_blank"><img width="48" height="48" class="pfs" src="https://pic.cnblogs.com/face/2943582/20220801082530.png" alt="" /></...

    uj5u.com 2023-04-19 09:17:20 more
  • C#多執行緒學習(二) 如何操縱一個執行緒

    C#多執行緒學習(二) 如何操縱一個執行緒 執行緒學習第一篇:C#多執行緒學習(一) 多執行緒的相關概念 下面我們就動手來創建一個執行緒,使用Thread類創建執行緒時,只需提供執行緒入口即可。(執行緒入口使程式知道該讓這個執行緒干什么事) 在C#中,執行緒入口是通過ThreadStart代理(delegate)來提供的 ......

    uj5u.com 2023-04-19 09:16:49 more
  • 記一次 .NET某醫療器械清洗系統 卡死分析

    <a href="https://www.cnblogs.com/huangxincheng/" target="_blank"><img width="48" height="48" class="pfs" src="https://pic.cnblogs.com/face/214741/20200614104537.png" alt="" /&g...

    uj5u.com 2023-04-18 08:39:04 more
  • 記一次 .NET某醫療器械清洗系統 卡死分析

    一:背景 1. 講故事 前段時間協助訓練營里的一位朋友分析了一個程式卡死的問題,回過頭來看這個案例比較經典,這篇稍微整理一下供后來者少踩坑吧。 二:WinDbg 分析 1. 為什么會卡死 因為是表單程式,理所當然就是看主執行緒此時正在做什么? 可以用 ~0s ; k 看一下便知。 0:000> k # ......

    uj5u.com 2023-04-18 08:33:10 more
  • SignalR, No Connection with that ID,IIS

    <a href="https://www.cnblogs.com/smartstar/" target="_blank"><img width="48" height="48" class="pfs" src="https://pic.cnblogs.com/face/u36196.jpg" alt="" /></a>...

    uj5u.com 2023-03-30 17:21:52 more
  • 一次對pool的誤用導致的.net頻繁gc的診斷分析

    <a href="https://www.cnblogs.com/dotnet-diagnostic/" target="_blank"><img width="48" height="48" class="pfs" src="https://pic.cnblogs.com/face/3115652/20230225090434.png" alt=""...

    uj5u.com 2023-03-28 10:15:33 more
  • 一次對pool的誤用導致的.net頻繁gc的診斷分析

    <a href="https://www.cnblogs.com/dotnet-diagnostic/" target="_blank"><img width="48" height="48" class="pfs" src="https://pic.cnblogs.com/face/3115652/20230225090434.png" alt=""...

    uj5u.com 2023-03-28 10:13:31 more
  • C#遍歷指定檔案夾中所有檔案的3種方法

    <a href="https://www.cnblogs.com/xbhp/" target="_blank"><img width="48" height="48" class="pfs" src="https://pic.cnblogs.com/face/957602/20230310105611.png" alt="" /></a&...

    uj5u.com 2023-03-27 14:46:55 more
  • C#/VB.NET:如何將PDF轉為PDF/A

    <a href="https://www.cnblogs.com/Carina-baby/" target="_blank"><img width="48" height="48" class="pfs" src="https://pic.cnblogs.com/face/2859233/20220427162558.png" alt="" />...

    uj5u.com 2023-03-27 14:46:35 more
  • 武裝你的WEBAPI-OData聚合查詢

    <a href="https://www.cnblogs.com/podolski/" target="_blank"><img width="48" height="48" class="pfs" src="https://pic.cnblogs.com/face/616093/20140323000327.png" alt="" /><...

    uj5u.com 2023-03-27 14:46:16 more