WPF InkCanvas 毛笔效果

系统管理员 2021-05-02 13:05 556阅读 0赞

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-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));
             }
         }

笔画原图：

![399698-20180518122036433-100474095.png][]

以上代码只是解决了1、2点，第三点嘛~毕竟每个人都有自己的粗细，大家自行体会~

吐槽一下：

本以为本篇文章能有点小小贡献，于是发布到“首页”，结果也就存活十多分钟，而且园内搜索还搜不到！

其实这个需求很久以前做项目就有提了，但那时候刚出来工作没多久【12年毕业，工作以后自学WPF】，还是一个菜鸟萌新，一篇相关文章都搜索不到啊不到！【手动哭泣】

之后也陆陆续续做了好多类似项目，但一直使用文中第一种方案，效果也能被客户接受。

哎，期待有缘人吧！毕竟WPF用的人还是太少！

也是，本篇文章没得个“抄袭”的罪名算好的了，还胆大包天的贴出原文链接！

最后【手动满地打滚撒泼~】
[399698-20180518122036433-100474095.png]: /images/20210501/d713d51904d34b61bd0e3ae21ee36b72.png