C#贝塞尔曲线的应用-未读红点拖拽粘连效果

原创已于 2022-12-07 02:02:52 修改 · 445 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#c#

于 2022-12-07 01:56:50 首次发布

自定义控件专栏收录该内容

3 篇文章

订阅专栏

前言

提示：仿照手机qq未读红点拖拽粘连效果

贝塞尔曲线的应用非常广泛,本篇文章将使用Winform贝塞尔曲线来实现QQ未读红点拖拽粘连的效果

手机QQ粘连效果

在这里插入图片描述

最终实现的效果

在这里插入图片描述

分析效果

1.可以看出随着拖拽的距离变大，固定点的圆会逐渐变小
2.粘连效果是一个由两个小球边缘位置贝塞尔曲线构成,所以需要计算出两个小球边缘的点 A,B,C,D和两条贝塞尔曲线的控制点E,F

核心公式

计算按下的位置到中心点的距离

通过公式c^2 = a^2+b^2 带入到代码为

// 计算两点距离公式  c^2 = a^2+b^2
int y2 = mouse_point.Y - (this.Height / 2);
int x2 = mouse_point.X - (this.Width / 2);
distance = Math.Sqrt(y2 * y2 + x2 * x2);

计算出按下位置到中心点的角度

 // 计算角度公式
degree = Math.Atan2(y2, x2) * 180 / Math.PI;
Console.WriteLine(degree);

边缘点的计算

边缘的点的可以用三角函数公式计算得到

在这里插入图片描述

// 小球一侧的点
var angle = (degree + 90) / 180 * Math.PI;
float x1 = Convert.ToSingle(radius * 0.5f * Math.Cos(angle) + (this.Width / 2));
float y1 = Convert.ToSingle(radius * 0.5f * Math.Sin(angle) + (this.Height / 2));

// 另一侧的点
var angle2 = (degree - 90) / 180 * Math.PI;
float x2 = Convert.ToSingle(radius * 0.5f * Math.Cos(angle2) + (this.Width / 2));
float y2 = Convert.ToSingle(radius * 0.5f * Math.Sin(angle2) + (this.Height / 2));

贝塞尔控制点的计算

两个控制点的位置刚刚在球心连线的1/4和3/4处

// 两个圆之间的1/4 和 3/4 点,就是三阶贝塞尔的两个控制点
var angle3 = degree / 180 * Math.PI;
float control_x1 = Convert.ToSingle(distance * 0.25f * Math.Cos(angle3) + (this.Width / 2));
float control_y1 = Convert.ToSingle(distance * 0.25f * Math.Sin(angle3) + (this.Height / 2));

float control_x2 = Convert.ToSingle(distance * 0.75 * Math.Cos(angle3) + (this.Width / 2));
float control_y3 = Convert.ToSingle(distance * 0.75 * Math.Sin(angle3) + (this.Height / 2));