WPF一个完整的GIF制作工具实例（Part1：绘图控件的封装）

最近在家闭门造车，写了一个简单的GIF制作工具，效果如下：

下面介绍下实现步骤：

首先是绘图控件部分功能，实现了图片与坐标宽高之间的绑定。

1、MyImage类，由于底图不可选中编辑，所以加入了IsCanClick是否可以点击选中标志，在鼠标操作中加入判断

if (!IsCanClick) return;

其他与WPF中GDI+图形图像的绘制：（七）绘制图像——鼠标拖动改变位置和大小中一致，这里不再赘述。

2、由于要对绘图控件中的MyImage进行绑定，所以新建BindItemClass.cs类

    public partial class BindItemClass
    {
        /// <summary>
        /// 图源
        /// </summary>
        public BitmapImage ImgSource { get; set; }
        /// <summary>
        /// 是否是底图
        /// </summary>
        public bool IsBackground { get; set; }
        /// <summary>
        /// 层级
        /// </summary>
        public int ZIndex { get; set; }
        /// <summary>
        /// X坐标
        /// </summary>
        public double LocationX { get; set; }
        /// <summary>
        /// Y坐标
        /// </summary>
        public double LocationY { get; set; }
        /// <summary>
        /// 宽
        /// </summary>
        public double ItemWidth { get; set; }
        /// <summary>
        /// 高
        /// </summary>
        public double ItemHeight { get; set; }
        /// <summary>
        /// X坐标绑定控件
        /// </summary>
        public object BindControlLocationX { get; set; }
        /// <summary>
        /// Y坐标绑定控件
        /// </summary>
        public object BindControlLocationY { get; set; }
        /// <summary>
        /// 宽绑定控件
        /// </summary>
        public object BindControlItemWidth { get; set; }
        /// <summary>
        /// 高绑定控件
        /// </summary>
        public object BindControlItemHeight { get; set; }
    }

3、MyCanvas自定义控件的封装

新建自定义控件MyCanvas，添加MouseLeftButtonDown，MouseLeftButtonUp，MouseMove事件，xaml窗体代码：

<Canvas x:Class="MakeGif.MyCanvas"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
        xmlns:local="clr-namespace:MakeGif"
        mc:Ignorable="d" 
        Background="White" Width="840" Height="472" ClipToBounds="True"
        MouseLeftButtonDown="Canvas_MouseLeftButtonDown" MouseLeftButtonUp="Canvas_MouseLeftButtonUp" MouseMove="Canvas_MouseMove">
</Canvas>

其交互逻辑与博文WPF中GDI+图形图像的绘制：（八）位置坐标和宽高与控件绑定展示中一致，这里对其做了功能完善与封装   给出源码：

    /// <summary>
    /// MyCanvas.xaml 的交互逻辑
    /// </summary>
    public partial class MyCanvas : Canvas
    {
        private Point pBefore = new Point();//鼠标点击前坐标
        private Point eBefore = new Point();//图片移动前坐标     
        private double wBefore;//图片改变大小前宽
        private double hBefore;//图片改变大小前高
        private int minImgValue = 10;//图片最小宽高
        private bool IsCanMove = false;//是否可以移动

        public event MouseEventHandler OnChangeLocationX;// 坐标改变事件
        public event MouseEventHandler OnChangeLocationY;// 坐标改变事件
        public event MouseEventHandler OnChangeW;//宽高改变事件
        public event MouseEventHandler OnChangeH;//宽高改变事件

        public MyCanvas()
        {
            InitializeComponent();
        }

        #region 提供给外部的调用方法
        /// <summary>
        /// 展示素材
        /// </summary>
        public void ShowItem(BindItemClass item)
        {
            if (item == null) return;

            MyImage imgPic = new MyImage();
            imgPic.Tag = item;
            imgPic.Source = item.ImgSource;
            imgPic.Width = item