WPF学习11：基于MVVM Light 制作图形编辑工具（2）

本文是WPF学习10：基于MVVM Light 制作图形编辑工具（1）的后续

这一次的目标是完成

两个任务。

---

画布

效果：

画布上，选择的方案是：直接以Image作为画布，使用RenderTargetBitmap绑定为Image的图片源，这样可以为后续的导出图片功能提供很大的便利。

对拖动栏XAML进行如下修改：

<ScrollViewer  HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Grid.Column="1" Grid.Row="1">
    <Canvas  VerticalAlignment="Top" HorizontalAlignment="Left"  Width="{Binding ActualWidth,ElementName=ImageBorder}"  SnapsToDevicePixels="False" Height="{Binding Path=ActualHeight,ElementName=ImageBorder}" Margin="50 50 0 0 " ClipToBounds="True">
        <Border Name="ImageBorder" BorderBrush="Black" BorderThickness="1">
            <Image Source="{Binding DrawingBitmap}">
            </Image>
        </Border>
    </Canvas>
</ScrollViewer>

相应的，ViewModel中也要添加代码。

private RenderTargetBitmap _drawingBitmap;

public RenderTargetBitmap DrawingBitmap
{
    get { return _drawingBitmap; }
    set
    {
        _drawingBitmap = value;
        RaisePropertyChanged("DrawingBitmap");
    }
}

到这里，画布的绑定就完成了。

现在要完成调节画布大小的相关代码，首先，在XAML增加两个输入框使得长宽由界面配置：

<TextBlock VerticalAlignment="Center"><Run Text="宽："/></TextBlock>
<TextBox Width="50" Margin="0 0 10 0" Text="{Binding DrawingAreaWidth, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}"/>
<TextBlock VerticalAlignment="Center"><Run Text="高："/></TextBlock>
<TextBox Width="50" Margin="0 0 10 0" Text="{Binding DrawingAreaHeight, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}"/>
<Button  Margin="10 0 10 0" Content="配置" Command="{Binding SetDrawingAreaSize}"/>

ViewModel部分:

private Int32 _drawingAreaWidth;
public Int32 DrawingAreaWidth
{
    get { return _drawingAreaWidth; }
    set
    {
        _drawingAreaWidth = value;
        RaisePropertyChanged("DrawingAreaWidth");
    }
}

private Int32 _drawingAreaHeight;
public Int32 DrawingAreaHeight
{
    get { return _drawingAreaHeight; }
    set
    {
        _drawingAreaHeight = value;
        RaisePropertyChanged("DrawingAreaHeight");
    }
}

最后是Command SetDrawingAreaSize 的实现：

private ICommand _setDrawingAreaSize;
public ICommand SetDrawingAreaSize
{
    get
    {
        return _setDrawingAreaSize ?? (_setDrawingAreaSize = new RelayCommand(() =>
            {
                DrawingBitmap = new RenderTargetBitmap(DrawingAreaWidth, DrawingAreaHeight,
                    96, 96, PixelFormats.Pbgra32);
                var drawingVisual = new DrawingVisual();
                using (var context = drawingVisual.RenderOpen())
                {
                    context.DrawRectangle(Brushes.White, null,
                        new Rect(0, 0, DrawingAreaWidth, DrawingAreaHeight));
                }
                DrawingBitmap.Render(drawingVisual);
            }
            , () => (DrawingAreaWidth != 0 && DrawingAreaHeight != 0)));
    }
}

至此，本节最开始的效果就完成啦。

---

直线

效果如下：

XAML中需要引入两个命名空间：

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:command=http://www.galasoft.ch/mvvmlight

引入后我们就可以为Image添加三个响应鼠标的命令。

<Image Source="{Binding DrawingBitmap}">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseMove">
            <command:EventToCommand Command="{Binding MouseMoveCommand}" PassEventArgsToCommand="True" />
        </i:EventTrigger>
        <i:EventTrigger EventName="MouseDown" >
            <command:EventToCommand Command="{Binding MouseDownCommand}" PassEventArgsToCommand="True"/>
        </i:EventTrigger>
        <i:EventTrigger EventName="MouseUp" >
            <command:EventToCommand Command="{Binding MouseUpCommand}" PassEventArgsToCommand="True"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
</Image>

在界面上绘制Line控件，用于动态操作时的显示，操作完毕，隐藏控件，在Image上绘图。

<Line Stroke="Black" StrokeThickness="1" Visibility="{Binding LineVisibility}"
X1="{Binding PositionX1}" X2="{Binding PositionX2}"
Y1="{Binding PositionY1}" Y2="{Binding PositionY2}"/>

ViewModel添加以下属性，X2,Y1,Y2略。

private Visibility _lineVisibility = Visibility.Hidden;
public Visibility LineVisibility
{
    get { return _lineVisibility; }
    set
    {
        _lineVisibility = value;
        RaisePropertyChanged("LineVisibility");
    }
}

private Double _positionX1;
public Double PositionX1
{
    get { return _positionX1; }
    set
    {
        _positionX1 = value;
        RaisePropertyChanged("PositionX1");
    }
}

为了让ViewModel能知道当前的绘图状态（直线，圆，矩形）在加一些数据绑定：

<RadioButton Style="{StaticResource StatusBarButton}" IsChecked="{Binding LineModeEnable}">
    <Line X1="0" Y1="0" X2="15" Y2="15" Stroke="Black" StrokeThickness="1"></Line>
</RadioButton>
<RadioButton Style="{StaticResource StatusBarButton}" IsChecked="{Binding RectangleModeEnable}">
    <Rectangle Width="20" Height="15" Stroke="Black" StrokeThickness="1"></Rectangle>
</RadioButton>
<RadioButton Style="{StaticResource StatusBarButton}" IsChecked="{Binding EllipseModeEnable}">
    <Ellipse Width="20" Height="20" Stroke="Black" StrokeThickness="1"></Ellipse>
</RadioButton>

最后，我们编写三个鼠标相应的指令：

public ICommand SetDrawingAreaSize
{
    get
    {
        return _setDrawingAreaSize ?? (_setDrawingAreaSize = new RelayCommand(() =>
            {
                DrawingBitmap = new RenderTargetBitmap(DrawingAreaWidth, DrawingAreaHeight,
                    96, 96, PixelFormats.Pbgra32);
                var drawingVisual = new DrawingVisual();
                using (var context = drawingVisual.RenderOpen())
                {
                    context.DrawRectangle(Brushes.White, null,
                        new Rect(0, 0, DrawingAreaWidth, DrawingAreaHeight));
                }
                DrawingBitmap.Render(drawingVisual);
            }
            , () => (DrawingAreaWidth != 0 && DrawingAreaHeight != 0)));
    }
}

private ICommand _mouseMoveCommand;
public ICommand MouseMoveCommand
{
    get
    {
        return _mouseMoveCommand ?? (_mouseMoveCommand = new RelayCommand<MouseEventArgs>((e) =>
        {
            PositionX2 = e.GetPosition((IInputElement)e.Source).X;
            PositionY2 = e.GetPosition((IInputElement)e.Source).Y;
        }
            , (e) => true));
    }
}

private ICommand _mouseDownCommand;
public ICommand MouseDownCommand
{
    get
    {
        return _mouseDownCommand ?? (_mouseDownCommand = new RelayCommand<MouseEventArgs>((e) =>
        {
            if(LineModeEnable)
                LineVisibility = Visibility.Visible;
            PositionX1 = e.GetPosition((IInputElement)e.Source).X;
            PositionY1 = e.GetPosition((IInputElement)e.Source).Y;
        }
            , (e) => true));
    }
}

private ICommand _mouseUpCommand;
public ICommand MouseUpCommand
{
    get
    {
        return _mouseUpCommand ?? (_mouseUpCommand = new RelayCommand<MouseEventArgs>((e) =>
        {
            var drawingVisual = new DrawingVisual();
            using (var context = drawingVisual.RenderOpen())
            {
                //此处的-1用于消除画布边界带来的偏差，因为目前都是固定的，所以没有使用数据绑定。
                if(LineModeEnable)
                context.DrawLine(new Pen(Brushes.Black, 1), new Point(PositionX1 - 1, PositionY1 - 1), new Point(PositionX2 - 1, PositionY2 - 1 ));
            }
            DrawingBitmap.Render(drawingVisual);
            LineVisibility = Visibility.Hidden;
        }
            , (e) => true));
    }
}

---

圆形

效果：

XAML代码：

<Ellipse Stroke="Black" StrokeThickness="1" Visibility="{Binding EllipseVisibility}"
        Canvas.Left="{Binding PositionX1}" Canvas.Top="{Binding PositionY1}"
        Width="{Binding ShapeWidth}" Height="{Binding ShapeHeight}"></Ellipse>

MouseDown增加：

if (EllipseModeEnable)
{
    ShapeWidth = ShapeHeight = 0;
    EllipseVisibility = Visibility.Visible;
}

Move增加：

ShapeWidth = Math.Abs(PositionX2 - PositionX1);
ShapeHeight = Math.Abs(PositionY2 - PositionY1);

Up增加:

if(EllipseModeEnable)
    context.DrawEllipse(new SolidColorBrush(Colors.White), new Pen(Brushes.Black, 1),
        new Point(PositionX1 + ShapeWidth / 2 - 1, PositionY1 + ShapeHeight / 2 - 1), ShapeWidth / 2, ShapeHeight / 2);

---

矩形

效果如上，代码与圆形相似，故省略。

下一节将会完成图形的放大、缩小、移动，颜色的填充。

开发环境VS2013， .NET4.5

源码