先说结论：实现了在自定义大小的窗口中，加载图片，并在图片上绘制一个矩形框；且在窗口大小改变的情况，保持绘制的矩形框与图片的先对位置不变。
在WinForm中，我们可以很方便地绘制自己需要的内容，在WPF中似乎被限制了，不能够很方便的使用；然后需求有总是奇葩的，所以在这里简单地总结一下。
在WinForm中，如果需要自己绘制，就需要拿到Graphics对象；同样的，我们就希望在WPF也得到一个其同样作用的对象，这个对象就是DrawingContext类的实例对象。
具体来说，就是要重载 UIElement 类的 OnRender 方法。
public class YourControl : UIElement
{
/// <summary>
/// 重写绘制
/// </summary>
protected override void OnRender(DrawingContext drawingContext)
{
// your logic here
}
}
Talk is cheap, here is the code. 下面的代码完整的组织后，编译可运行，已经调试通了；希望对看到的同学有帮助，有问题，我们也可以探讨。
- 项目的组织方式；
- DrawableGrid.cs
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging; namespace draw
{
/// <summary>
/// 基本思想
/// 1 在绘制结束时，计算相对于图片真实大小的情况下，绘制的矩形框的大小，及相对于图片的偏移
/// 2 每次刷新绘制前，计算当前窗口大小，及应该绘制的图片的大小，及其偏移
/// 3 每次刷新绘制前，计算绘制的矩形框，相对于当前图片的偏移
/// 其中，
/// 框的偏移及大小，每次使用针对原始图片的数据，作为基础来计算比例，就能够保证即使窗体缩小到0，依旧可以恢复
/// </summary>
public class DrawableGrid : Control
{
#region vars private Point mousedown;
private Point mouseup;
private bool mouseBtnDown = false;
private bool bSelectionDraw = false; private SolidColorBrush mBrush = Brushes.LightBlue;
private Pen mPen = new Pen(Brushes.Red, );
private BitmapImage Img = null; private Grid drawgrid; private Rect curPicRect;
private Rect curSelectRect; private Rect realSelectRect;
private Rect realPicRect; #endregion #region ctors static DrawableGrid()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(DrawableGrid), new FrameworkPropertyMetadata(typeof(DrawableGrid)));
} #endregion #region overrides /// <summary>
/// 重写绘制
/// </summary>
protected override void OnRender(DrawingContext drawingContext)
{
if (Img == null)
return; curPicRect = CalcRect(Img.Height, Img.Width, this.ActualHeight, this.ActualWidth);
curSelectRect = CalcResizeRect(curPicRect.X, curPicRect.Y, realSelectRect.X, realSelectRect.Y, realSelectRect.Height, realSelectRect.Width, curPicRect.Height / realPicRect.Height); drawingContext.DrawImage(Img, curPicRect); if (mouseBtnDown)
{
int xmin = (int)Math.Min(mousedown.X, mouseup.X);
int xmax = (int)Math.Max(mousedown.X, mouseup.X);
int ymin = (int)Math.Min(mousedown.Y, mouseup.Y);
int ymax = (int)Math.Max(mousedown.Y, mouseup.Y);
var r = new Rect(xmin, ymin, xmax - xmin, ymax - ymin);
drawingContext.DrawRectangle(mBrush, mPen, r);
} if (bSelectionDraw)
{
drawingContext.DrawRectangle(mBrush, mPen, curSelectRect);
} base.OnRender(drawingContext);
} public override void OnApplyTemplate()
{
drawgrid = GetTemplateChild("drawgrid") as Grid;
if (drawgrid != null)
{
drawgrid.MouseDown += drawgrid_MouseDown;
drawgrid.MouseMove += drawgrid_MouseMove;
drawgrid.MouseUp += drawgrid_MouseUp;
} string picaddr = System.IO.Path.Combine(System.AppDomain.CurrentDomain.BaseDirectory, "pic", "2.jpg");
Img = new BitmapImage(new Uri(picaddr));
realPicRect = new Rect(, , Img.Width, Img.Height);
} #endregion #region methods /// <summary>
/// 计算图片大小相对于当前的控件大小，应该如何展示
/// </summary>
/// <param name="imgHeight">图片高</param>
/// <param name="imgWidth">图片宽</param>
/// <param name="gridHeight">容器高</param>
/// <param name="gridWidth">容器宽</param>
/// <returns>当前实际应该绘制图片的矩形大小及相对于容器的偏移</returns>
private Rect CalcRect(double imgHeight, double imgWidth, double gridHeight, double gridWidth)
{
Rect rect;
double imgRatio = imgHeight / imgWidth;
double gridRatio = gridHeight / gridWidth; if (imgRatio >= gridRatio)
{
double hi = gridHeight;
double wi = gridHeight / imgRatio; double left = (gridWidth - wi) / ;
double top = ; rect = new Rect(left, top, wi, hi);
}
else
{
double wi = gridWidth;
double hi = gridWidth * imgRatio; double left = ;
double top = (gridHeight - hi) / ; rect = new Rect(left, top, wi, hi);
} return rect;
} /// <summary>
/// 在图片上绘制的框相对于图片的位置
/// </summary>
private Rect CalcResizeRect(double curx, double cury, double lastx, double lasty, double lastheight, double lastwidth, double ratio)
{
double x = curx + lastx * ratio;
double y = cury + lasty * ratio;
double wid = lastwidth * ratio;
double hei = lastheight * ratio;
return new Rect(x, y, wid, hei);
} #endregion #region events private void drawgrid_MouseDown(object sender, MouseButtonEventArgs e)
{
if (e.LeftButton == MouseButtonState.Pressed && e.RightButton == MouseButtonState.Released)
{
bSelectionDraw = false;
mouseBtnDown = true;
mousedown = e.GetPosition(drawgrid);
}
} private void drawgrid_MouseMove(object sender, MouseEventArgs e)
{
if (mouseBtnDown)
{
mouseup = e.GetPosition(drawgrid);
this.InvalidateVisual();
}
} private void drawgrid_MouseUp(object sender, MouseButtonEventArgs e)
{
if (e.LeftButton == MouseButtonState.Released && e.RightButton == MouseButtonState.Released)
{
bSelectionDraw = true;
mouseBtnDown = false;
mouseup = e.GetPosition(drawgrid); int xmin = (int)Math.Min(mousedown.X, mouseup.X);
int xmax = (int)Math.Max(mousedown.X, mouseup.X);
int ymin = (int)Math.Min(mousedown.Y, mouseup.Y);
int ymax = (int)Math.Max(mousedown.Y, mouseup.Y); var relativeRect = new Rect(xmin, ymin, xmax - xmin, ymax - ymin);
var fullSizeImgRect = CalcRect(Img.Height, Img.Width, Img.Height, Img.Width);
double tempration = fullSizeImgRect.Height / curPicRect.Height;
realSelectRect = CalcResizeRect(fullSizeImgRect.X, fullSizeImgRect.Y, relativeRect.X - curPicRect.X, relativeRect.Y - curPicRect.Y, relativeRect.Height, relativeRect.Width, tempration);
}
} #endregion
}
}
- DrawableGrid.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:draw"> <Style TargetType="{x:Type local:DrawableGrid}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:DrawableGrid}">
<Grid x:Name="drawgrid" Background="Transparent" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
- Generic.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="draw;component/DrawableGrid/DrawableGrid.xaml" />
</ResourceDictionary.MergedDictionaries> </ResourceDictionary>
- MainWindow.xaml
<Window x:Class="draw.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:draw"
Title="MainWindow" Height="" Width="">
<local:DrawableGrid />
</Window>
- MainWindow.xaml.cs
using System.Windows; namespace draw
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
}
}