[uwp]自定义图形裁切控件
开始之前，先上一张美图。图中的花叫什么,我已经忘了，或者说从来就不知道，总之谓之曰“野花”。只记得花很美，很香，春夏时节，漫山遍野全是她。这大概是七八年前的记忆了，不过她依旧会很准时的在山上沐浴春光，灿烂盛开，只是我看不到罢了。
文艺过后，就要看到重点了。上图是Windows10自带的图片裁切工具，应该是作为插件集成在“照片”应用中。当然不止于此，几乎所有涉及照片上传类的APP，都会提供裁切图片这个基本功能。实现方式有很多种，我这儿给出自己的一种解决方案。
先上效果图：
大致分析如下：
图片本身不作为裁切工具的一部分，只是把裁切控件放在图片上层，然后调整四个按钮，选出想要裁切的区域，计算出裁切区域的坐标和长宽信息，然后根据比例应用到图片上面，从而实现裁 切。这篇博文主要描述怎么实现裁切控件本身，而实际裁切图片等不进行讨论。
知道了要干什么，接着就要想想怎么办。
由于最终要计算出一个裁切区域，所以控件实现一个自定义附加属性，用来对外提供裁切区域信息，为了简单，直接选用Windows.Foundation.Rect这个结构体来描述。
就该控件自身结构来讲：由Canvas+Path+Button * 4这六个主要的控件来实现。
Canvas:作为容器，用来承载Path，Button等，关键是方便操作子元素的位置等。
Button:很明显的四个拖拽点，这儿用Button.Template重写了Button的外观，将其改为一个圆（Ellipse)
改变中间矩形区域大小就是通过拖拽Button来实现，显然Button支持拖拽，这儿我用自定义Behavior实现它的拖拽功能，关于该Behavior的实现，可以参看上一篇博文《[uwp]自定义Behavior之随意拖动》
Path:一个填充路径。看到上图中黑色半透明部分，就是该对象的可视部分。具体是通过两个矩形减去重叠区域实现，第一个矩形就是和Canvas等大的一个矩形，第二个矩形就是中间透明区域的矩形，两个矩形进行减去重叠区域的运算后，就可以得到Path的区域。具体的减去操作也很简单，通过GeometryGroup实现，设置其填充规则为FillRule.EvenOdd即可。事实上，经过分解这个Path后，最终就回归到怎么计算中间透明区域大小的问题上，而这个问题，可以通过四个Button的位置来计算。
通过上面的分析，只需要计算四个Button的位置信息即可，那么这个时候，就可以利用XAML强大的依赖属性系统（DependencyProperty），通过数据绑定等技巧来实际操作。
针对四个Button的位置信息，分析如下：
1.四个Button，为了在拖动的任意时刻，保持一个矩形区域，当一个按钮移动时，和他同行或者同列的按钮会跟着动，变化量相同。（此处用左上，右上，左下，右下来标识四个Button）
所以可以选左上和右下两个Button为主动点，他们的位置定了，另外两个也就定了。值得注意的是，Button的位置是通过附加属性Canvas.Left和Canvas.Top来确定的。所以让左下的Canvas.Left和左上的Canvas.Left绑定，左下的Canvas.Top和右下的Canvas.Top绑定;让右上的Canvas.Left和右下的Canvas.Left绑定，右上Canvas.Top和左上的Canvas.Top绑定。经过绑定之后，左上和右下的位置变化，就能引起左下和右上的位置变化，如果将以上绑定全部设置为双向绑定，那么左下和右上的变化也就同样能引起其他连个主动点的变化。
2.确定了两个主动点后，便可以自定义一个类来表示这两个主动点的一些信息了（设置坐标X1,Y1,X2,Y2）。在接下来的实现中，用PointModel这个类来表示。
最终，只需要关注PointModel中两个主动点坐标的变化即可。
为了检测这种变化，PointModel中定义了四个属性X1,Y1,X2,Y2,在他们的Set方法中，包含了控制矩形大小和主动点自身位置（边界检测和两个Button靠近检测）的一些逻辑。
接着贴出PointModel的代码：
public class PointModel : INotifyPropertyChanged { private double _x1;//代表左上Button的Canvas.Left public double X1 { get { return _x1; } set { double abspos = 0 - _buttonWidth / 2.0;//button最左可以到达的位置 if (value < abspos)//如果实际位置还小于该最小位置， { _x1 = abspos;//则强制修改Button的位置到最边界处 _call?.Invoke("X1", _x1);//通知修改Button位置 _rectcall?.Invoke();//修改矩形区域位置 return; } if ((_x2 - value) >= _minRectWidth)//如果Button和同行的button间距大于_minRectWidth，属正常情况 { _x1 = value; OnPropertyChanged(); } else//如果小于该最小间距 { _x1 = _x2 - _minRectWidth;//根据最小间距，强制修改Button位置。 _call?.Invoke("X1", _x1);//通知修改Button位置 } _rectcall?.Invoke();//修改矩形区域位置 } } private double _y1; public double Y1 { get { return _y1; } set { double abspos = 0 - _buttonWidth / 2.0; if (value < abspos) { _y1 = abspos; _call?.Invoke("Y1", _y1); _rectcall?.Invoke(); return; } if ((_y2 - value) >= _minRectWidth) { _y1 = value; OnPropertyChanged(); } else { _y1 = _y2 - _minRectWidth; _call?.Invoke("Y1", _y1); } _rectcall?.Invoke(); } } private double _x2; public double X2 { get { return _x2; } set { double abspos = CanvasRect.Width - _buttonWidth / 2.0; if (value > abspos) { _x2 = abspos; _call?.Invoke("X2", _x2); _rectcall?.Invoke(); return; } if ((value - _x1) >= _minRectWidth) { _x2 = value; OnPropertyChanged(); } else { _x2 = _minRectWidth + _x1; _call?.Invoke("X2", _x2); } _rectcall?.Invoke(); } } private double _y2; public double Y2 { get { return _y2; } set { double abspos = CanvasRect.Height - _buttonWidth / 2.0; if (value > abspos) { _y2 = abspos; _call?.Invoke("Y2", _y2); _rectcall?.Invoke(); return; } if ((value - _y1) >= _minRectWidth) { _y2 = value; OnPropertyChanged(); } else { _y2 = _y1 + _minRectWidth; _call?.Invoke("Y2", _y2); } _rectcall?.Invoke(); } } public event PropertyChangedEventHandler PropertyChanged; public void OnPropertyChanged([CallerMemberName] string propertyName = "") { var handler = PropertyChanged; handler?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } /// <summary> /// 用于限制Button靠近边界和互相靠近的回调方法 /// </summary> private Action<String, double> _call; /// <summary> /// 用于改变矩形区域大小的回调方法 /// </summary> private Action _rectcall; private Rect _canvasRect;//代表中间透明矩形区域 public Rect CanvasRect { get { return _canvasRect; } set { _canvasRect = value; OnPropertyChanged(); } } private double _buttonWidth; //Button的宽度 private double _minRectWidth;//中间透明矩形区域的最小宽度，不能让四个点重合，这儿最小宽度和最小高度都用这个来表示 public PointModel(Action<string, double> pointAction, Action rectAction, double btnWidth, double minRectWidth) { _call = pointAction; _rectcall = rectAction; _buttonWidth = btnWidth; _minRectWidth = minRectWidth; } } public class RectModel : INotifyPropertyChanged { private GeometryGroup _group; public GeometryGroup Group { get { return _group; } set { _group = value; PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Group")); } } public event PropertyChangedEventHandler PropertyChanged; }
其中最繁杂的部分就是Set方法里面控制Button位置的代码，主要有以下两部分：
1.保证Button不超出边界
2.保证Button和其他Button的最小间距。
在PointModel的构造器中，加入了两个Action,一个SetStaticPoint用来控制Button位置，另一个SetRect用来控制中间透明矩形的大小
1.针对SetStaticPoint，不同的坐标执行不同的设置方法。
2.针对SetRect,里面包含了构造Path的方法，如下
private void SetRect() { if (group == null) { group = new GeometryGroup(); group.FillRule = FillRule.EvenOdd;//设置规则为减去重叠部分。 } group.Children.Clear(); group.Children.Add(new RectangleGeometry() { Rect = new Rect { X = 0, Y = 0, Height = surface.ActualHeight, Width = surface.ActualWidth } });//大矩形区域，和Canvas同样大小 ClipRect = new Rect { X = Points.X1 + ButtonWidth / 2.0, Y = Points.Y1 + ButtonWidth / 2.0, Width = Points.X2 - Points.X1, Height = Points.Y2 - Points.Y1 };//中间透明区域大小 group.Children.Add(new RectangleGeometry() { Rect = ClipRect }); RectPath.Group = group; }
大致核心如上，其他部分都是细枝末节了。最后我把整个逻辑用UserContrl做了一个简单的整合，弄了一个ClipRectangle控件。
可以直接作为普通控件使用，只需要设置该控件的Width和Height即可，最后的裁切区域结果，通过一个自定义属性ClipRectProperty来提供。
在写这个控件过程中，遇到几个问题和心得如下：
1.x:Bind：这种绑定方式好像不支持针对附加属性的双向绑定，单向没问题
2.起初一直尝试直接用Rectangle来实现，但都不行，直到后来用Blend把两个矩形进行相减合并时，发现XAML中把原来的Rectangle换成了Path，于是才有了想法。
3.DependencyObject是可以说是XAML的核心，这东西一定要学好（现在只是大概会用而已）
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~分割线
