你的位置:首页 > ASP.net教程

[ASP.net教程]WPF学习12:基于MVVM Light 制作图形编辑工具(3)


    本文是WPF学习11:基于MVVM Light 制作图形编辑工具(2)的后续

    这一次的目标是完成image

    两个任务。

    本节完成后的效果:

    B

    本文分为三个部分:

    1.对之前代码不合理的地方重新设计。

    2.图形可选择外框颜色,填充颜色的实现简介。

    3.拖动图形的实现简介。


 

修改之前的代码

    我们在写代码的时候,经常回头看之前的代码,如果觉得之前的代码有问题,这时候条件如果允许,就改了吧。

    做出的改动:

    1.修改Image为Canvas。    

    目的:使图形的缩放和移动这部分的代码实现大大简化。

    去除了配置按钮。原因是:因为Image被换成了Canvas,更改画布大小的成本降低至接近0,直接把Canvas的宽高实现绑定就可以了。、

    代码就不贴了,附件中有工程源码。

   


 

颜色部分

    效果:image

    过程:首先是绑定颜色相关的List与属性。在前台代码中我们需要写好模板与绑定:

<TextBlock VerticalAlignment="Center"><Run Text="外框颜色:"/></TextBlock><ComboBox Width="100" Margin="0 0 10 0" ItemsSource="{Binding AvailableColors}" SelectedItem="{Binding BorderColor}">  <ComboBox.ItemTemplate>    <DataTemplate>      <Rectangle Width="87" Height="15" Fill="{Binding}"/>    </DataTemplate>  </ComboBox.ItemTemplate></ComboBox><TextBlock VerticalAlignment="Center"><Run Text="填充颜色:"/></TextBlock><ComboBox Width="100" Margin="0 0 10 0" ItemsSource="{Binding AvailableColors}" SelectedItem="{Binding BackGroundColor}">  <ComboBox.ItemTemplate>    <DataTemplate>      <Rectangle Width="87" Height="15" Fill="{Binding}"/>    </DataTemplate>  </ComboBox.ItemTemplate></ComboBox>

    接下来,我们在ViewModel中要实现一个列表与两个颜色的属性,注意:ItemSource绑定的元素需要为Public的属性,不能是字段!

private Brush _borderColor;public Brush BorderColor{  get { return _borderColor; }  set   {     _borderColor = value;    RaisePropertyChanged("BorderColor");  }}private Brush _backGroundColor;public Brush BackGroundColor{  get { return _backGroundColor; }  set   {    _backGroundColor = value;    RaisePropertyChanged("BackGroundColor");  }}    public List<Brush> AvailableColors { get; set; }/// <summary>/// Init property in ctor/// </summary>public MainViewModel(){  AvailableColors = new List<Brush>()   {     new SolidColorBrush(Colors.Red),    new SolidColorBrush(Colors.Black),    new SolidColorBrush(Colors.Green),    new SolidColorBrush(Color.FromRgb(1,180,255)),  };  //Init default drawing size & Color  DrawingAreaWidth = DrawingAreaHeight = 200;  BackGroundColor = BorderColor = AvailableColors[0];}

    如图image,到了这一步,数据绑定就完成啦。

    通过BackGroundColor,BorderColor我们又可以拿到选定的颜色,在后台代码中,画图时,把它们用上就好了。代码位于附件。

 


 

拖动部分

    新建类ShapeManagement 由它来管理缩放与移动。

class ShapeManagement{  private Shape previseSelectedShape;  private Brush previseSelectedShapeBrush;  //使被选中的图形呈现橘黄色  private Brush selectedBrush = Brushes.Orange;  public void SelectedChange(Shape shape)  {    ClearSelectedEffect();    previseSelectedShape = shape;    previseSelectedShapeBrush = previseSelectedShape.Fill.Clone();    previseSelectedShape.Fill = selectedBrush;  }  public void ClearSelectedEffect()  {    if (previseSelectedShape != null)      previseSelectedShape.Fill = previseSelectedShapeBrush;  }}

    在ViewModel创建一个图形管理器:

private ShapeManagement shapeManagement = new ShapeManagement();

    在MouseDown中加入如下代码:

if(MovingModeEnable){  if (e.Source is Shape)    shapeManagement.SelectedChange(e.Source as Shape);  else if(e.Source is Panel)    shapeManagement.ClearSelectedEffect();}

    如图,我们现在可以拿到被点击的对象A

    之后就是移动的部分,在ShapeManagement加入如下代码:

class ShapeItem{  public Shape DisplayShape { get; set; }  public TranslateTransform translateTransform { get; set; }  public Point PositonRecord { get; set; }  public Point HistoryPositonRecord { get; set; }}private List<ShapeItem> shapeList = new List<ShapeItem>();public void Add(Shape shape){  var shapeItem = new ShapeItem()  {    DisplayShape = shape,    translateTransform = new TranslateTransform(),    PositonRecord = new Point(),    HistoryPositonRecord = new Point()  };  shapeList.Add(shapeItem);  shape.RenderTransform = new TransformGroup()  {    Children = new TransformCollection() { shapeItem.translateTransform }  };}

    之前,我们已经拿到了当前选中的对象,然后就可以根据LINQ查询,来操作该对象,找到相应的变形,点的信息,予以操作。

    代码在附件中,目前还有一些BUG。

    开发环境VS2013, .NET4.5。

    源码