WPF+Canvas实现平滑笔迹的示例代码

目录

实现思路实现效果实现代码

实现思路

收集路径点集。
平均采样路径点集。
将路径点集转为 LineB。
把 LineB 数据传给 Path。

实现效果

实现代码

1）Vector2D.cs 代码如下

1. usingSystem;
2. usingSystem.Collections.Generic;
3. usingSystem.Linq;
4. usingSystem.Text;
6. namespaceWPFDevelopers.Samples.ExampleViews.CanvasHandWriting
7. {
8. publicclassVector2D
9. {
10. publicdoubleX{get;set;}=0;
11. publicdoubleY{get;set;}=0;
13. ///<summary>
14. ///向量的模
15. ///</summary>
16. publicdoubleMold
17. {
18. get
19. {
20. //自身各分量平方运算.
21. doubleX=this.X*this.X;
22. doubleY=this.Y*this.Y;
23. returnMath.Sqrt(X+Y);//开根号,最终返回向量的长度/模/大小.
24. }
25. }
26. ///<summary>
27. ///单位向量
28. ///</summary>
29. publicVector2DUnitVector
30. {
31. get
32. {
33. doublesumSquares=(X*X)+(Y*Y);
34. returnnewVector2D(X/Math.Sqrt(sumSquares),Y/Math.Sqrt(sumSquares));
35. }
36. }
38. publicVector2D()
39. {
41. }
42. publicVector2D(doublex,doubley)
43. {
44. X=x;
45. Y=y;
46. }
47. publicVector2D(System.Windows.Pointpoint)
48. {
49. X=point.X;
50. Y=point.Y;
51. }
53. publicvoidOffset(doubleangle,doubledistance,AngleTypeangleType=AngleType.Radian)
54. {
55. varvector2D=Vector2D.CalculateVectorOffset(this,angle,distance,angleType);
56. X=vector2D.X;
57. Y=vector2D.Y;
58. }
59. publicvoidRotate(doubleangle,Vector2DvectorCenter=null,AngleTypeangleType=AngleType.Radian)
60. {
61. vectorCenter=vectorCenter==null?this:vectorCenter;
62. varvector2D=Vector2D.CalculateVectorRotation(this,vectorCenter,angle,angleType);
63. X=vector2D.X;
64. Y=vector2D.Y;
65. }
67. #region静态方法
68. ///<summary>
69. ///计算两个向量之间的距离
70. ///</summary>
71. publicstaticdoubleCalculateVectorDistance(Vector2Dvector2DA,Vector2Dvector2DB)
72. {
73. Vector2Dvector2D=vector2DA-vector2DB;
74. returnvector2D.Mold;
75. }
77. ///<summary>
78. ///计算两点夹角，右侧X轴线为0度，向下为正，向上为负
79. ///</summary>
80. publicstaticdoubleIncludedAngleXAxis(Vector2Dvector2DA,Vector2Dvector2DB,AngleTypeangleType=AngleType.Radian)
81. {
82. doubleradian=Math.Atan2(vector2DB.Y-vector2DA.Y,vector2DB.X-vector2DA.X);//弧度：1.1071487177940904
83. returnangleType==AngleType.Radian?radian:ComputingHelper.RadianToAngle(radian);
84. }
86. ///<summary>
87. ///计算两点夹角，下侧Y轴线为0度，向右为正，向左为负
88. ///</summary>
89. publicstaticdoubleIncludedAngleYAxis(Vector2Dvector2DA,Vector2Dvector2DB,AngleTypeangleType=AngleType.Radian)
90. {
91. doubleradian=Math.Atan2(vector2DB.X-vector2DA.X,vector2DB.Y-vector2DA.Y);//弧度：0.46364760900080609
92. returnangleType==AngleType.Radian?radian:ComputingHelper.RadianToAngle(radian);
93. }
95. ///<summary>
96. ///偏移向量到指定角度，指定距离
97. ///</summary>
98. publicstaticVector2DCalculateVectorOffset(Vector2Dvector2D,doubleangle,doubledistance,AngleTypeangleType=AngleType.Radian)
99. {
100. Vector2DpointVector2D=newVector2D();
101. if(angleType==AngleType.Angle)
102. {
103. angle=angle/(180/Math.PI);//角度转弧度
104. }
105. doublewidth=Math.Cos(Math.Abs(angle))*distance;
106. doubleheight=Math.Sin(Math.Abs(angle))*distance;
107. if(angle<=Math.PI&&angle>=0)
108. //if(angleis<=Math.PIand>=0)
109. {
110. pointVector2D.X=vector2D.X-width;
111. pointVector2D.Y=vector2D.Y-height;
112. }
113. if(angle>=(-Math.PI)&&angle<=0)
114. //if(angleis>=(-Math.PI)and<=0)
115. {
116. pointVector2D.X=vector2D.X-width;
117. pointVector2D.Y=vector2D.Y+height;
118. }
119. returnpointVector2D;
120. }
122. ///<summary>
123. ///围绕一个中心点，旋转一个向量,相对旋转
124. ///</summary>
125. publicstaticVector2DCalculateVectorRotation(Vector2Dvector2D,Vector2DvectorCenter,doubleradian,AngleTypeangleType=AngleType.Radian)
126. {
127. radian=angleType==AngleType.Radian?radian:ComputingHelper.RadianToAngle(radian);
128. doublex1=(vector2D.X-vectorCenter.X)*Math.Sin(radian)+(vector2D.Y-vectorCenter.Y)*Math.Cos(radian)+vectorCenter.X;
129. doubley1=-(vector2D.X-vectorCenter.X)*Math.Cos(radian)+(vector2D.Y-vectorCenter.Y)*Math.Sin(radian)+vectorCenter.Y;
130. returnnewVector2D(x1,y1);
131. }
132. publicstaticVector2DCalculateVectorCenter(Vector2Dvector2DA,Vector2Dvector2DB)
133. {
134. returnnewVector2D((vector2DA.X+vector2DB.X)/2,(vector2DA.Y+vector2DB.Y)/2);
135. }
137. ///<summary>
138. ///判断坐标点是否在多边形区域内，射线法
139. ///</summary>
140. publicstaticboolIsPointPolygonalArea(Vector2Dvector2D,List<Vector2D>aolygonaArrayList)
141. {
142. varN=aolygonaArrayList.Count;
143. varboundOrVertex=true;//如果点位于多边形的顶点或边上，也算做点在多边形内，直接返回true
144. varcrossNumber=0;//x的交叉点计数
145. varprecision=2e-10;//浮点类型计算时候与0比较时候的容差
146. Vector2Dp1,p2;//neighbourboundvertices
147. varp=vector2D;//测试点
148. p1=aolygonaArrayList[0];//leftvertex
149. for(vari=1;i<=N;++i)
150. {
151. //checkallrays
152. if(p.X.Equals(p1.X)&&p.Y.Equals(p1.Y))
153. {
154. returnboundOrVertex;//pisanvertex
155. }
157. p2=aolygonaArrayList[i%N];//rightvertex
158. if(p.X<Math.Min(p1.X,p2.X)||p.X>Math.Max(p1.X,p2.X))
159. {
160. //rayisoutsideofourinterests
161. p1=p2;
162. continue;//nextrayleftpoint
163. }
165. if(p.X>Math.Min(p1.X,p2.X)&&p.X<Math.Max(p1.X,p2.X))
166. {
167. //rayiscrossingoverbythealgorithm(commonpartof)
168. if(p.Y<=Math.Max(p1.Y,p2.Y))
169. {
170. //xisbeforeofray
171. if(p1.X==p2.X&&p.Y>=Math.Min(p1.Y,p2.Y))
172. {
173. //overliesonahorizontalray
174. returnboundOrVertex;
175. }
177. if(p1.Y==p2.Y)
178. {
179. //rayisvertical
180. if(p1.Y==p.Y)
181. {
182. //overliesonaverticalray
183. returnboundOrVertex;
184. }
185. else
186. {
187. //beforeray
188. ++crossNumber;
189. }
190. }
191. else
192. {
193. //crosspointontheleftside
194. varxinters=
195. (p.X-p1.X)*(p2.Y-p1.Y)/(p2.X-p1.X)+
196. p1.Y;//crosspointofY
197. if(Math.Abs(p.Y-xinters)<precision)
198. {
199. //overliesonaray
200. returnboundOrVertex;
201. }
203. if(p.Y<xinters)
204. {
205. //beforeray
206. ++crossNumber;
207. }
208. }
209. }
210. }
211. else
212. {
213. //specialcasewhenrayiscrossingthroughthevertex
214. if(p.X==p2.X&&p.Y<=p2.Y)
215. {
216. //pcrossingoverp2
217. varp3=aolygonaArrayList[(i+1)%N];//nextvertex
218. if(p.X>=Math.Min(p1.X,p3.X)&&p.X<=Math.Max(p1.X,p3.X))
219. {
220. //p.Xliesbetweenp1.X&p3.X
221. ++crossNumber;
222. }
223. else
224. {
225. crossNumber+=2;
226. }
227. }
228. }
229. p1=p2;//nextrayleftpoint
230. }
231. if(crossNumber%2==0)
232. {
233. //偶数在多边形外
234. returnfalse;
235. }
236. else
237. {
238. //奇数在多边形内
239. returntrue;
240. }
241. }
243. ///<summary>
244. ///判断一个点是否在一条边内
245. ///</summary>
247. publicstaticboolIsPointEdge(Vector2Dpoint,Vector2DstartPoint,Vector2DendPoint)
248. {
249. return(point.X-startPoint.X)*(endPoint.Y-startPoint.Y)==(endPoint.X-startPoint.X)*(point.Y-startPoint.Y)
250. &&Math.Min(startPoint.X,endPoint.X)<=point.X&&point.X<=Math.Max(startPoint.X,endPoint.X)
251. &&Math.Min(startPoint.Y,endPoint.Y)<=point.Y&&point.Y<=Math.Max(startPoint.Y,endPoint.Y);
252. }
253. #endregion静态方法
255. #region运算符重载
256. ///<summary>
257. ///重载运算符，和运算,可以用来计算两向量距离
258. ///</summary>
259. publicstaticVector2Doperator+(Vector2Dvector2DA,Vector2Dvector2DB)
260. {
261. Vector2Dvector2D=newVector2D();
262. vector2D.X=vector2DA.X+vector2DB.X;
263. vector2D.Y=vector2DA.Y+vector2DB.Y;
264. returnvector2D;
265. }
267. ///<summary>
268. ///重载运算符，差运算,可以用来计算两向量距离
269. ///</summary>
270. publicstaticVector2Doperator-(Vector2Dvector2DA,Vector2Dvector2DB)
271. {
272. Vector2Dvector2D=newVector2D();
273. vector2D.X=vector2DA.X-vector2DB.X;
274. vector2D.Y=vector2DA.Y-vector2DB.Y;
275. returnvector2D;
276. }
278. ///<summary>
279. ///重载运算符，差运算,可以用来计算两向量距离
280. ///</summary>
281. publicstaticVector2Doperator-(Vector2Dvector2D,double_float)
282. {
283. returnnewVector2D(vector2D.X-_float,vector2D.Y-_float);
284. }
286. ///<summary>
287. ///重载运算符，点积运算,可以用来计算两向量夹角
288. ///</summary>
289. publicstaticdoubleoperator*(Vector2Dvector2DA,Vector2Dvector2DB)
290. {
291. return(vector2DA.X*vector2DB.X)+(vector2DA.Y*vector2DB.Y);
292. }
293. publicstaticdoubleoperator*(Vector2Dvector2D,double_float)
294. {
295. return(vector2D.X*_float)+(vector2D.Y*_float);
296. }
298. ///<summary>
299. ///重载运算符，点积运算,可以用来计算两向量夹角
300. ///</summary>
301. publicstaticdoubleoperator/(Vector2Dvector2D,doublepara)
302. {
303. return(vector2D.X/para)+(vector2D.Y/para);
304. }
306. ///<summary>
307. ///重载运算符
308. ///</summary>
310. publicstaticbooloperator>=(Vector2Dvector2D,doublepara)
311. {
312. if(vector2D.Mold>=para)
313. {
314. returntrue;
315. }
316. else
317. {
318. returnfalse;
319. }
320. }
322. publicstaticbooloperator<=(Vector2Dvector2D,doublepara)
323. {
324. if(vector2D.Mold<=para)
325. {
326. returntrue;
327. }
328. else
329. {
330. returnfalse;
331. }
332. }
334. publicstaticbooloperator>(Vector2Dvector2D,doublepara)
335. {
336. if(vector2D.Mold>para)
337. {
338. returntrue;
339. }
340. else
341. {
342. returnfalse;
343. }
344. }
346. publicstaticbooloperator<(Vector2Dvector2D,doublepara)
347. {
348. if(vector2D.Mold<para)
349. {
350. returntrue;
351. }
352. else
353. {
354. returnfalse;
355. }
356. }
357. #endregion运算符重载
359. #region隐式转换
360. ///<summary>
361. ///重载隐式转换，可以直接使用Point
362. ///</summary>
363. ///<paramname="v"></param>
364. publicstaticimplicitoperatorVector2D(System.Windows.Pointv)//隐式转换
365. {
366. returnnewVector2D(v.X,v.Y);
367. }
368. ///<summary>
369. ///重载隐式转换，可以直接使用Point
370. ///</summary>
371. ///<paramname="v"></param>
372. publicstaticimplicitoperatorSystem.Windows.Point(Vector2Dv)//隐式转换
373. {
374. returnnewSystem.Windows.Point(v.X,v.Y);
375. }
376. ///<summary>
377. ///重载隐式转换，可以直接使用double
378. ///</summary>
379. ///<paramname="v"></param>
380. publicstaticimplicitoperatorVector2D(doublev)//隐式转换
381. {
382. returnnewVector2D(v,v);
383. }
384. #endregion隐式转换
386. #regionToString
387. publicoverridestringToString()
388. {
389. returnX.ToString()+","+Y.ToString();
390. }
391. publicstringToString(stringsymbol)
392. {
393. returnX.ToString()+symbol+Y.ToString();
394. }
395. publicstringToString(stringsender,stringsymbol)
396. {
397. returnX.ToString(sender)+symbol+Y.ToString(sender);
398. }
399. #endregion
400. }
401. publicenumAngleType
402. {
403. Angle,
404. Radian
405. }
406. }

复制代码

2）ComputingHelper.cs 代码如下

1. usingSystem;
2. usingSystem.Collections.Generic;
3. usingSystem.Linq;
4. usingSystem.Text;
6. namespaceWPFDevelopers.Samples.ExampleViews.CanvasHandWriting
7. {
8. publicstaticclassComputingHelper
9. {
10. publicstaticdoubleAngleToRadian(doubleangle)
11. {
12. returnangle*(Math.PI/180);
13. }
14. publicstaticdoubleRadianToAngle(doubleradian)
15. {
16. returnradian*(180/Math.PI);
17. }
19. ///<summary>
20. ///将一个值从一个范围映射到另一个范围
21. ///</summary>
22. publicstaticdoubleRangeMapping(doubleinputValue,doubleenterLowerLimit,doubleenterUpperLimit,doubleoutputLowerLimit,doubleOutputUpperLimit,CurveTypecurveType=CurveType.None)
23. {
24. varpercentage=(enterUpperLimit-inputValue)/(enterUpperLimit-enterLowerLimit);
25. switch(curveType)
26. {
27. caseCurveType.Sine:
28. percentage=Math.Sin(percentage);
29. break;
30. caseCurveType.CoSine:
31. percentage=Math.Cos(percentage);
32. break;
33. caseCurveType.Tangent:
34. percentage=Math.Tan(percentage);
35. break;
36. caseCurveType.Cotangent:
37. percentage=Math.Atan(percentage);
38. break;
39. default:
40. break;
41. }
42. doubleoutputValue=OutputUpperLimit-((OutputUpperLimit-outputLowerLimit)*percentage);
44. returnoutputValue;
45. }
47. publicstaticstringByteToKB(double_byte)
48. {
49. List<string>unit=newList<string>(){"B","KB","MB","GB","TB","P","PB"};
50. inti=0;
51. while(_byte>1024)
52. {
53. _byte/=1024;
54. i++;
55. }
56. _byte=Math.Round(_byte,3);//保留三位小数
57. return_byte+unit[i];
58. }
60. ///<summary>
61. ///缩短一个数组，对其进行平均采样
62. ///</summary>
64. publicstaticdouble[]AverageSampling(double[]sourceArray,intnumber)
65. {
66. if(sourceArray.Length<=number)
67. {
68. returnsourceArray;
69. //thrownewException("新的数组必须比原有的要小!");
70. }
71. double[]arrayList=newdouble[number];
72. doublestride=(double)sourceArray.Length/number;
73. for(inti=0,jIndex=0;i<number;i++,jIndex++)
74. {
75. doublestrideIncrement=i*stride;
76. strideIncrement=Math.Round(strideIncrement,6);
77. doublesum=0;
78. intfirstIndex=(int)(strideIncrement);
79. doublefirstDecimal=strideIncrement-firstIndex;
81. inttailIndex=(int)(strideIncrement+stride);
82. doubletailDecimal=(strideIncrement+stride)-tailIndex;
84. if(firstDecimal!=0)
85. sum+=sourceArray[firstIndex]*(1-firstDecimal);
87. if(tailDecimal!=0&&tailIndex!=sourceArray.Length)
88. sum+=sourceArray[tailIndex]*(tailDecimal);
90. intstartIndex=firstDecimal==0?firstIndex:firstIndex+1;
91. intendIndex=tailIndex;
93. for(intj=startIndex;j<endIndex;j++)
94. sum+=sourceArray[j];
96. arrayList[jIndex]=sum/stride;
97. }
98. returnarrayList;
99. }
100. publicstaticList<Vector2D>AverageSampling(List<Vector2D>sourceArray,intnumber)
101. {
102. if(sourceArray.Count<=number-2)
103. {
104. returnsourceArray;
105. }
106. double[]x=newdouble[sourceArray.Count];
107. double[]y=newdouble[sourceArray.Count];
108. for(inti=0;i<sourceArray.Count;i++)
109. {
110. x[i]=sourceArray[i].X;
111. y[i]=sourceArray[i].Y;
112. }
114. double[]X=AverageSampling(x,number-2);
115. double[]Y=AverageSampling(y,number-2);
117. List<Vector2D>arrayList=newList<Vector2D>();
118. for(inti=0;i<number-2;i++)
119. {
120. arrayList.Add(newVector2D(X[i],Y[i]));
121. }
123. arrayList.Insert(0,sourceArray[0]);//添加首
124. arrayList.Add(sourceArray[sourceArray.Count-1]);//添加尾
126. returnarrayList;
127. }
128. }
129. publicenumCurveType
130. {
131. Sine,
132. CoSine,
133. Tangent,
134. Cotangent,
135. None
136. }
137. }

复制代码

3）LineB.cs 代码如下

1. usingSystem;
2. usingSystem.Collections.Generic;
3. usingSystem.Linq;
4. usingSystem.Text;
5. usingSystem.Windows.Media;
7. namespaceWPFDevelopers.Samples.ExampleViews.CanvasHandWriting
8. {
9. publicclassLineB
10. {
11. privateList<Vector2D>_vector2DList=newList<Vector2D>();
12. publicList<Vector2D>Vector2DList
13. {
14. get{return_vector2DList;}
15. set
16. {
17. _vector2DList=value;
18. }
19. }
21. privateList<BezierCurve>_bezierCurveList=newList<BezierCurve>();
22. publicList<BezierCurve>BezierCurveList
23. {
24. get{return_bezierCurveList;}
25. privateset{_bezierCurveList=value;}
26. }
28. privatedouble_tension=0.618;
29. publicdoubleTension
30. {
31. get{return_tension;}
32. set
33. {
34. _tension=value;
35. if(_tension>10)
36. _tension=10;
37. if(_tension<0)
38. _tension=0;
39. }
40. }
42. privatebool_isClosedCurve=true;
43. publicboolIsClosedCurve
44. {
45. get{return_isClosedCurve;}
46. set{_isClosedCurve=value;}
47. }
49. privatestring_pathData=string.Empty;
50. publicstringPathData
51. {
52. get
53. {
54. if(_pathData==string.Empty)
55. {
56. _pathData=Vector2DToBezierCurve();
57. }
58. return_pathData;
59. }
60. }
62. privatestringVector2DToBezierCurve()
63. {
64. if(Vector2DList.Count<3)
65. returnstring.Empty;
67. BezierCurveList.Clear();
68. for(inti=0;i<Vector2DList.Count;i++)
69. {
70. intpointTwoIndex=i+1<Vector2DList.Count?i+1:0;
71. intpointThreeIndex=i+2<Vector2DList.Count?i+2:i+2-Vector2DList.Count;
72. Vector2Dvector2D1=Vector2DList[i];
73. Vector2Dvector2D2=Vector2DList[pointTwoIndex];
74. Vector2Dvector2D3=Vector2DList[pointThreeIndex];
76. Vector2DstartVector2D=Vector2D.CalculateVectorCenter(vector2D1,vector2D2);
77. doublestartAngle=Vector2D.IncludedAngleXAxis(vector2D1,vector2D2);
78. doublestartDistance=Vector2D.CalculateVectorDistance(startVector2D,vector2D2)*(1-Tension);
79. Vector2DstartControlPoint=Vector2D.CalculateVectorOffset(vector2D2,startAngle,startDistance);
81. Vector2DendVector2D=Vector2D.CalculateVectorCenter(vector2D2,vector2D3);
82. doubleendAngle=Vector2D.IncludedAngleXAxis(endVector2D,vector2D2);
83. doubleendDistance=Vector2D.CalculateVectorDistance(endVector2D,vector2D2)*(1-Tension);
84. Vector2DendControlPoint=Vector2D.CalculateVectorOffset(endVector2D,endAngle,endDistance);
86. BezierCurvebezierCurve=newBezierCurve();
87. bezierCurve.StartVector2D=startVector2D;
88. bezierCurve.StartControlPoint=startControlPoint;
89. bezierCurve.EndVector2D=endVector2D;
90. bezierCurve.EndControlPoint=endControlPoint;
91. BezierCurveList.Add(bezierCurve);
92. }
93. if(!IsClosedCurve)
94. {
95. BezierCurveList[0].StartVector2D=Vector2DList[0];
96. BezierCurveList.RemoveAt(BezierCurveList.Count-1);
97. BezierCurveList[BezierCurveList.Count-1].EndVector2D=Vector2DList[Vector2DList.Count-1];
98. BezierCurveList[BezierCurveList.Count-1].EndControlPoint=BezierCurveList[BezierCurveList.Count-1].EndVector2D;
99. }
100. stringpath=$"M{BezierCurveList[0].StartVector2D.ToString()}";
101. foreach(variteminBezierCurveList)
102. {
103. path+=$"C{item.StartControlPoint.ToString("")},{item.EndControlPoint.ToString("")},{item.EndVector2D.ToString("")}";
104. }
105. returnpath;
106. }
108. publicLineB()
109. {
110. }
111. publicLineB(List<Vector2D>verVector2DList,boolisClosedCurve=true)
112. {
113. this.Vector2DList=verVector2DList;
114. this.IsClosedCurve=isClosedCurve;
115. }
117. ///<summary>
118. ///重载隐式转换，可以直接使用Point
119. ///</summary>
120. ///<paramname="v"></param>
121. publicstaticimplicitoperatorGeometry(LineBlineB)//隐式转换
122. {
123. returnGeometry.Parse(lineB.PathData);
124. }
125. }
126. publicclassBezierCurve
127. {
128. privateVector2D_startVector2D=newVector2D(0,0);
129. publicVector2DStartVector2D
130. {
131. get{return_startVector2D;}
132. set{_startVector2D=value;}
133. }
135. privateVector2D_startControlPoint=newVector2D(0,100);
136. publicVector2DStartControlPoint
137. {
138. get{return_startControlPoint;}
139. set{_startControlPoint=value;}
140. }
142. privateVector2D_endControlPoint=newVector2D(100,0);
143. publicVector2DEndControlPoint
144. {
145. get{return_endControlPoint;}
146. set{_endControlPoint=value;}
147. }
149. privateVector2D_endVector2D=newVector2D(100,100);
150. publicVector2DEndVector2D
151. {
152. get{return_endVector2D;}
153. set{_endVector2D=value;}
154. }
156. }
157. }

复制代码

4）CanvasHandWritingExample.xaml 代码如下

1. <UserControlx:Class="WPFDevelopers.Samples.ExampleViews.CanvasHandWriting.CanvasHandWritingExample"
2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
5. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6. xmlns:local="clr-namespace:WPFDevelopers.Samples.ExampleViews.CanvasHandWriting"
7. mc:Ignorable="d"
8. d:DesignHeight="450"d:DesignWidth="800">
9. <UserControl.Resources>
10. <StyleTargetType="{x:TypeTextBlock}">
11. <SetterProperty="Foreground"Value="{StaticResourcePrimaryTextSolidColorBrush}"/>
12. </Style>
13. </UserControl.Resources>
14. <Grid>
15. <Grid.RowDefinitions>
16. <RowDefinitionHeight="auto"/>
17. <RowDefinition/>
18. </Grid.RowDefinitions>
19. <StackPanelOrientation="Horizontal"Margin="4">
20. <TextBlockText="张力:"VerticalAlignment="Center"/>
21. <TextBoxText="{BindingTension,RelativeSource={RelativeSourceAncestorType=local:CanvasHandWritingExample}}"/>
22. <SliderWidth="100"SmallChange="0.01"
23. Value="{BindingTension,RelativeSource={RelativeSourceAncestorType=local:CanvasHandWritingExample}}"Maximum="1"
24. VerticalAlignment="Center"
25. Margin="5,0"/>
26. <TextBlockText="平滑采样:"VerticalAlignment="Center"/>
27. <TextBoxText="{BindingSmoothSampling,RelativeSource={RelativeSourceAncestorType=local:CanvasHandWritingExample}}"
28. Margin="5,0"/>
29. <SliderValue="{BindingSmoothSampling,RelativeSource={RelativeSourceAncestorType=local:CanvasHandWritingExample}}"
30. Width="100"
31. VerticalAlignment="Center"
32. SmallChange="0.01"Maximum="1"
33. TickFrequency="0.1"/>
34. <CheckBoxContent="橡皮擦"
35. VerticalAlignment="Center"
36. Margin="5,0"
37. IsChecked="{BindingIsEraser,RelativeSource={RelativeSourceAncestorType=local:CanvasHandWritingExample}}"/>
38. <ButtonContent="清空画布"Click="btnClertCanvas_Click"/>
39. </StackPanel>
40. <Canvasx:Name="drawingCanvas"
41. Grid.Row="1"Background="Black"
42. PreviewMouseLeftButtonDown="DrawingCanvas_PreviewMouseLeftButtonDown"
43. PreviewMouseMove="DrawingCanvas_PreviewMouseMove"
44. PreviewMouseLeftButtonUp="DrawingCanvas_PreviewMouseLeftButtonUp"/>
46. </Grid>
47. </UserControl>

复制代码

5）CanvasHandWritingExample.xaml.cs 代码如下

1. usingSystem;
2. usingSystem.Collections.Generic;
3. usingSystem.Threading;
4. usingSystem.Threading.Tasks;
5. usingSystem.Windows;
6. usingSystem.Windows.Controls;
7. usingSystem.Windows.Input;
8. usingSystem.Windows.Media;
9. usingSystem.Windows.Shapes;
11. namespaceWPFDevelopers.Samples.ExampleViews.CanvasHandWriting
12. {
13. ///<summary>
14. ///CanvasHandWritingExample.xaml的交互逻辑
15. ///</summary>
16. publicpartialclassCanvasHandWritingExample:UserControl
17. {
18. publicstaticreadonlyDependencyPropertyTensionProperty=
19. DependencyProperty.Register("Tension",typeof(double),typeof(CanvasHandWritingExample),
20. newPropertyMetadata(0.618));
22. publicstaticreadonlyDependencyPropertySmoothSamplingProperty=
23. DependencyProperty.Register("SmoothSampling",typeof(double),typeof(CanvasHandWritingExample),
24. newUIPropertyMetadata(OnSmoothSamplingChanged));
26. publicstaticreadonlyDependencyPropertyIsEraserProperty=
27. DependencyProperty.Register("IsEraser",typeof(bool),typeof(CanvasHandWritingExample),
28. newPropertyMetadata(false));
30. privatereadonlyDictionary<Path,List<Vector2D>>_PathVector2DDictionary;
32. volatilebool_IsStart=false;
33. Path_DrawingPath=default;
35. privatestaticvoidOnSmoothSamplingChanged(DependencyObjectd,DependencyPropertyChangedEventArgse)
36. {
37. varmWindow=(CanvasHandWritingExample)d;
38. foreach(variteminmWindow._PathVector2DDictionary.Keys)
39. {
40. mWindow.DrawLine(item);
41. }
42. }
43. publicCanvasHandWritingExample()
44. {
45. InitializeComponent();
46. _PathVector2DDictionary=newDictionary<Path,List<Vector2D>>();
47. SmoothSampling=0.8;
48. }
50. privatevoidDrawingCanvas_PreviewMouseLeftButtonDown(objectsender,MouseButtonEventArgse)
51. {
52. _IsStart=true;
53. _DrawingPath=newPath()
54. {
55. StrokeDashCap=PenLineCap.Round,
56. StrokeStartLineCap=PenLineCap.Round,
57. StrokeEndLineCap=PenLineCap.Round,
58. StrokeLineJoin=PenLineJoin.Round,
59. };
61. if(IsEraser)
62. {
63. _DrawingPath.Stroke=newSolidColorBrush(Colors.Black);
64. _DrawingPath.StrokeThickness=40;
65. }
66. else
67. {
68. varrandom=newRandom();
69. varstrokeBrush=newSolidColorBrush(Color.FromRgb((byte)random.Next(200,255),(byte)random.Next(0,255),(byte)random.Next(0,255)));
70. _DrawingPath.Stroke=strokeBrush;
71. _DrawingPath.StrokeThickness=10;
72. }
73. _PathVector2DDictionary.Add(_DrawingPath,newList<Vector2D>());
74. drawingCanvas.Children.Add(_DrawingPath);
75. }
77. privatevoidDrawingCanvas_PreviewMouseLeftButtonUp(objectsender,MouseButtonEventArgse)
78. {
79. _IsStart=false;
80. _DrawingPath=default;
81. }
83. privatevoidDrawingCanvas_PreviewMouseMove(objectsender,MouseEventArgse)
84. {
85. if(!_IsStart)
86. return;
88. if(_DrawingPathisnull)
89. return;
91. Vector2DcurrenPoint=e.GetPosition(drawingCanvas);
92. if(currenPoint.X<0||currenPoint.Y<0)
93. return;
95. if(currenPoint.X>drawingCanvas.ActualWidth||currenPoint.Y>drawingCanvas.ActualHeight)
96. return;
98. if(_PathVector2DDictionary[_DrawingPath].Count>0)
99. {
100. if(Vector2D.CalculateVectorDistance(currenPoint,_PathVector2DDictionary[_DrawingPath][_PathVector2DDictionary[_DrawingPath].Count-1])>1)
101. _PathVector2DDictionary[_DrawingPath].Add(e.GetPosition(drawingCanvas));
102. }
103. else
104. _PathVector2DDictionary[_DrawingPath].Add(e.GetPosition(drawingCanvas));
106. DrawLine(_DrawingPath);
107. }
109. publicdoubleTension
110. {
111. get=>(double)GetValue(TensionProperty);
112. set=>SetValue(TensionProperty,value);
113. }
115. publicdoubleSmoothSampling
116. {
117. get=>(double)GetValue(SmoothSamplingProperty);
118. set=&g;SetValue(SmoothSamplingProperty,value);
119. }
121. publicboolIsEraser
122. {
123. get=>(bool)GetValue(IsEraserProperty);
124. set=>SetValue(IsEraserProperty,value);
125. }
127. privatevoidDrawLine(Pathpath)
128. {
129. if(_PathVector2DDictionary[path].Count>2)
130. {
131. varpathVector2Ds=_PathVector2DDictionary[path];
132. varsmoothNum=(int)(_PathVector2DDictionary[path].Count*SmoothSampling);
133. if(smoothNum>1)
134. pathVector2Ds=ComputingHelper.AverageSampling(_PathVector2DDictionary[path],smoothNum);
135. varlineB=newLineB(pathVector2Ds,false);
136. lineB.Tension=Tension;
138. path.Data=lineB;
139. }
140. }
142. privatevoidbtnClertCanvas_Click(objectsender,RoutedEventArgse)
143. {
144. drawingCanvas.Children.Clear();
145. _PathVector2DDictionary.Clear();
146. }
147. }
148. }

复制代码

到此这篇关于WPF+Canvas实现平滑笔迹的示例代码的文章就介绍到这了,更多相关WPF Canvas平滑笔迹内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持中国红客联盟！