当前位置:网站首页 / WPF / 正文

[Aaronyang] 写给自己的WPF4.5 笔记19[Visual,命中测试,ay按钮]

时间:2015年03月16日 | 作者 : aaronyang | 分类 : WPF | 浏览: 5404次 | 评论 0

文章虽小,内容还好,且看且珍惜。www.ayjs.net  aaronyang版权所有,不许转载,违者必究

当界面上使用数千个矢量图形,例如实时统计图,粒子碰撞,比如超级玛丽游戏,图像一直在绘,过量的使用WPF的元素系统和Shape类会使用程序变慢,所以我们需要使用Visual类手动进行渲染。

Visual类是很多WPF元素的父类。所以掌握它当然很重要了。

Visual的开销小于Geometry小于Path


 

Visual作为抽象类,有UIElement这个子类,也有Viewport3DVisual类(3D知识中的)

放置Visual的对象的容器:ContainerVisual类,继承该类的子类有DrawingVisual类。

DrawingVisual.RenderOpen()会返回个可用于定义可视化内容的DrawingContext对象。

DrawingContext类使用完要Close,类似文件流读写完要close,所以你可以使用using关键字了,使用完自动释放对象。

有了DrawingContext后就可以很轻松的开始绘制你想要的图形了。

除了基本的DrawLine,DrawRectangle,DrawRoundedRectangle,DrawEllipse,当然还有上一篇博客说到的DrawGeometry,还有DrawDrawing来放置Geometry,Drawing对象。

同样的类似winform的验证码绘制代码,DrawText,DrawImage(例如做水印),DrawVedio。

还有些方法可能第一次接触,例如Pop()撤销上一次Push操作,PushClip(),PushEffect(),PushOpacity(),PushOpacityMask(),PushTransform()等

例如代码:

private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            DrawingVisual dv=new DrawingVisual();
            using (DrawingContext dc=dv.RenderOpen())
            {
                Pen pen = new Pen(new SolidColorBrush(Colors.Red), 2);
                //Pen pen = new Pen(Brushes.DarkRed, 2);
                dc.DrawEllipse(Brushes.DarkRed, null, new Point(20, 20), 20, 20);
                dc.DrawLine(pen, new Point(10, 20), new Point(100, 200));
                dc.DrawLine(pen, new Point(0, 10), new Point(80, 150));
            }
        }

DrawingVisual对象一旦关闭,可视化对象不可修改。

以上代码都还算简单,接着我们需要自定义一个Visual放置的面板用于显示元素。除了2个父类的操作,我们还添加了新增和删除,还有一个获取

public class DrawingCanvas : Panel {

        protected override Visual GetVisualChild(int index)
        {
            return base.GetVisualChild(index);
        }
        protected override int VisualChildrenCount
        {
            get
            {
                return base.VisualChildrenCount;
            }
        }

        public void AddVisual(Visual visual) { 
        
        }
        public void DeleteVisual(Visual visual)
        {

        }

        public DrawingVisual GetVisual(Point point) {
            return null;
        }

    }

我们规定了约定,接下来新增具体代码

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)
        {
            return null;
        }

    }

为了让用户单击面板,我们可以拿到单击时候的点下面的visual,我们使用"命中测试"的wpf技术去做

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

能够单击的都是可视化的,我们也在AddVisual中将visual对象加入了可视化树。

由于单击的地方,或者一块区域,可能有多个Visual,所以我们在返回一个List<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;
        }

接下来新建一个窗体

<Window x:Class="ay3dDemo.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:ay3dDemo"
        Title="Window1" Height="600" Width="800" Loaded="Window_Loaded">
    <Grid x:Name="lay">
        <Grid.RowDefinitions>
            <RowDefinition Height="51*"/>
            <RowDefinition Height="518*"/>
        </Grid.RowDefinitions>
        <local:DrawingCanvas Grid.Row="1" x:Name="dcanvas" Background="White" ClipToBounds="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            
        </local:DrawingCanvas>
    </Grid>
</Window>

接下来后台增加drawingvisual到这个面板上

private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            DrawingVisual dv = new DrawingVisual();
            using (DrawingContext dc = dv.RenderOpen())
            {
                Pen pen = new Pen(new SolidColorBrush(Colors.Red), 2);
                //Pen pen = new Pen(Brushes.DarkRed, 2);
                dc.DrawEllipse(Brushes.DarkRed, null, new Point(20, 20), 20, 20);
                dc.DrawLine(pen, new Point(10, 20), new Point(100, 200));
                dc.DrawLine(pen, new Point(0, 10), new Point(80, 150));
            }
            dcanvas.AddVisual(dv);
        }

效果图:

为什么显示呢,因为我们加入到了可视化树上面。

接下来我们增加面板的左键单击事件

<Grid x:Name="lay">
        <Grid.RowDefinitions>
            <RowDefinition Height="51*"/>
            <RowDefinition Height="518*"/>
        </Grid.RowDefinitions>
        <local:DrawingCanvas Grid.Row="1" x:Name="dcanvas" Background="White" ClipToBounds="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                            MouseLeftButtonDown="dcanvas_MouseLeftButtonDown"
                             >
            
        </local:DrawingCanvas>
        <RadioButton Content="圆形" HorizontalAlignment="Left" Margin="77,10,0,0" VerticalAlignment="Top" Name="rdoEllipse"/>
        <RadioButton Content="正方形" HorizontalAlignment="Left" Margin="158,10,0,0" VerticalAlignment="Top" Name="rdosquare"/>
        <RadioButton Content="删除" HorizontalAlignment="Left" Margin="269,10,0,0" VerticalAlignment="Top" Name="rdodelete"/>
        <RadioButton Content="移动" HorizontalAlignment="Left" Margin="393,10,0,0" VerticalAlignment="Top" Name="rdomove"/>
    </Grid>

接下来,后台左键事件中,使用点命中测试

private void dcanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Point pointClicked = e.GetPosition(dcanvas);
            if (rdodelete.IsChecked.Value)
            {
                DrawingVisual dv = dcanvas.GetVisual(pointClicked);
                if (dv != null)
                {
                    dcanvas.DeleteVisual(dv);
                }
            }
        }

接下来我们再次绘制矩形和圆形

private void dcanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Point pointClicked = e.GetPosition(dcanvas);
            if (rdodelete.IsChecked.Value)
            {
                DrawingVisual dv = dcanvas.GetVisual(pointClicked);
                if (dv != null)
                {
                    dcanvas.DeleteVisual(dv);
                }
            }
            else if (rdoEllipse.IsChecked.Value)
            {
                DrawingVisual dv = new DrawingVisual();
                using (DrawingContext dc = dv.RenderOpen())
                {
                    Pen pen = new Pen(new SolidColorBrush(Colors.Red), 2);
                    dc.DrawEllipse(Brushes.DarkRed, pen, pointClicked, 20, 20);
                    dcanvas.AddVisual(dv);
                }
            }
            else if (rdosquare.IsChecked.Value)
            {
                DrawingVisual dv = new DrawingVisual();
                using (DrawingContext dc = dv.RenderOpen())
                {
                    Pen pen = new Pen(new SolidColorBrush(Colors.Red), 5);
                    dc.DrawRectangle(Brushes.YellowGreen, pen, new Rect(pointClicked, new Size(50, 30)));
                    dcanvas.AddVisual(dv);
                }
            }
        }

代码简单易懂,不讲了,知识让你对Visual有认识,不会太害怕这个知识点了。

所以到目前位置你都可以自定义Geometry了,如果你想保存最后的工程图,你可以记住位置和图形就ok了。

关于移动也就不写了,因为可以拿到Visual对象就行了,想怎么操作就怎么操作了。

Pen是边框,Brush是填充画刷

接下来讲一下矩形区域命中测试,首先我们就需要创建一个矩形

思路:

  鼠标左键按下,标记状态是多选状态,公用一个pen,brush,drawingvisual,共享起始点的位置。

  1.左键按下,创建一个DrawingVisual,并放入面板,标记起始点,设置当前鼠标移动时候的状态,捕获鼠标 dcanvas.CaptureMouse();

public bool isMultiSelecting = false;
        private DrawingVisual selectionSquare;
        private Brush selectionSquareBrush = Brushes.Transparent;
        private Pen selectionSquarePen = new Pen(Brushes.Black, 1);
        private Point selectionSquareTopLeft;
        private void dcanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Point pointClicked = e.GetPosition(dcanvas);
            if (rdoMouseMul.IsChecked.Value)
            {
                selectionSquare = new DrawingVisual();
                dcanvas.AddVisual(selectionSquare);
                selectionSquareTopLeft = pointClicked;
                isMultiSelecting = true;
                dcanvas.CaptureMouse();
            }
            .....
         }

  2.鼠标移动时候,如果是多选时候就触发代码,设置pen的风格是虚线,并开始绘制,这里我们可以得到起点和中点,所以可以创建一个虚线的矩形 Visual。

private void dcanvas_MouseMove(object sender, MouseEventArgs e)
        {
            if (isMultiSelecting)
            {
                Point pointDragged = e.GetPosition(dcanvas);
                selectionSquarePen.DashStyle = DashStyles.Dash;

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

鼠标抬起时候,我们根据起点和终点创建一个RectangleGeometry,用于做区域命中测试

private void dcanvas_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {

            if (isMultiSelecting)
            {
                RectangleGeometry geometry = new RectangleGeometry(
                    new Rect(selectionSquareTopLeft, e.GetPosition(dcanvas)));
                List<DrawingVisual> visualsInRegion = dcanvas.GetVisuals(geometry);
                lblmsg.Content = String.Format("你选中了{0}个visual", visualsInRegion.Count);
                isMultiSelecting = false;
                dcanvas.DeleteVisual(selectionSquare);
                dcanvas.ReleaseMouseCapture();
            }
        }

虚线矩形在鼠标抬起时候,从面板中移除,我们并且释放鼠标捕获。

效果图演示

更高性能的WriteableBitmap对象,这里我也不太会,所以不讲了。

讲了这么多基础图形的东西,感觉本篇文章实用的一些东西还挺少,其实了解了Visual可以做出很多高级效果。这里后面我们再讲。


 

为了让文章充实,我暴露一个我的AyImage4Button按钮的制作方法

图片的区域使用,我找了一张4种按钮状态的图片,我们使用按钮去操作

下面看下我的代码

<Style x:Key="{x:Type control:AyImage4Button}"  TargetType="{x:Type control:AyImage4Button}">
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Background" Value="Red"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="true" >
                        <Border.Background>
                            <ImageBrush ImageSource="{Binding Path=Icon, RelativeSource={RelativeSource TemplatedParent}}" Stretch="Uniform" Viewbox="0,0 0.25,1"/>
                        </Border.Background>
                        <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsDefaulted" Value="true">
                            <Setter Property="Background" TargetName="border">
                                <Setter.Value>
                                    <ImageBrush ImageSource="{Binding Path=Icon, RelativeSource={RelativeSource TemplatedParent}}" Stretch="Uniform" Viewbox="0,0 0.25,1"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Background" TargetName="border">
                                <Setter.Value>
                                    <ImageBrush ImageSource="{Binding Path=Icon, RelativeSource={RelativeSource TemplatedParent}}" Stretch="Uniform" Viewbox="0.25,0 0.25,1"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter Property="Background" TargetName="border">
                                <Setter.Value>
                                    <ImageBrush ImageSource="{Binding Path=Icon, RelativeSource={RelativeSource TemplatedParent}}" Stretch="Uniform" Viewbox="0.5,0 0.25,1"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Background" TargetName="border">
                                <Setter.Value>
                                    <ImageBrush ImageSource="{Binding Path=Icon, RelativeSource={RelativeSource TemplatedParent}}" Stretch="Uniform" Viewbox="0.75,0 0.25,1"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
using System;
using System.Collections.Generic;
using System.Text;
using System.Windows.Controls;
using System.Windows.Media;
using System.ComponentModel;
using System.Windows;

namespace Ay.Framework.WPF.Controls
{
    public class AyImage4Button:Button
    {
        /// <summary>
        /// Image4Button
        /// </summary>
        public ImageSource Icon
        {
            get { return (ImageSource)GetValue(IconProperty); }
            set { SetValue(IconProperty, value); }
        }

        // Using a DependencyProperty as the backing store for Icon.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty IconProperty =
            DependencyProperty.Register("Icon", typeof(ImageSource), typeof(AyImage4Button), new PropertyMetadata(null));

    }

}

这里我使用了ImageBrush的Viewbox截取图片的区域部分

ok,我们来使用下

首先引入:

         xmlns:local2="clr-namespace:Ay.Framework.WPF.Controls"

上方引入样式后

   <local2:AyImage4Button x:Name="CloseBtn" Width="32" Height="24" Margin="605,8,0,17"
                                HorizontalAlignment="Left" VerticalAlignment="Center" Icon="close.png"
                            />

ImageBrush还有TileMode就是平铺方式,除了百分比的区域截图,还有绝对尺寸的区域截图ViewportUnits

还有个VisualBrush,做复制样子的。比如应用,做倒影,指定Visual的属性就可以了,倒影,然后你再旋转图形,然后设置OpacityMask

<local2:AyImage4Button x:Name="CloseBtn" Width="32" Height="24" Margin="605,8,0,17"
                                HorizontalAlignment="Left" VerticalAlignment="Center" Icon="close.png"
                            />
        <Rectangle Margin="605,48,155,5" Width="32" Height="24">
            <Rectangle.Fill>
                <VisualBrush Visual="{Binding ElementName=CloseBtn}"/>
            </Rectangle.Fill>
        </Rectangle>

还有个画刷叫BitmapCacheBrush,用法类似VisualBrush,设置Rectangle的Fill的Brush为BitmapCacheBrush,然后使用Target替代Visual,然后指定BitmapCache为,例如BitmapCache使用位图缓存,当然第一次缓存就会有一些延迟了。这里暂时不讲了。比如一个小球在运动,背景是死的,球在背景上动,那么如果背景不是缓存的,那么背景将会一直刷新,就会很费内存,此时的画刷就可以使用BitmapCacheBrush了,它的好处不言而喻了。

接下来,我需要讲一下RenderTransform和LayoutTransform的区别。

LayoutTransform是在转换操作之前就计算好布局了。而RenderTransform是在呈现时候,例如,两个旋转的按钮

<StackPanel  Margin="25"  Background="LightYellow">
      <Button Padding="5" HorizontalAlignment="Left">
        <Button.RenderTransform>
          <RotateTransform Angle="35" CenterX="45" CenterY="5" />
        </Button.RenderTransform>
        <Button.Content>I'm rotated 35 degrees</Button.Content>
      </Button>
      <Button Padding="5" HorizontalAlignment="Left">I'm not</Button>
    </StackPanel>

    <StackPanel  Margin="25"  Background="LightYellow">
      <Button Padding="5" HorizontalAlignment="Left">
        <Button.LayoutTransform>
          <RotateTransform Angle="35" CenterX="45" CenterY="5" />
        </Button.LayoutTransform>
        <Button.Content>I'm rotated 35 degrees</Button.Content>
      </Button>
      <Button Padding="5" HorizontalAlignment="Left">I'm not</Button>
    </StackPanel>

可以看出区别了吧。有时候如果变化的时候发现不对,你就换一下转换布局的方式     o(&cap;_&cap;)o 哈哈

关于动画一章,我为什么还不讲,原因是,Blend中基本的太容易做了,建议大家还是试试,前台代码转后台代码的写法试试。练习,因为我的一些想要的动画都是先用blend写好动画草稿,然后自己在后台转换为后台代码去是实现的,例如那个环状图AyArcChart。

好了,从下篇开始,我就要一直讲3d的知识了,当然也会有很炫的3d的窗口动画


推荐您阅读更多有关于“WPF4.5,”的文章

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

  查看权限

抖音:wpfui 工作wpf,目前主maui

招聘合肥一枚WPF工程师,跟我一个开发组,10-15K,欢迎打扰

目前在合肥市企迈科技就职

AYUI8全源码 Github地址:前往获取

杨洋(AaronYang简称AY,安徽六安人)AY唯一QQ:875556003和AY交流

高中学历,2010年开始web开发,2015年1月17日开始学习WPF

声明:AYUI7个人与商用免费,源码可购买。部分DEMO不免费

不是从我处购买的ayui7源码,我不提供任何技术服务,如果你举报从哪里买的,我可以帮你转正为我的客户,并送demo

查看捐赠

AYUI7.X MVC教程 更新如下:

第一课 第二课 程序加密教程

标签列表