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

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

这一次的目标是完成

两个任务。

本节完成后的效果：

本文分为三个部分：

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

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

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

修改之前的代码

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

做出的改动：

1.修改Image为Canvas。

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

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

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

颜色部分

效果：

过程：首先是绑定颜色相关的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];

}

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

通过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();

}

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

之后就是移动的部分，在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。

源码

巴特西

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

修改之前的代码

颜色部分

拖动部分

最新文章

热门文章