前提
入行已经7,8年了，一直想做一套漂亮点的自定义控件，于是就有了本系列文章。
github：https://github.com/kwwwvagaa/netwinformcontrol
码云：
如果觉得写的还行，请点个 star 支持一下吧
欢迎前来交流探讨： 企鹅群568015492
来都来了，点个【推荐】再走吧，谢谢
nuget
install-package hzh_controls
目录
用处及效果
注意观察各个控件交叠的地方，是不是发现他们没有遮挡？这就是这个控件的妙处了。
准备工作
先说明一下这个控件的作用，很多时候我们需要一个图片类型的控件，但是有需要密集的放在一起，如果单纯的设置背景图或image的话 交叠在一起的部分就会存在遮挡现象，所有就有了这个控件。
该控件可以根据设置的采样图片来裁剪有用的绘图区域，这样的好处就是在交叠的时候，无用区域不会遮挡。
这个用gdi+画的，另外也用到了一点三角函数，不明白的话 可以先百度下
开始
添加一个类ucsampling ，继承usercontrol
添加属性
1 /// <summary>
2 /// the sampling imag
3 /// </summary>
4 private bitmap samplingimag = null;
5 /// <summary>
6 /// gets or sets the sampling imag.
7 /// </summary>
8 /// <value>the sampling imag.</value>
9 [browsable(true), category("自定义属性"), description("采样图片"), localizable(true)]
10 public bitmap samplingimag
11 {
12 get { return samplingimag; }
13 set
14 {
15 samplingimag = value;
16 resetborderpath();
17 invalidate();
18 }
19 }
20
21 /// <summary>
22 /// the transparent
23 /// </summary>
24 private color? transparent = null;
25
26 /// <summary>
27 /// gets or sets the transparent.
28 /// </summary>
29 /// <value>the transparent.</value>
30 [browsable(true), category("自定义属性"), description("透明色，如果为空，则使用0,0坐标处的颜色"), localizable(true)]
31 public color? transparent
32 {
33 get { return transparent; }
34 set
35 {
36 transparent = value;
37 resetborderpath();
38 invalidate();
39 }
40 }
41
42 /// <summary>
43 /// the alpha
44 /// </summary>
45 private int alpha = 50;
46
47 /// <summary>
48 /// gets or sets the alpha.
49 /// </summary>
50 /// <value>the alpha.</value>
51 [browsable(true), category("自定义属性"), description("当作透明色的透明度，小于此透明度的颜色将被认定为透明，0-255"), localizable(true)]
52 public int alpha
53 {
54 get { return alpha; }
55 set
56 {
57 if (value < 0 || value > 255)
58 return;
59 alpha = value;
60 resetborderpath();
61 invalidate();
62 }
63 }
64
65 /// <summary>
66 /// the color threshold
67 /// </summary>
68 private int colorthreshold = 10;
69
70 /// <summary>
71 /// gets or sets the color threshold.
72 /// </summary>
73 /// <value>the color threshold.</value>
74 [browsable(true), category("自定义属性"), description("透明色颜色阀值"), localizable(true)]
75 public int colorthreshold
76 {
77 get { return colorthreshold; }
78 set
79 {
80 colorthreshold = value;
81 resetborderpath();
82 invalidate();
83 }
84 }
85
86 /// <summary>
87 /// the bit cache
88 /// </summary>
89 private bitmap _bitcache;
在大小改变或图片改变时重新计算边界
1 /// <summary>
2 /// the m border path
3 /// </summary>
4 graphicspath m_borderpath = new graphicspath();
5
6 /// <summary>
7 /// handles the sizechanged event of the ucsampling control.
8 /// </summary>
9 /// <param name="sender">the source of the event.</param>
10 /// <param name="e">the <see cref="eventargs"/> instance containing the event data.</param>
11 void ucsampling_sizechanged(object sender, eventargs e)
12 {
13 resetborderpath();
14 }
15
16 /// <summary>
17 /// resets the border path.
18 /// </summary>
19 private void resetborderpath()
20 {
21 if (samplingimag == null)
22 {
23 m_borderpath = this.clientrectangle.createroundedrectanglepath(5);
24 }
25 else
26 {
27 var bit = new bitmap(this.clientrectangle.width, this.clientrectangle.height);
28 using (var bitg = graphics.fromimage(bit))
29 {
30 bitg.drawimage(samplingimag, this.clientrectangle, 0, 0, samplingimag.width, samplingimag.height, graphicsunit.pixel);
31 }
32 _bitcache = bit;
33 m_borderpath = new graphicspath();
34 list<pointf> lstpoints = getborderpoints(bit, transparent ?? samplingimag.getpixel(0, 0));
35 m_borderpath.addlines(lstpoints.toarray());
36 m_borderpath.closeallfigures();
37 }
38 }
39
40 /// <summary>
41 /// gets the border points.
42 /// </summary>
43 /// <param name="bit">the bit.</param>
44 /// <param name="transparent">the transparent.</param>
45 /// <returns>list<pointf>.</returns>
46 private list<pointf> getborderpoints(bitmap bit, color transparent)
47 {
48 float diameter = (float)math.sqrt(bit.width * bit.width + bit.height * bit.height);
49 int intsplit = 0;
50 intsplit = (int)(7 - (diameter - 200) / 100);
51 if (intsplit < 1)
52 intsplit = 1;
53 list<pointf> lstpoint = new list<pointf>();
54 for (int i = 0; i < 360; i += intsplit)
55 {
56 for (int j = (int)diameter / 2; j > 5; j--)
57 {
58 point p = getpointbyangle(i, j, new pointf(bit.width / 2, bit.height / 2));
59 if (p.x < 0 || p.y < 0 || p.x >= bit.width || p.y >= bit.height)
60 continue;
61 color _color = bit.getpixel(p.x, p.y);
62 if (!(((int)_color.a) <= alpha || islikecolor(_color, transparent)))
63 {
64 if (!lstpoint.contains(p))
65 {
66 lstpoint.add(p);
67 }
68 break;
69 }
70 }
71 }
72 return lstpoint;
73 }
74
75 /// <summary>
76 /// determines whether [is like color] [the specified color1].
77 /// </summary>
78 /// <param name="color1">the color1.</param>
79 /// <param name="color2">the color2.</param>
80 /// <returns><c>true</c> if [is like color] [the specified color1]; otherwise, <c>false</c>.</returns>
81 private bool islikecolor(color color1, color color2)
82 {
83 var cv = math.sqrt(math.pow((color1.r - color2.r), 2) + math.pow((color1.g - color2.g), 2) + math.pow((color1.b - color2.b), 2));
84 if (cv <= colorthreshold)
85 return true;
86 else
87 return false;
88 }
1 #region 根据角度得到坐标 english:get coordinates from angles
2 /// <summary>
3 /// 功能描述:根据角度得到坐标 english:get coordinates from angles
4 /// 作 者:hzh
5 /// 创建日期:2019-09-28 11:56:25
6 /// 任务编号:pos
7 /// </summary>
8 /// <param name="angle">angle</param>
9 /// <param name="radius">radius</param>
10 /// <param name="origin">origin</param>
11 /// <returns>返回值</returns>
12 private point getpointbyangle(float angle, float radius, pointf origin)
13 {
14 float y = origin.y + (float)math.sin(math.pi * (angle / 180.00f)) * radius;
15 float x = origin.x + (float)math.cos(math.pi * (angle / 180.00f)) * radius;
16 return new point((int)x, (int)y);
17 }
18 #endregion
取边界的思路如下：
1，以控件中心为原点，按照一定的角度顺时针依次进行旋转，
2、每次旋转后，按照此角度从外向内，找到第一个不是透明的点记录下来，这就是外边界点
这个取边界算法感觉并不是太好，如果哪位小伙伴有更好的算法，希望可以探讨一下
重绘
1 protected override void onpaint(painteventargs e)
2 {
3 base.onpaint(e);
4 e.graphics.setgdihigh();
5
6 this.region = new system.drawing.region(m_borderpath);
7
8 if (_bitcache != null)
9 e.graphics.drawimage(_bitcache, 0, 0);
10
11 }
最后的话
如果你喜欢的话，请到 点个星星吧
黄山市民网：https://www.huangshanshimin.com/
