[UWP]如何實現UWP平臺最佳圖片裁剪控制項

前幾天我寫了一個UWP圖片裁剪控制項ImageCropper（ "開源地址" ），自認為算是現階段UWP社區里最好用的圖片裁剪控制項了，今天就來分享下我編碼的過程。為什麼又要造輪子因為開發需要，我們需要使用一個圖片裁剪控制項來編輯用戶上傳的圖片。本著儘量不重覆造輪子的原則，我找了下現在UWP生態圈裡可 ...

前幾天我寫了一個UWP圖片裁剪控制項ImageCropper（開源地址），自認為算是現階段UWP社區里最好用的圖片裁剪控制項了，今天就來分享下我編碼的過程。

為什麼又要造輪子

因為開發需要，我們需要使用一個圖片裁剪控制項來編輯用戶上傳的圖片。本著儘量不重覆造輪子的原則，我找了下現在UWP生態圈裡可用的圖片裁剪控制項，然後發現一個悲慘的事實：UWP生態圈甚至沒有一個體驗優秀的圖片裁剪控制項！

舉例來說，就連現在商店裡做的比較好的網易雲音樂、IT之家以及愛奇藝等應用，他們使用的圖片裁剪控制項體驗也糟糕的一塌糊塗（有認識他們開發人員的大佬，歡迎把我的這篇文章推薦給他們，不怕打臉）。

下圖是愛奇藝與IT之家的頭像裁剪控制項：

糟糕的圖片裁剪體驗

那麼好吧，我們只好又來造輪子了！

借鑒優秀的前輩

現階段在Windows平臺上，最讓我稱佩的裁剪圖片的應用就是Windows照片了。

Windows照片

它有以下兩個優點：

裁剪區域永遠顯示在視覺中心，突出重點；
操作體驗順暢，觸屏操作也能有很好體驗。

這次我們就來“抄襲”一下這個系統應用。

如何實現

有了實現目標，接下來就是思考如何編碼實現了。

需要哪些屬性來控製裁剪區域

分析一下這個控制項的組成部分，其實就是由三部分組成的：最下層裁剪源圖像，上層控製裁剪區域的四個按鈕，以及遮蓋在圖像上的黑色半透明遮罩層。

所以我定義了下麵幾個依賴屬性來控制界面：

SourceImage：類型為WriteableBitmap，控製裁剪圖像源；
X1,Y1,X2,Y2：這四個double值，控制剪裁區域左上角與右下角兩個點坐標；
AspectRatio：類型為double值，控製裁剪圖像縱橫比；

另外還定義了兩個主要的私有屬性用來更新界面佈局：

_maskAreaGeometryGroup：類型為GeometryGroup，控制黑色半透明遮罩層；
_imageTransform：類型為CompositeTransform，控製裁剪過程中的源圖像變換。

這樣的話，更改裁剪區域只需要修改X1,Y1,X2,Y2這四個值就可以了。

改變大小

另外，如果我們通過拖動圖片來移動選擇區域，同樣是修改X1,Y1,X2,Y2的值（而不是對圖片進行變換，動圖中可能看不出來，源代碼中可以看到）。

拖動圖片

控製裁剪圖像源Transform

在Windows照片應用裁剪圖片控制項中，其體驗良好的一個主要原因就是剪裁區域永遠處於視覺中心，這是通過控製裁剪圖像源在界面上的Transform來完成的。

圖片變換

我們可以看到，裁剪圖像源的變換規則如下：

裁剪區域永遠位於界面中心（使用Uniform規則）；
當裁剪區域縮小時，在停止拖動裁剪框控制按鈕時，更新裁剪圖像源的Transform；
當裁剪區域擴大時，實時更新裁剪圖像源的Transform。

限制剪裁區域範圍

另外要註意的是，我們必須保證X1,Y1,X2,Y2取值範圍不超過圖片區域。

這裡有個關於Rect的坑要說明下。一開始我選用的判斷方法是：通過Rect.Contains方法傳入剪裁區域左上角與右下角兩個點坐標，如果均為true，代表剪裁區域範圍合法。但是我發現，在Rect長寬為有小數部分的double值時，如果我把右下角坐標設置為new Point(Rect.X + Rect.Width, Rect.Y + Rect.Height)，這個方法會返回錯誤的false值，實在是坑爹！

因此，考慮到使用場景，我為Rect寫了另外一個擴展方法：

    public static bool IsSafePoint(this Rect targetRect, Point point)
    {
        if (point.X - targetRect.X < 0.01)
            return false;
        if (point.X - (targetRect.X + targetRect.Width) > 0.01)
            return false;
        if (point.Y - targetRect.Y < 0.01)
            return false;
        if (point.Y - (targetRect.Y + targetRect.Height) > 0.01)
            return false;
        return true;
    }

核心邏輯代碼

下圖是這個圖片剪裁控制項的核心邏輯：

核心邏輯

其中InitImageLayout方法會在圖片源變化時被調用，它會初始化圖片佈局（通過調用UpdateImageLayout方法）。

    private void InitImageLayout()
    {
        _maxClipRect = new Rect(0, 0, SourceImage.PixelWidth, SourceImage.PixelHeight);
        var maxSelectedRect = new Rect(1, 1, SourceImage.PixelWidth - 2, SourceImage.PixelHeight - 2);
        _currentClipRect = KeepAspectRatio ? maxSelectedRect.GetUniformRect(AspectRatio) : maxSelectedRect;
        UpdateImageLayout();
    }

UpdateImageLayout方法用於初始化控制項或者控制項SizeChanged時，調用此方法更新控制項佈局（通過調用UpdateImageLayoutWithViewport方法）。

    private void UpdateImageLayout()
    {
        var canvasRect = new Rect(0, 0, CanvasWidth, CanvasHeight);
        var uniformSelectedRect = canvasRect.GetUniformRect(_currentClipRect.Width / _currentClipRect.Height);
        UpdateImageLayoutWithViewport(uniformSelectedRect, _currentClipRect);
    }

UpdateImageLayoutWithViewport方法是更新控制項佈局的核心邏輯，它接受兩個參數：viewport和viewportImgRect，其中viewport代表的是實際呈現在你視覺中心的區域，viewportImgRect表示viewport所對應的實際圖片區域（以實際像素大小為單位），代碼將通過這兩個參數更新裁剪圖像源的Transform。

    private void UpdateImageLayoutWithViewport(Rect viewport, Rect viewportImgRect)
    {
        var imageScale = viewport.Width / viewportImgRect.Width;
        _imageTransform.ScaleX = _imageTransform.ScaleY = imageScale;
        _imageTransform.TranslateX = viewport.X - viewportImgRect.X * imageScale;
        _imageTransform.TranslateY = viewport.Y - viewportImgRect.Y * imageScale;
        var selectedRect = _imageTransform.TransformBounds(_currentClipRect);
        _limitedRect = _imageTransform.TransformBounds(_maxClipRect);
        var startPoint = _limitedRect.GetSafePoint(new Point(selectedRect.X, selectedRect.Y));
        var endPoint = _limitedRect.GetSafePoint(new Point(selectedRect.X + selectedRect.Width, selectedRect.Y + selectedRect.Height));
        _changeByCode = true;
        X1 = startPoint.X;
        Y1 = startPoint.Y;
        X2 = endPoint.X;
        Y2 = endPoint.Y;
        _changeByCode = false;
    }

UpdateClipRectWithAspectRatio則在用戶對剪裁區域改變時被調用，其中dragPoint代表用戶操作的哪個按鈕，diffPos代表該按鈕的前後位置差值。

    private void UpdateClipRectWithAspectRatio(DragPoint dragPoint, Point diffPos)
    {
        if (KeepAspectRatio)
        {
            if (Math.Abs(diffPos.X / diffPos.Y) > AspectRatio)
            {
                if (dragPoint == DragPoint.UpperLeft || dragPoint == DragPoint.LowerRight)
                    diffPos.Y = diffPos.X / AspectRatio;
                else
                    diffPos.Y = -diffPos.X / AspectRatio;
            }
            else
            {
                if (dragPoint == DragPoint.UpperLeft || dragPoint == DragPoint.LowerRight)
                    diffPos.X = diffPos.Y * AspectRatio;
                else
                    diffPos.X = -diffPos.Y * AspectRatio;
            }
        }

        var startPoint = new Point(X1, Y1);
        var endPoint = new Point(X2, Y2);
        switch (dragPoint)
        {
            case DragPoint.UpperLeft:
                startPoint.X += diffPos.X;
                startPoint.Y += diffPos.Y;
                break;
            case DragPoint.UpperRight:
                endPoint.X += diffPos.X;
                startPoint.Y += diffPos.Y;
                break;
            case DragPoint.LowerLeft:
                startPoint.X += diffPos.X;
                endPoint.Y += diffPos.Y;
                break;
            case DragPoint.LowerRight:
                endPoint.X += diffPos.X;
                endPoint.Y += diffPos.Y;
                break;
        }

        if (_limitedRect.IsSafePoint(startPoint) && _limitedRect.IsSafePoint(endPoint))
        {
            var canvasRect = new Rect(0, 0, CanvasWidth, CanvasHeight);
            var newRect = new Rect(startPoint, endPoint);
            canvasRect.Union(newRect);
            if (canvasRect.X < 0 || canvasRect.Y < 0 || canvasRect.Width > CanvasWidth ||
                canvasRect.Height > CanvasHeight)
            {
                var inverseImageTransform = _imageTransform.Inverse;
                if (inverseImageTransform != null)
                {
                    var movedRect = inverseImageTransform.TransformBounds(
                        new Rect(startPoint, endPoint));
                    movedRect.Intersect(_maxClipRect);
                    _currentClipRect = movedRect;
                    var oriCanvasRect = new Rect(0, 0, CanvasWidth, CanvasHeight);
                    var viewportRect = oriCanvasRect.GetUniformRect(canvasRect.Width / canvasRect.Height);
                    var viewportImgRect = inverseImageTransform.TransformBounds(canvasRect);
                    UpdateImageLayoutWithViewport(viewportRect, viewportImgRect);
                }
            }
            else
            {
                X1 = startPoint.X;
                Y1 = startPoint.Y;
                X2 = endPoint.X;
                Y2 = endPoint.Y;
            }
        }
    }

UpdateMaskArea方法用來更新遮蓋在裁剪圖像源上的黑色半透明遮罩層，其實就是圖像上覆蓋了一個Path元素，這裡就不細講了，直接貼代碼。

    private void UpdateMaskArea()
    {
        _maskAreaGeometryGroup.Children.Clear();
        _maskAreaGeometryGroup.Children.Add(new RectangleGeometry
        {
            Rect = new Rect(-_layoutGrid.Padding.Left, -_layoutGrid.Padding.Top, _layoutGrid.ActualWidth,
                _layoutGrid.ActualHeight)
        });
        _maskAreaGeometryGroup.Children.Add(new RectangleGeometry {Rect = new Rect(new Point(X1, Y1), new Point(X2, Y2))});
        _layoutGrid.Clip = new RectangleGeometry
        {
            Rect = new Rect(0, 0, _layoutGrid.ActualWidth,
                _layoutGrid.ActualHeight)
        };
    }

結尾

到這裡，這個控制項的所有東西就講的差不多了，大家有沒有覺得還缺了點什麼？

對的，它還缺少了裁剪圖像源Transform變化時的過渡動畫，對於優秀的用戶體驗來說，這是不可或缺的！

之後我會抽時間補完這部分，並且跟大家講一點Composition Api的東西，請大家敬請期待!

這篇文章到此結束，謝謝大家閱讀！