WPF InkCanvas 毛筆效果

1、先來看看InkCanvas的一般用法：

<InkCanvas>
     <InkCanvas.DefaultDrawingAttributes>
           <DrawingAttributes StylusTip="Ellipse" Height="8" Width="4" IgnorePressure="False" FitToCurve="True" >
           <!--稍微變換一下，就算設備不支持“壓感”，效果也是棒棒-->

　　　　<DrawingAttributes.StylusTipTransform>
                   <Matrix M11="1" M12="1.5" M21="2.2" M22="1"/>
              </DrawingAttributes.StylusTipTransform>
           </DrawingAttributes>
     </InkCanvas.DefaultDrawingAttributes>
</InkCanvas>

2、自定義InkCanvas，實現毛筆效果

找到2篇文章，代碼基本一致，也不知道哪位是原作者抑或都不是原作者？

使用WPF的自定義InkCanvas實現毛筆效果 【個人覺得該作者為原創？】

wpf inkcanvas customink 毛筆效果 【這位童鞋的話，后面都叛變去搞Unity3D了！】

以上代碼缺點：

2-1、卡頓【雖然提到了解決辦法，但都沒有給出具體代碼】

2-2、顏色【毛筆配黑墨才是正途，但世界是多姿多彩的不是？】

2-3、粗細【這個嘛~】

廢話不多說，奉上改進后的代碼：

 

 public class ChinesebrushRenderer : DynamicRenderer
    {
        private ImageSource imageSource;
        private readonly double width = 16;

        protected override void OnDrawingAttributesReplaced()
        {
            if (DesignerProperties.GetIsInDesignMode(this.Element))
                return;

            base.OnDrawingAttributesReplaced();

            var dv = new DrawingVisual();
            var size = 90;
            using (var conext = dv.RenderOpen())
            {
                //[關鍵]OpacityMask了解下？也許有童鞋想到的辦法是，各種顏色的圖片來一張？
                conext.PushOpacityMask(new ImageBrush(new BitmapImage(new Uri(AppDomain.CurrentDomain.BaseDirectory + "Images\\pen.png", UriKind.Absolute))));
                //用顏色生成畫筆畫一個矩形
                conext.DrawRectangle(new SolidColorBrush(this.DrawingAttributes.Color), null, new Rect(0, 0, size, size));
                conext.Close();
            }
            var rtb = new RenderTargetBitmap(size, size, 96d, 96d, PixelFormats.Pbgra32);
            rtb.Render(dv);
            imageSource = BitmapFrame.Create(rtb);
            //[重要]此乃解決卡頓問題的關鍵！
            imageSource.Freeze();
        }

        protected override void OnDraw(DrawingContext drawingContext, StylusPointCollection stylusPoints, Geometry geometry, Brush fillBrush)
        {
            var p1 = new Point(double.NegativeInfinity, double.NegativeInfinity);
            var p2 = new Point(0, 0);
            var w1 = this.width + 20;

            for (int i = 0; i < stylusPoints.Count; i++)
            {
                p2 = (Point)stylusPoints[i];

                //兩點相減得到一個向量[高中數學知識了解下？]
                var vector = p1 - p2;

               //得到 x、y的變化值
                var dx = (p2.X - p1.X) / vector.Length;
                var dy = (p2.Y - p1.Y) / vector.Length;

                var w2 = this.width;
                if (w1 - vector.Length > this.width)
                    w2 = w1 - vector.Length;

                //為啥又來一個for？圖像重疊，實現筆畫的連續性，感興趣的童鞋可以把for取消掉看看效果
                for (int j = 0; j < vector.Length; j++)
                {
                    var x = p2.X;
                    var y = p2.Y;

                    if (!double.IsInfinity(p1.X) && !double.IsInfinity(p1.Y))
                    {
                        x = p1.X + dx;
                        y = p1.Y + dy;
                    }

                    //畫圖，沒啥可說的
                    drawingContext.DrawImage(imageSource, new Rect(x - w2 / 2.0, y - w2 / 2.0, w2, w2));

                    //再把新的坐標賦值給p1，以序后來
                    p1 = new Point(x, y);

                    if (double.IsInfinity(vector.Length))
                        break;

                }
            }
        }

 

public class ChinesebrushStroke : Stroke
    {

        private ImageSource imageSource;
        private readonly double width = 16;

        public ChinesebrushStroke(StylusPointCollection stylusPointCollection, Color color) : base(stylusPointCollection)
        {
            if (DesignerProperties.GetIsInDesignMode(App.Current.MainWindow))
                return;
            var dv = new DrawingVisual();
            var size = 90;
            using (var conext = dv.RenderOpen())
            {
                conext.PushOpacityMask(new ImageBrush(new BitmapImage(new Uri(AppDomain.CurrentDomain.BaseDirectory + "Images\\pen.png", UriKind.Absolute))));
                conext.DrawRectangle(new SolidColorBrush(color), null, new Rect(0, 0, size, size));
                conext.Close();
            }
            var rtb = new RenderTargetBitmap(size, size, 96d, 96d, PixelFormats.Pbgra32);
            rtb.Render(dv);
            imageSource = BitmapFrame.Create(rtb);

            //Freezable 類提供特殊功能，以便在使用修改或復制開銷很大的對象時幫助提高應用程序性能
            //WPF中的Frozen（凍結）與線程及其他相關問題
            imageSource.Freeze();
        }

        //卡頓就是該函數造成，每寫完一筆就會調用，當筆畫過長，后果可想而知~
        protected override void DrawCore(DrawingContext drawingContext, DrawingAttributes drawingAttributes)
        {
            if (this.StylusPoints?.Count < 1)
                return;

            var p1 = new Point(double.NegativeInfinity, double.NegativeInfinity);
            var w1 = this.width + 20;
           

            for (int i = 0; i < StylusPoints.Count; i++)
            {
                var p2 = (Point)this.StylusPoints[i];
               
                var vector = p1 - p2;

                var dx = (p2.X - p1.X) / vector.Length;
                var dy = (p2.Y - p1.Y) / vector.Length;

                var w2 = this.width;
                if (w1 - vector.Length > this.width)
                    w2 = w1 - vector.Length;

                for (int j = 0; j < vector.Length; j++)
                {
                    var x = p2.X;
                    var y = p2.Y;

                    if (!double.IsInfinity(p1.X) && !double.IsInfinity(p1.Y))
                    {
                        x = p1.X + dx;
                        y = p1.Y + dy;
                    }

                    drawingContext.DrawImage(imageSource, new Rect(x - w2 / 2.0, y - w2 / 2.0, w2, w2));

                    p1 = new Point(x, y);

                    if (double.IsInfinity(vector.Length))
                        break;
                }
            }
        }
    }

 

public class ChinesebrushCanvas : InkCanvas
    {
        public ChinesebrushCanvas()
        {
            //當然要換上我們特地搞出來的ChinesebrushRenderer
            this.DynamicRenderer = new ChinesebrushRenderer();
        }


        protected override void OnStrokeCollected(InkCanvasStrokeCollectedEventArgs e)
        {
            //感興趣的童鞋，注釋這一句看看？
            this.Strokes.Remove(e.Stroke);
            
            this.Strokes.Add(new ChinesebrushStroke(e.Stroke.StylusPoints, this.DefaultDrawingAttributes.Color));
        }
    }

 筆畫原圖：

以上代碼只是解決了1、2點，第三點嘛~畢竟每個人都有自己的粗細，大家自行體會~

 

吐槽一下：

本以為本篇文章能有點小小貢獻，於是發布到“首頁”，結果也就存活十多分鍾，而且園內搜索還搜不到！

其實這個需求很久以前做項目就有提了，但那時候剛出來工作沒多久【12年畢業，工作以后自學WPF】，還是一個菜鳥萌新，一篇相關文章都搜索不到啊不到！【手動哭泣】

之后也陸陸續續做了好多類似項目，但一直使用文中第一種方案，效果也能被客戶接受。

哎，期待有緣人吧！畢竟WPF用的人還是太少！

也是，本篇文章沒得個“抄襲”的罪名算好的了，還膽大包天的貼出原文鏈接！

最后【手動滿地打滾撒潑~】