主頁 >  其他 > 【WPF學習】第四十五章 可視化物件

【WPF學習】第四十五章 可視化物件

2020-09-17 07:08:49 其他

  前面幾章介紹了處理適量適中的圖形內容的最佳方法,通過使用幾何圖形、圖畫和路徑,可以降低2D圖形的開銷,即使正在使用復雜的具有分層效果的組合形狀和漸變畫刷,這種方法也仍然能夠正常得很好,

  然而,這樣設計不適合需要渲染大量圖形元素的繪圖密集型應用程式,例如繪圖程式、演示粒子碰撞的物理模型程式或橫向卷軸形式的游戲,這些應用程式面臨的不是圖形復雜程度的問題,而純粹是單獨的圖形元素數量的問題,即使使用量級更輕的Geometry物件代替Path元素,需要的開銷也仍會較大地影回應用程式的性能,

  WPF針對此類問題的解決方案是,使用低級的可視化層(visual layer)模型,基本思想是將每個圖形元素定義為一個Visual物件,Visual物件是極輕易級的要素,比Geometry物件或Path物件需要的開銷小,然后可使用單個元素在視窗中渲染所有可視化物件,

一、繪制可視化物件

  Visual類是抽象類,所以不能創建該類的實體,相反,需要使用繼承自Visual類的某個類,包括UIElement類(該類是WPF元素模型的根)、Viewport3DVisual類(通過該類可顯示3D內容)以及ContainerVisual類(包含其他可視化物件的基本容器),但最有用的派生類是DrawingVisual類,該類繼承自ContainerVisual,并添加了支持“繪制”希望放置到可視化物件中的圖形內容的功能,

  為使用DrawingVisual類繪制內容,需要呼叫DrawingVisual.RederOpen()方法,該方法回傳一個可用于定義可視化內容的DrawingContext物件,繪制完畢后,需要呼叫DrawingContext.Close()方法,下面是繪制圖形的完整程序:

DrawingVisual visual=new DrawingVisual();
DrawingContext dc=visual.RenderOpen();

//(perform drawing here.)

dc.Close();

  在本質上,DrawingContext類由各種為可視化物件增加了一些圖形細節的方法構成,可呼叫這些方法來繪制各種圖形、應用變換以及改變不透明度等,下表列出了DrawingContext類的方法,

   下面的示例創建了一個可視化物件,該可視化物件包含沒有填充的基本的黑色三角形: 

DrawingVisual visual=new DrawingVisual();
using(DrawingContext dc=visual.RenderOpen())
{
    Pen drawingPen=new Pen(Color.Black,3);
    dc.DrawLine(drawingPen,new Point(0,50),new Point(50,0));
    dc.DrawLine(drawingPen,new Point(50,0),new Point(100,50));
    dc.DrawLine(drawingPen,new Point(0,50),new Point(100,50));
}

   當呼叫DrawingContext方法,沒有實際繪制可視化物件——而只是定義了可視化外觀,當通過呼叫Close()方法結束繪制時,完成的圖畫被存盤在可視化物件中,并通過只讀的DrawingVisual.Drawing屬性提供這些圖畫,WPF會保存Drawing物件,從而當需要時可以重新繪制視窗,

  繪圖代碼的順序很重要,后面的繪圖操作可在已經存在的圖形上繪制內容,PushXxx()方法應用的設定會被應用到后續的繪圖操作中,例如,可使用PushOpacity()方法改變不透明級別,該設定會影響所有的后續繪圖操作,可使用Pop()方法恢復最佳的PushXxx()方法,如果多次呼叫PushXxx()方法,可一次使用一系列Pop()方法呼叫關閉它們,

  一旦關閉DrawingContext物件,就不能再修改可視化物件,但可以使用DrawingVisual類的Transform和Opacity屬性應用變換或改變整個可視化物件的透明度,如果希望提供全新的內容,可以再次呼叫RenderOpen()方法并重復繪制程序,

二、在元素中封裝可視化物件

  在可視化層中撰寫程式時,最重要的一步是定義可視化物件,但為了在螢屏上實際顯示可視內容,這還不夠,為顯示可視化物件,還需要借助于功能完備的WPF元素,WPF元素將可視化物件添加到可視化樹中,乍一看,這好像降低了可視化層變成的優點——畢竟,避免使用元素并避免它們的巨大開銷不正是使用可視化層的全部目的嗎?然而,單個元素具有顯示任意數量可視化物件的能力,因此,可以很容易地創建只包含一兩個元素,但卻駐留了幾千個可視化物件的視窗,

  為在元素中駐留可視化物件,需要執行一下任務:

  •   為元素呼叫AddVisualChild()和AddLogicalChild()方法來注冊可視化物件,從技術角度看,為了顯示可視化物件,不需要執行這些任務,但為了確保正確跟蹤可視化物件,在可視化樹和邏輯樹中顯示可視化物件以及使用其他WPF特性(如命中測驗),需要執行這些操作,
  •   重寫VisualChildrenCount屬性并回傳已經增加了的可視化物件的數量,
  •   重寫GetVisualChild()方法,當通過索引好要求可視化物件時,添加回傳可視化物件所需的代碼,

  當重寫VisualChildrenCount屬性和GetVisualChild()方法時,本質上時劫持了那個元素,如果使用的是能夠包含嵌套的內容控制元件、裝飾元素或面板,這些元素將不再被渲染,例如,如果在自定義視窗中重寫了這兩個方法,就看不到視窗的其他內容,只會看到添加的可視化物件,

  因此,通常創建專用的自定義類來封裝希望顯示的可視化物件,例如,分析下圖顯示的視窗,該視窗允許用戶為自定義的Canvas面板添加正方形(每個正方形是可視化物件).

 

 

 

   在上圖中,視窗的左邊是具有三個RadioButton物件的工具列,通過使用一組RadioButton物件,科室創建一套相互關聯的按鈕,當單擊這套按鈕中的某個按鈕時,該按鈕會被選中,并保持“按下”狀態,而原來選擇的按鈕會恢復成正常的外觀,

  在上圖中,視窗的右邊為自定義的名為DrawingCanvas的Canvas面板,該面板在內部存盤了可視化物件的集合,DrawingCanvas面板回傳保存在VisualChildrenCount屬性的正方形總數量,并使用GetVisualChild()方法提供對集合中每個可視化物件的訪問,下面是實作細節: 

 public class DrawingCanvas:Panel
    {
        private List<Visual> visuals = new List<Visual>();

        protected override Visual GetVisualChild(int index)
        {
            return visuals[index];
        }
        protected override int VisualChildrenCount
        {
            get
            {
                return visuals.Count;
            }
        }
        ...
}

  此外,DrawingCanvas類還提供了AddVisual()方法和DeleteVisual()方法,以簡化在集合的恰當位置插入可視化物件的自定義代碼: 

public void AddVisual(Visual visual)
        {
            visuals.Add(visual);

            base.AddVisualChild(visual);
            base.AddLogicalChild(visual);
        }

        public void DeleteVisual(Visual visual)
        {
            visuals.Remove(visual);

            base.RemoveVisualChild(visual);
            base.RemoveLogicalChild(visual);
        }

  DrawingCanvas類沒有提供用于繪制、選擇以及移動正方形的邏輯,這是因為該功能是在應用程式層中控制的,因為可能有幾個不同的繪圖工具都使用同一個DrawingCanvas類,所以這樣做是合理的,根據用戶單擊的按鈕,用戶可繪制不同型別的形狀,或使用不同的筆畫顏色和填充顏色,所有這些細節都是特定與視窗的,DrawingCanvas類提供了用于駐留、渲染以及跟蹤可視化物件的功能,

  下面演示了如何在視窗的XAML標記中宣告DrawingCanvas物件: 

<local:DrawingCanvas x:Name="drawingSurface" Background="White" ClipToBounds="True"
                             MouseLeftButtonDown="drawingSurface_MouseLeftButtonDown"
                MouseLeftButtonUp="drawingSurface_MouseLeftButtonUp"
                MouseMove="drawingSurface_MouseMove"></local:DrawingCanvas>

  上圖已經分析了DrawingCanvas容器,現在應當分析創建正方形的事件處理代碼了,首先分析MouseLeftButton事件的處理程式,正是該事件處理程式中的代碼決定了將要執行什么操作——是創建正方形、洗掉正方形還是選擇正方形,目前,我們只對第一個任務感興趣: 

private void drawingSurface_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Point pointClicked = e.GetPosition(drawingSurface);

            if (cmdAdd.IsChecked == true)
            {
                DrawingVisual visual = new DrawingVisual();
                DrawSquare(visual, pointClicked, false);
                drawingSurface.AddVisual(visual);
            }
        ...
        }

  實際作業由自定義的DrawSquare()方法執行,該方法非常有用,因為需要在代碼中的幾個不同位置觸發正方形繪制操作,顯然,當第一次創建正方形時,需要使用DrawSquare()方法,當正方形的外觀因為各種原因發生變化時(例如,當正方形被選中時),也需要使用該方法,

  DrawSquare()方法接收三個引數:準備繪制的DrawingVisual物件、正方形左上角的點以及知識當前是否選中正方形的Boolean標志,對于選中的正方形使用不同的填充顏色進行填充,

  下面是渲染代碼: 

// Drawing constants.
        private Brush drawingBrush = Brushes.AliceBlue;
        private Brush selectedDrawingBrush = Brushes.LightGoldenrodYellow;
        private Pen drawingPen = new Pen(Brushes.SteelBlue, 3);
        private Size squareSize = new Size(30, 30);
        private DrawingVisual selectionSquare;

        // Rendering the square.
        private void DrawSquare(DrawingVisual visual, Point topLeftCorner, bool isSelected)
        {
            using (DrawingContext dc = visual.RenderOpen())
            {
                Brush brush = drawingBrush;
                if (isSelected) brush = selectedDrawingBrush;

                dc.DrawRectangle(brush, drawingPen,
                    new Rect(topLeftCorner, squareSize));
            }
        }

  這就是在視窗中顯示可視化物件需要做的全部作業:渲染可視化物件的代碼,以及處理必需的跟蹤細節的內容,如果希望為可視化物件添加互動功能,還需要完成其他一些作業,

三、命中測驗

  繪制正方形的應用程式不僅允許繪制正方形,還允許用戶移動和洗掉以及繪制的正方形,為了執行這些任務,需要撰寫代碼以截獲滑鼠單擊,并查找位于可單擊位置的可視化物件,該任務被稱為命中測驗(hit testing),

  為支持命中測驗,最好為DrawingCanvas類添加GetVisual()方法,該方法使用一個點作為引數并回傳匹配的DrawingVisual物件,為此使用了VisualTreeHelper.HitTest()靜態方法,下面是GetVisual()方法的完整帶代碼: 

public DrawingVisual GetVisual(Point point)
        {
            HitTestResult hitResult = VisualTreeHelper.HitTest(this, point);
            return hitResult.VisualHit as DrawingVisual;
        }

  在該例中,代碼忽略了所有非DrawingVisual型別的命中物件,包括DrawingCanvas物件本身,如果沒有正方形被單擊,GetVisual()方法回傳null參考,

  洗掉功能利用了GetVisual()方法,當選擇洗掉命令并選中一個正方形時,MouseLeftButtonDown事件處理程式使用下面的代碼洗掉這個正方形: 

else if (cmdDelete.IsChecked == true)
            {
                DrawingVisual visual = drawingSurface.GetVisual(pointClicked);
                if (visual != null) drawingSurface.DeleteVisual(visual);
            }

  可用類似的代碼支持拖放特性,但需要通過一種方法對拖動進行跟蹤,在視窗中添加了三個欄位用于該目的——isDragging、clickOffset和selectedVisual: 

 // Variables for dragging shapes.
        private bool isDragging = false;
        private Vector clickOffset;
        private DrawingVisual selectedVisual;

 當用戶單擊某個形狀時,isDragging欄位被設定為true,selectedVisual欄位被設定為被單擊的可視化物件,而clickOffset欄位記錄了用戶單擊點和正方形左上角之間的距離,下面是MouseLeftButtonDown事件處理程式中的相關代碼: 

else if (cmdSelectMove.IsChecked == true)
            {
                DrawingVisual visual = drawingSurface.GetVisual(pointClicked);
                if (visual != null)
                {
                    // Calculate the top-left corner of the square.
                    // This is done by looking at the current bounds and
                    // removing half the border (pen thickness).
                    // An alternate solution would be to store the top-left
                    // point of every visual in a collection in the 
                    // DrawingCanvas, and provide this point when hit testing.
                    Point topLeftCorner = new Point(
                        visual.ContentBounds.TopLeft.X + drawingPen.Thickness / 2,
                        visual.ContentBounds.TopLeft.Y + drawingPen.Thickness / 2);
                    DrawSquare(visual, topLeftCorner, true);

                    clickOffset = topLeftCorner - pointClicked;
                    isDragging = true;

                    if (selectedVisual != null && selectedVisual != visual)
                    {
                        // The selection has changed. Clear the previous selection.
                        ClearSelection();
                    }
                    selectedVisual = visual;
                }

  除基本的記錄資訊外,上面的代碼還呼叫DrawSquare()方法,使用新顏色重新渲染DrawingVisual物件,上面的代碼還使用另一個自定義方法ClearSelection(),該方法重新繪制以前選中的正方形,使該正方形恢復其正常外觀: 

private void ClearSelection()
        {
            Point topLeftCorner = new Point(
                        selectedVisual.ContentBounds.TopLeft.X + drawingPen.Thickness / 2,
                        selectedVisual.ContentBounds.TopLeft.Y + drawingPen.Thickness / 2);
            DrawSquare(selectedVisual, topLeftCorner, false);
            selectedVisual = null;
        }

  接下來,當用戶拖動時需要實際移動正方形,并當用戶釋放滑鼠左鍵時結束拖動操作,這兩個任務是使用一些簡單的事件處理代碼完成的: 

private void drawingSurface_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            isDragging = false;
        }
private void drawingSurface_MouseMove(object sender, MouseEventArgs e)
        {
            if (isDragging)
            {
                Point pointDragged = e.GetPosition(drawingSurface) + clickOffset;
                DrawSquare(selectedVisual, pointDragged, true);
            }
        }

四、復雜的命中測驗

  在上面的示例中,命中測驗代碼始侄訓傳最上面的可視化物件(如果單擊空白處,就回傳null參考),然而,VisualTreeHelper類提供了HitTest()方法的兩個多載版本,從而可以執行更加復雜的命中測驗,使用這些方法,可以檢索位于特定點的所有可視化物件,即使它們被其他元素隱藏在后面也同樣如此,還可找到位于給定幾何圖形中的所有可視化物件,

  為了使用這個更高級的命中測驗行為,需要創建回呼函式,之后,VisualTreeHelper類自上而下遍歷所有可視化物件(與創建它們的順序相反),每當發現匹配的物件時,就會呼叫回呼函式并傳遞相關細節,然后可以選擇停止查找(如果已經查找到足夠的層次),或繼續查找知道遍歷完所有的可視化物件為止,

  下面的代碼通過為DrawingCanvas類添加GetVisuals()方法實作了該技術,GetVisuals()方法接收一個Geometry物件,該物件用于命中測驗,GetVisuals()方法創建回呼函式委托、清空命中測驗結果的集合,然后通過呼叫VisualTreeHelper.HitTest()方法啟動命中測驗程序,當該程序結束時,該方法回傳包含所有找到的可視化物件的集合: 

private List<DrawingVisual> hits = new List<DrawingVisual>();
        public List<DrawingVisual> GetVisuals(Geometry region)
        {
            hits.Clear();
            GeometryHitTestParameters parameters = new GeometryHitTestParameters(region);
            HitTestResultCallback callback = new HitTestResultCallback(this.HitTestCallback);
            VisualTreeHelper.HitTest(this, null, callback, parameters);
            return hits;
        }

  回呼方法實作了命中測驗行為,通常,HitTestResult物件只提供一個熟悉(VisualHit),但可以根據執行命中測驗的型別,將它轉換成兩個派生型別中的任意一個,

  如果使用一個點進行命中測驗,可將HitTestResult物件轉換為PointHitTestResult物件,該類提供了一個不起眼的PointHit熟悉,該屬性回傳用于執行命中測驗的原始點,但如果使用Geometry物件吉祥鳥命中測驗,如本例那樣,可將HitTestResult物件轉換為GeometryHitTestResult物件,并訪問IntersectionDetail屬性,IntersectionDetail屬性告知幾何圖形是否完全封裝了可視化物件(FullyInside),幾何圖形是否與可視化元素只是相互重疊(Intersets),或者用于命中測驗的集合圖形是否落在可視化元素的內部(FullyContains),在該例中,只有當可視化物件完全位于命中測驗區域時,才會對命中數量計算,最后,在回呼函式的末尾,可回傳兩個HitTestResultBehavior列舉值中的一個:回傳continue表示繼續查找命中,回傳Stop則表示結束查找程序, 

private HitTestResultBehavior HitTestCallback(HitTestResult result)
        {
            GeometryHitTestResult geometryResult = (GeometryHitTestResult)result;
            DrawingVisual visual = result.VisualHit as DrawingVisual;
            if (visual != null &&
                geometryResult.IntersectionDetail == IntersectionDetail.FullyInside)
            {
                hits.Add(visual);
            }
            return HitTestResultBehavior.Continue;
        }

  使用GetVisuals()方法,可創建如下圖所示的復雜選擇框效果,在此,用戶在一組矩形的周圍繪制了一個方框,應用程式接著報告該區域中矩形的數量,

 

 

   為了創建選擇框,視窗只需要為DrawingCanvas面板添加另一個DrawingVisual物件即可,在視窗中還作為成員欄位存盤了指向選擇框的參考,此外還有isMultiSelecting標記和selectionSquareTopLeft欄位,當繪制選擇框時,isMultiSelecting標記跟蹤正在進行的選擇操作,selectionSquareTopLeft欄位跟蹤當前選擇框的左上角:

// Variables for drawing the selection square.
        private bool isMultiSelecting = false;
        private Point selectionSquareTopLeft;

  為實作選擇框特性,需要為前面介紹的事件處理程式添加一些代碼,當單擊滑鼠時,需要創建選擇框,將isMultiSelecting開關設定為true,并捕獲滑鼠,下面的MouseLeftButtonDown事件處理程式中的代碼完成這項作業:

else if (cmdSelectMultiple.IsChecked == true)
            {

                selectionSquare = new DrawingVisual();

                drawingSurface.AddVisual(selectionSquare);

                selectionSquareTopLeft = pointClicked;
                isMultiSelecting = true;

                // Make sure we get the MouseLeftButtonUp event even if the user
                // moves off the Canvas. Otherwise, two selection squares could be drawn at once.
                drawingSurface.CaptureMouse();
            }

  現在,當移動滑鼠時,可根據當前選擇框是否處于激活狀態,如果是激活狀態,就繪制它,為此,需要在MouseMove事件處理程式中添加以下代碼:

else if (isMultiSelecting)
            {
                Point pointDragged = e.GetPosition(drawingSurface);
                DrawSelectionSquare(selectionSquareTopLeft, pointDragged);
            }

  實際的繪圖操作在專門的DrawSelectionSquare()方法中進行,該方法與前面介紹的DrawSquare()方法有一些類似之處:

private Brush selectionSquareBrush = Brushes.Transparent;
        private Pen selectionSquarePen = new Pen(Brushes.Black, 2);

        private void DrawSelectionSquare(Point point1, Point point2)
        {
            selectionSquarePen.DashStyle = DashStyles.Dash;

            using (DrawingContext dc = selectionSquare.RenderOpen())
            {
                dc.DrawRectangle(selectionSquareBrush, selectionSquarePen,
                    new Rect(point1, point2));
            }
        }

  最后,當釋放滑鼠時,可執行命中測驗,顯示訊息框,然后移除選擇框,為此,需要MouseLeftButtonUp事件處理程式中添加如下代碼:

 if (isMultiSelecting)
            {
                // Display all the squares in this region.
                RectangleGeometry geometry = new RectangleGeometry(
                    new Rect(selectionSquareTopLeft, e.GetPosition(drawingSurface)));
                List<DrawingVisual> visualsInRegion =
                    drawingSurface.GetVisuals(geometry);
                MessageBox.Show(String.Format("You selected {0} square(s).", visualsInRegion.Count));

                isMultiSelecting = false;
                drawingSurface.DeleteVisual(selectionSquare);
                drawingSurface.ReleaseMouseCapture();
            }

本實體的完整代碼如下所示:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace Drawing
{
    public class DrawingCanvas:Panel
    {
        private List<Visual> visuals = new List<Visual>();

        protected override Visual GetVisualChild(int index)
        {
            return visuals[index];
        }
        protected override int VisualChildrenCount
        {
            get
            {
                return visuals.Count;
            }
        }

        public void AddVisual(Visual visual)
        {
            visuals.Add(visual);

            base.AddVisualChild(visual);
            base.AddLogicalChild(visual);
        }

        public void DeleteVisual(Visual visual)
        {
            visuals.Remove(visual);

            base.RemoveVisualChild(visual);
            base.RemoveLogicalChild(visual);
        }

        public DrawingVisual GetVisual(Point point)
        {
            HitTestResult hitResult = VisualTreeHelper.HitTest(this, point);
            return hitResult.VisualHit as DrawingVisual;
        }

        private List<DrawingVisual> hits = new List<DrawingVisual>();
        public List<DrawingVisual> GetVisuals(Geometry region)
        {
            hits.Clear();
            GeometryHitTestParameters parameters = new GeometryHitTestParameters(region);
            HitTestResultCallback callback = new HitTestResultCallback(this.HitTestCallback);
            VisualTreeHelper.HitTest(this, null, callback, parameters);
            return hits;
        }

        private HitTestResultBehavior HitTestCallback(HitTestResult result)
        {
            GeometryHitTestResult geometryResult = (GeometryHitTestResult)result;
            DrawingVisual visual = result.VisualHit as DrawingVisual;
            if (visual != null &&
                geometryResult.IntersectionDetail == IntersectionDetail.FullyInside)
            {
                hits.Add(visual);
            }
            return HitTestResultBehavior.Continue;
        }
    }
}
DrawingCanvas
<Window x:Class="Drawing.VisualLayer"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:Drawing"
        Title="VisualLayer" Height="300" Width="394.737">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <ToolBarTray Orientation="Vertical">
            <ToolBar>
                <RadioButton Margin="0,3" Name="cmdSelectMove">
                    <StackPanel>
                        <Image Source="pointer.png" Width="35" Height="35"></Image>
                        <TextBlock>Select/Move</TextBlock>
                    </StackPanel>
                </RadioButton>
                <RadioButton Margin="0,3" IsChecked="True" Name="cmdAdd">
                    <StackPanel>
                        <Rectangle Width="30" Height="30" Stroke="SteelBlue" StrokeThickness="3" Fill="AliceBlue"></Rectangle>
                        <TextBlock>Add Square</TextBlock>
                    </StackPanel>
                </RadioButton>
                <RadioButton Margin="0,3" Name="cmdDelete">
                    <StackPanel>
                        <Path Stroke="SteelBlue" StrokeThickness="4" StrokeEndLineCap="Round" StrokeStartLineCap="Round"
                  Fill="Red" HorizontalAlignment="Center">
                            <Path.Data>
                                <GeometryGroup>
                                    <PathGeometry>
                                        <PathFigure StartPoint="0,0">
                                            <LineSegment Point="18,18"></LineSegment>
                                        </PathFigure>
                                        <PathFigure StartPoint="0,18">
                                            <LineSegment Point="18,0"></LineSegment>
                                        </PathFigure>
                                    </PathGeometry>
                                </GeometryGroup>
                            </Path.Data>
                        </Path>
                        <TextBlock>Delete Square</TextBlock>
                    </StackPanel>
                </RadioButton>
                <RadioButton Margin="0,3" Name="cmdSelectMultiple">
                    <StackPanel>
                        <Image Source="pointer.png" Width="35" Height="35"></Image>
                        <TextBlock>Select Multiple</TextBlock>
                    </StackPanel>
                </RadioButton>
            </ToolBar>
        </ToolBarTray>
        <Border Grid.Column="1" Margin="3" BorderThickness="3" BorderBrush="SteelBlue">
            <local:DrawingCanvas x:Name="drawingSurface" Background="White" ClipToBounds="True"
                             MouseLeftButtonDown="drawingSurface_MouseLeftButtonDown"
                MouseLeftButtonUp="drawingSurface_MouseLeftButtonUp"
                MouseMove="drawingSurface_MouseMove"></local:DrawingCanvas>
        </Border>
    </Grid>
</Window>
VisualLayer
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace Drawing
{
    /// <summary>
    /// VisualLayer.xaml 的互動邏輯
    /// </summary>
    public partial class VisualLayer : Window
    {
        public VisualLayer()
        {
            InitializeComponent();
            DrawingVisual v = new DrawingVisual();
            DrawSquare(v, new Point(10, 10), false);
        }

        // Variables for dragging shapes.
        private bool isDragging = false;
        private Vector clickOffset;
        private DrawingVisual selectedVisual;

        // Variables for drawing the selection square.
        private bool isMultiSelecting = false;
        private Point selectionSquareTopLeft;

        private void drawingSurface_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Point pointClicked = e.GetPosition(drawingSurface);

            if (cmdAdd.IsChecked == true)
            {
                DrawingVisual visual = new DrawingVisual();
                DrawSquare(visual, pointClicked, false);
                drawingSurface.AddVisual(visual);
            }
            else if (cmdDelete.IsChecked == true)
            {
                DrawingVisual visual = drawingSurface.GetVisual(pointClicked);
                if (visual != null) drawingSurface.DeleteVisual(visual);
            }
            else if (cmdSelectMove.IsChecked == true)
            {
                DrawingVisual visual = drawingSurface.GetVisual(pointClicked);
                if (visual != null)
                {
                    // Calculate the top-left corner of the square.
                    // This is done by looking at the current bounds and
                    // removing half the border (pen thickness).
                    // An alternate solution would be to store the top-left
                    // point of every visual in a collection in the 
                    // DrawingCanvas, and provide this point when hit testing.
                    Point topLeftCorner = new Point(
                        visual.ContentBounds.TopLeft.X + drawingPen.Thickness / 2,
                        visual.ContentBounds.TopLeft.Y + drawingPen.Thickness / 2);
                    DrawSquare(visual, topLeftCorner, true);

                    clickOffset = topLeftCorner - pointClicked;
                    isDragging = true;

                    if (selectedVisual != null && selectedVisual != visual)
                    {
                        // The selection has changed. Clear the previous selection.
                        ClearSelection();
                    }
                    selectedVisual = visual;
                }
            }
            else if (cmdSelectMultiple.IsChecked == true)
            {

                selectionSquare = new DrawingVisual();

                drawingSurface.AddVisual(selectionSquare);

                selectionSquareTopLeft = pointClicked;
                isMultiSelecting = true;

                // Make sure we get the MouseLeftButtonUp event even if the user
                // moves off the Canvas. Otherwise, two selection squares could be drawn at once.
                drawingSurface.CaptureMouse();
            }
        }

        // Drawing constants.
        private Brush drawingBrush = Brushes.AliceBlue;
        private Brush selectedDrawingBrush = Brushes.LightGoldenrodYellow;
        private Pen drawingPen = new Pen(Brushes.SteelBlue, 3);
        private Size squareSize = new Size(30, 30);
        private DrawingVisual selectionSquare;

        // Rendering the square.
        private void DrawSquare(DrawingVisual visual, Point topLeftCorner, bool isSelected)
        {
            using (DrawingContext dc = visual.RenderOpen())
            {
                Brush brush = drawingBrush;
                if (isSelected) brush = selectedDrawingBrush;

                dc.DrawRectangle(brush, drawingPen,
                    new Rect(topLeftCorner, squareSize));
            }
        }

        private void drawingSurface_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            isDragging = false;

            if (isMultiSelecting)
            {
                // Display all the squares in this region.
                RectangleGeometry geometry = new RectangleGeometry(
                    new Rect(selectionSquareTopLeft, e.GetPosition(drawingSurface)));
                List<DrawingVisual> visualsInRegion =
                    drawingSurface.GetVisuals(geometry);
                MessageBox.Show(String.Format("You selected {0} square(s).", visualsInRegion.Count));

                isMultiSelecting = false;
                drawingSurface.DeleteVisual(selectionSquare);
                drawingSurface.ReleaseMouseCapture();
            }
        }

        private void ClearSelection()
        {
            Point topLeftCorner = new Point(
                        selectedVisual.ContentBounds.TopLeft.X + drawingPen.Thickness / 2,
                        selectedVisual.ContentBounds.TopLeft.Y + drawingPen.Thickness / 2);
            DrawSquare(selectedVisual, topLeftCorner, false);
            selectedVisual = null;
        }

        private void drawingSurface_MouseMove(object sender, MouseEventArgs e)
        {
            if (isDragging)
            {
                Point pointDragged = e.GetPosition(drawingSurface) + clickOffset;
                DrawSquare(selectedVisual, pointDragged, true);
            }
            else if (isMultiSelecting)
            {
                Point pointDragged = e.GetPosition(drawingSurface);
                DrawSelectionSquare(selectionSquareTopLeft, pointDragged);
            }
        }

        private Brush selectionSquareBrush = Brushes.Transparent;
        private Pen selectionSquarePen = new Pen(Brushes.Black, 2);

        private void DrawSelectionSquare(Point point1, Point point2)
        {
            selectionSquarePen.DashStyle = DashStyles.Dash;

            using (DrawingContext dc = selectionSquare.RenderOpen())
            {
                dc.DrawRectangle(selectionSquareBrush, selectionSquarePen,
                    new Rect(point1, point2));
            }
        }
    }
}
VisualLayer.xaml.cs

 

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

標籤:其他

上一篇:C#設計模式學習筆記:(15)迭代器模式

下一篇:opencv +數字識別

標籤雲
其他(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)

熱門瀏覽
  • 網閘典型架構簡述

    網閘架構一般分為兩種:三主機的三系統架構網閘和雙主機的2+1架構網閘。 三主機架構分別為內端機、外端機和仲裁機。三機無論從軟體和硬體上均各自獨立。首先從硬體上來看,三機都用各自獨立的主板、記憶體及存盤設備。從軟體上來看,三機有各自獨立的作業系統。這樣能達到完全的三機獨立。對于“2+1”系統,“2”分為 ......

    uj5u.com 2020-09-10 02:00:44 more
  • 如何從xshell上傳檔案到centos linux虛擬機里

    如何從xshell上傳檔案到centos linux虛擬機里及:虛擬機CentOs下執行 yum -y install lrzsz命令,出現錯誤:鏡像無法找到軟體包 前言 一、安裝lrzsz步驟 二、上傳檔案 三、遇到的問題及解決方案 總結 前言 提示:其實很簡單,往虛擬機上安裝一個上傳檔案的工具 ......

    uj5u.com 2020-09-10 02:00:47 more
  • 一、SQLMAP入門

    一、SQLMAP入門 1、判斷是否存在注入 sqlmap.py -u 網址/id=1 id=1不可缺少。當注入點后面的引數大于兩個時。需要加雙引號, sqlmap.py -u "網址/id=1&uid=1" 2、判斷文本中的請求是否存在注入 從文本中加載http請求,SQLMAP可以從一個文本檔案中 ......

    uj5u.com 2020-09-10 02:00:50 more
  • Metasploit 簡單使用教程

    metasploit 簡單使用教程 浩先生, 2020-08-28 16:18:25 分類專欄: kail 網路安全 linux 文章標簽: linux資訊安全 編輯 著作權 metasploit 使用教程 前言 一、Metasploit是什么? 二、準備作業 三、具體步驟 前言 Msfconsole ......

    uj5u.com 2020-09-10 02:00:53 more
  • 游戲逆向之驅動層與用戶層通訊

    驅動層代碼: #pragma once #include <ntifs.h> #define add_code CTL_CODE(FILE_DEVICE_UNKNOWN,0x800,METHOD_BUFFERED,FILE_ANY_ACCESS) /* 更多游戲逆向視頻www.yxfzedu.com ......

    uj5u.com 2020-09-10 02:00:56 more
  • 北斗電力時鐘(北斗授時服務器)讓網路資料更精準

    北斗電力時鐘(北斗授時服務器)讓網路資料更精準 北斗電力時鐘(北斗授時服務器)讓網路資料更精準 京準電子科技官微——ahjzsz 近幾年,資訊技術的得了快速發展,互聯網在逐漸普及,其在人們生活和生產中都得到了廣泛應用,并且取得了不錯的應用效果。計算機網路資訊在電力系統中的應用,一方面使電力系統的運行 ......

    uj5u.com 2020-09-10 02:01:03 more
  • 【CTF】CTFHub 技能樹 彩蛋 writeup

    ?碎碎念 CTFHub:https://www.ctfhub.com/ 筆者入門CTF時時剛開始刷的是bugku的舊平臺,后來才有了CTFHub。 感覺不論是網頁UI設計,還是題目質量,賽事跟蹤,工具軟體都做得很不錯。 而且因為獨到的金幣制度的確讓人有一種想去刷題賺金幣的感覺。 個人還是非常喜歡這個 ......

    uj5u.com 2020-09-10 02:04:05 more
  • 02windows基礎操作

    我學到了一下幾點 Windows系統目錄結構與滲透的作用 常見Windows的服務詳解 Windows埠詳解 常用的Windows注冊表詳解 hacker DOS命令詳解(net user / type /md /rd/ dir /cd /net use copy、批處理 等) 利用dos命令制作 ......

    uj5u.com 2020-09-10 02:04:18 more
  • 03.Linux基礎操作

    我學到了以下幾點 01Linux系統介紹02系統安裝,密碼啊破解03Linux常用命令04LAMP 01LINUX windows: win03 8 12 16 19 配置不繁瑣 Linux:redhat,centos(紅帽社區版),Ubuntu server,suse unix:金融機構,證券,銀 ......

    uj5u.com 2020-09-10 02:04:30 more
  • 05HTML

    01HTML介紹 02頭部標簽講解03基礎標簽講解04表單標簽講解 HTML前段語言 js1.了解代碼2.根據代碼 懂得挖掘漏洞 (POST注入/XSS漏洞上傳)3.黑帽seo 白帽seo 客戶網站被黑帽植入劫持代碼如何處理4.熟悉html表單 <html><head><title>TDK標題,描述 ......

    uj5u.com 2020-09-10 02:04:36 more
最新发布
  • 2023年最新微信小程式抓包教程

    01 開門見山 隔一個月發一篇文章,不過分。 首先回顧一下《微信系結手機號資料庫被脫庫事件》,我也是第一時間得知了這個訊息,然后跟蹤了整件事情的經過。下面是這起事件的相關截圖以及近日流出的一萬條資料樣本: 個人認為這件事也沒什么,還不如關注一下之前45億快遞資料查詢渠道疑似在近日復活的訊息。 訊息是 ......

    uj5u.com 2023-04-20 08:48:24 more
  • web3 產品介紹:metamask 錢包 使用最多的瀏覽器插件錢包

    Metamask錢包是一種基于區塊鏈技術的數字貨幣錢包,它允許用戶在安全、便捷的環境下管理自己的加密資產。Metamask錢包是以太坊生態系統中最流行的錢包之一,它具有易于使用、安全性高和功能強大等優點。 本文將詳細介紹Metamask錢包的功能和使用方法。 一、 Metamask錢包的功能 數字資 ......

    uj5u.com 2023-04-20 08:47:46 more
  • vulnhub_Earth

    前言 靶機地址->>>vulnhub_Earth 攻擊機ip:192.168.20.121 靶機ip:192.168.20.122 參考文章 https://www.cnblogs.com/Jing-X/archive/2022/04/03/16097695.html https://www.cnb ......

    uj5u.com 2023-04-20 07:46:20 more
  • 從4k到42k,軟體測驗工程師的漲薪史,給我看哭了

    清明節一過,盲猜大家已經無心上班,在數著日子準備過五一,但一想到銀行卡里的余額……瞬間心情就不美麗了。最近,2023年高校畢業生就業調查顯示,本科畢業月平均起薪為5825元。調查一出,便有很多同學表示自己又被平均了。看著這一資料,不免讓人想到前不久中國青年報的一項調查:近六成大學生認為畢業10年內會 ......

    uj5u.com 2023-04-20 07:44:00 more
  • 最新版本 Stable Diffusion 開源 AI 繪畫工具之中文自動提詞篇

    🎈 標簽生成器 由于輸入正向提示詞 prompt 和反向提示詞 negative prompt 都是使用英文,所以對學習母語的我們非常不友好 使用網址:https://tinygeeker.github.io/p/ai-prompt-generator 這個網址是為了讓大家在使用 AI 繪畫的時候 ......

    uj5u.com 2023-04-20 07:43:36 more
  • 漫談前端自動化測驗演進之路及測驗工具分析

    隨著前端技術的不斷發展和應用程式的日益復雜,前端自動化測驗也在不斷演進。隨著 Web 應用程式變得越來越復雜,自動化測驗的需求也越來越高。如今,自動化測驗已經成為 Web 應用程式開發程序中不可或缺的一部分,它們可以幫助開發人員更快地發現和修復錯誤,提高應用程式的性能和可靠性。 ......

    uj5u.com 2023-04-20 07:43:16 more
  • CANN開發實踐:4個DVPP記憶體問題的典型案例解讀

    摘要:由于DVPP媒體資料處理功能對存放輸入、輸出資料的記憶體有更高的要求(例如,記憶體首地址128位元組對齊),因此需呼叫專用的記憶體申請介面,那么本期就分享幾個關于DVPP記憶體問題的典型案例,并給出原因分析及解決方法。 本文分享自華為云社區《FAQ_DVPP記憶體問題案例》,作者:昇騰CANN。 DVPP ......

    uj5u.com 2023-04-20 07:43:03 more
  • msf學習

    msf學習 以kali自帶的msf為例 一、msf核心模塊與功能 msf模塊都放在/usr/share/metasploit-framework/modules目錄下 1、auxiliary 輔助模塊,輔助滲透(埠掃描、登錄密碼爆破、漏洞驗證等) 2、encoders 編碼器模塊,主要包含各種編碼 ......

    uj5u.com 2023-04-20 07:42:59 more
  • Halcon軟體安裝與界面簡介

    1. 下載Halcon17版本到到本地 2. 雙擊安裝包后 3. 步驟如下 1.2 Halcon軟體安裝 界面分為四大塊 1. Halcon的五個助手 1) 影像采集助手:與相機連接,設定相機引數,采集影像 2) 標定助手:九點標定或是其它的標定,生成標定檔案及內參外參,可以將像素單位轉換為長度單位 ......

    uj5u.com 2023-04-20 07:42:17 more
  • 在MacOS下使用Unity3D開發游戲

    第一次發博客,先發一下我的游戲開發環境吧。 去年2月份買了一臺MacBookPro2021 M1pro(以下簡稱mbp),這一年來一直在用mbp開發游戲。我大致分享一下我的開發工具以及使用體驗。 1、Unity 官網鏈接: https://unity.cn/releases 我一般使用的Apple ......

    uj5u.com 2023-04-20 07:40:19 more