欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

(七十七)c#Winform自定义控件-采样控件

程序员文章站 2023-11-21 16:01:10
前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章。 GitHub:https://github.com/kwwwvagaa/NetWinformControl 码云:https://gitee.com/kwwwvagaa/net_winform_custom_contr ......

前提

入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章。

github:https://github.com/kwwwvagaa/netwinformcontrol

码云:

如果觉得写的还行,请点个 star 支持一下吧

欢迎前来交流探讨: 企鹅群568015492 

来都来了,点个【推荐】再走吧,谢谢

nuget

install-package hzh_controls

目录

用处及效果

注意观察各个控件交叠的地方,是不是发现他们没有遮挡?这就是这个控件的妙处了。

(七十七)c#Winform自定义控件-采样控件

准备工作

先说明一下这个控件的作用,很多时候我们需要一个图片类型的控件,但是有需要密集的放在一起,如果单纯的设置背景图或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&lt;pointf&gt;.</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         }

 

最后的话

如果你喜欢的话,请到  点个星星吧