最近在家闭门造车,写了一个简单的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