WPF实现背景灯光随鼠标闪动效果

本文实例为大家分享了WPF实现背景灯光随鼠标闪动的具体代码,供大家参考,具体内容如下

实现效果如下:

思路:将容器分割成组合三角形Path,鼠标移动时更新每个三角形的填充颜色。

步骤:

1、窗体xaml

只需放置一个Canvas。

<Canvas x:Name="container" Width="400" Height="400"></Canvas>

2、交互逻辑

/// <summary>
/// MainWindow.xaml 的交互逻辑
/// </summary>
 public partial class MainWindow : Window
 {
  private Point lastMousePosition = new Point(0, 0);//鼠标位置
  private int triangleLength = 100;//三角形边长

  public MainWindow()
  {
   InitializeComponent();
   this.Loaded += MainWindow_Loaded;
   CompositionTarget.Rendering += UpdateTriangle;
   this.container.PreviewMouseMove += UpdateLastMousePosition;
  }

  private void MainWindow_Loaded(object sender, RoutedEventArgs e)
  {
   //将长方形容易划分成组合三角形
   int horizontalCount = (int)(this.container.ActualWidth / triangleLength);
   int verticalCount = (int)(this.container.ActualHeight / triangleLength);
   for (int i = 0; i < horizontalCount; i++)
   {
    for (int j = 0; j < verticalCount; j++)
    {
     Path trianglePath1 = new Path();
     var g1 = new StreamGeometry();
     using (StreamGeometryContext context = g1.Open())
     {
      context.BeginFigure(new Point(i * triangleLength, j * triangleLength), true, true);
      context.LineTo(new Point(i * triangleLength, (j + 1) * triangleLength), true, false);
      context.LineTo(new Point((i + 1) * triangleLength, (j + 1) * triangleLength), true, false);
     }
     trianglePath1.Data = g1;
     trianglePath1.Fill = new SolidColorBrush(Color.FromArgb(255, 247, 18, 65));
     this.container.Children.Add(trianglePath1);

     Path trianglePath2 = new Path();
     var g2 = new StreamGeometry();
     using (StreamGeometryContext context = g2.Open())
     {
      context.BeginFigure(new Point(i * triangleLength, j * triangleLength), true, true);
      context.LineTo(new Point((i + 1) * triangleLength, j * triangleLength), true, false);
      context.LineTo(new Point((i + 1) * triangleLength, (j + 1) * triangleLength), true, false);
     }
     trianglePath2.Data = g2;
     trianglePath2.Fill = new SolidColorBrush(Color.FromArgb(255, 247, 18, 65));
     this.container.Children.Add(trianglePath2);
    }
   }
  }

  private void UpdateTriangle(object sender, EventArgs e)
  {
   //获取子控件
   List<Path> childList = GetChildObjects<Path>(this.container);
   for (int i = 0; i < childList.Count; i++)
   {
    for (int j = 1; j < childList.Count; j++)
    {
     string si = childList[i].Data.ToString();
     string si1 = MidStrEx(si, "M", "L");
     string si2 = MidStrEx(si, "L", " ");
     string si3 = MidStrEx(si, " ", "z");
     string sj = childList[j].Data.ToString();
     string sj1 = MidStrEx(sj, "M", "L");
     string sj2 = MidStrEx(sj, "L", " ");
     string sj3 = MidStrEx(sj, " ", "z");
     //左右三角形判断
     if (si1 == sj1 && si3 == sj3)
     {
      double x = childList[i].Data.Bounds.X + (1 - Math.Pow(2, 0.5) / 2) * triangleLength - lastMousePosition.X;
      double y = childList[i].Data.Bounds.Y + (1 - Math.Pow(2, 0.5) / 2) * triangleLength - lastMousePosition.Y;
      double rRadio = 1 - Math.Pow(x * x + y * y, 0.5) / Math.Pow(this.container.ActualWidth * this.container.ActualWidth + this.container.ActualHeight * this.container.ActualHeight, 0.5);
      childList[j].Fill = new SolidColorBrush(Color.FromArgb((byte)(255 * rRadio), 247, 18, 65));
      x = childList[j].Data.Bounds.TopRight.X - (1 - Math.Pow(2, 0.5) / 2) * triangleLength - lastMousePosition.X;
      rRadio = 1 - Math.Pow(x * x + y * y, 0.5) / Math.Pow(this.container.ActualWidth * this.container.ActualWidth + this.container.ActualHeight * this.container.ActualHeight, 0.5);
      childList[i].Fill = new SolidColorBrush(Color.FromArgb((byte)(255 * rRadio), 247, 18, 65));
      break;
     }
    }
   }
  }

  private void UpdateLastMousePosition(object sender, MouseEventArgs e)
  {
   lastMousePosition = e.GetPosition(this.container);
  }

  /// <summary>
  /// 获得所有子控件
  /// </summary>
  private List<T> GetChildObjects<T>(System.Windows.DependencyObject obj) where T : System.Windows.FrameworkElement
  {
   System.Windows.DependencyObject child = null;
   List<T> childList = new List<T>();
   for (int i = 0; i < VisualTreeHelper.GetChildrenCount(obj); i++)
   {
    child = VisualTreeHelper.GetChild(obj, i);
    if (child is T)
    {
     childList.Add((T)child);
    }
    childList.AddRange(GetChildObjects<T>(child));
   }
   return childList;
  }

  /// <summary>
  /// 截取两个指定字符中间的字符串
  /// </summary>
  public static string MidStrEx(string sourse, string startstr, string endstr)
  {
   string result = string.Empty;
   int startindex, endindex;
   try
   {
    startindex = sourse.IndexOf(startstr);
    if (startindex == -1)
     return result;
    string tmpstr = sourse.Substring(startindex + startstr.Length);
    endindex = tmpstr.IndexOf(endstr);
    if (endindex == -1)
     return result;
    result = tmpstr.Remove(endindex);
   }
   catch (Exception ex)
   {
   }
   return result;
  }
}

说明:当组合三角形过多时,会有明显卡顿,需要优化色彩更新方法。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • C#实现闪动托盘图标效果的方法

    本文实例讲述了C#实现闪动托盘图标效果的方法.分享给大家供大家参考,具体如下: 在用户正在登录QQ或者使用Firemail邮件系统自动收取邮件的时候,托盘图标会闪动提示用户正在运行的任务. 闪动图标可以使用定时切换托盘图标的方式实现,托盘图标可以从ImageList控件中获取.在ImageList控件里面添加三个icon,第一个icon表示窗体启动以后的托盘图标.第二个和第三个图标分别表示当特定的任务发生的时候,定时切换的图标. (1)设置托盘的图标可以从ImageList控件中的Image对象

  • WPF实现背景灯光随鼠标闪动效果

    本文实例为大家分享了WPF实现背景灯光随鼠标闪动的具体代码,供大家参考,具体内容如下 实现效果如下: 思路:将容器分割成组合三角形Path,鼠标移动时更新每个三角形的填充颜色. 步骤: 1.窗体xaml 只需放置一个Canvas. <Canvas x:Name="container" Width="400" Height="400"></Canvas> 2.交互逻辑 /// <summary> /// Main

  • jQuery实现响应鼠标背景变化的动态菜单效果代码

    本文实例讲述了jQuery实现响应鼠标背景变化的动态菜单效果代码.分享给大家供大家参考.具体如下: 这是一款jQuery响应鼠标背景变化的动态菜单,菜单的背景在鼠标放上后有所变化,这款菜单的实现主要是使用了图片,修改菜单的时候要修改图片,有些麻烦,不过效果不错,引入的jquery插件是1.7版本,高版本jQuery未测试,应该也可以啦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-cha-bg-pic-menu-co

  • QQ登录背景闪动效果附效果演示源码下载

    在前面时间更新的新版本QQ中,登录背景和以前不一样了,是一组闪动的背景,效果非常棒. 效果演示     源码下载 改效果需要引入三个js文件: <script src="js/Jq-19.js" type="text/javascript"></script> <script src="js/cavas.js" type="text/javascript"></script> &

  • jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码

    本文实例讲述了jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码.分享给大家供大家参考,具体如下: 这是一款仿腾讯网QQ空间装扮预览图片的鼠标提示效果,感应鼠标显示图片的介绍信息,当你把鼠标移到图片上的时候,图片的背景会有所变化,并会显示该图片的对应文字内容,是QQ空间使用过的效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-qq-zone-pic-view-codes/ 具体代码如下: <!DOCTYPE html

  • jQuery实现的背景动态变化导航菜单效果

    本文实例讲述了jQuery实现的背景动态变化导航菜单效果.分享给大家供大家参考.具体如下: 这里介绍一款使用jQuery插件制作完成的导航菜单,一大特点是,菜单的背景有动态效果,与使用的背景图片完全变换,动态效果是在鼠标悬停时出现,也就是把鼠标放在菜单上的时候,背景即开始滚动起来,看上去漂亮极了,而且兼容性也是相当不错的,推荐给网页设计者使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-bg-cha-menu-nav-code

  • js实现鼠标跟随运动效果

    鼠标跟随运动效果展示 1.使用命令创建基本结构ul.cursorPlay#cursorPlay>li*12>a>img+div>span 2.给span标签添加字段 3.设置基本的样式 1.cursorPlay的宽度 992px,高度600px 2.cursorPlay li背景为白色,内边距为8px,外边距5px,显示浮动为左浮动 3.cursorPlay li a,cursorPlay li a img显示为块状并且为相对布局 4.cursorPlay li a添加overfl

  • js鼠标跟随运动效果

    本文实例为大家分享了js鼠标跟随效果展示的具体代码,供大家参考,具体内容如下 1.使用命令创建基本结构ul.cursorPlay#cursorPlay>li*12>a>img+div>span 2.给span标签添加字段 3.设置基本的样式 cursorPlay的宽度 992px,高度600px cursorPlay li背景为白色,内边距为8px,外边距5px,显示浮动为左浮动 cursorPlay li a,cursorPlay li a img显示为块状并且为相对布局 cur

  • jQuery实现感应鼠标动画效果自动伸长的输入框实例

    本文实例讲述了jQuery实现感应鼠标动画效果自动伸长的输入框.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

  • jQuery实现背景弹性滚动的导航效果

    本文实例讲述了jQuery实现背景弹性滚动的导航效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • 基于jQuery创建鼠标悬停效果的方法

    本文实例讲述了基于jQuery创建鼠标悬停效果的方法.分享给大家供大家参考.具体实现方法如下: 1. 创建HTML: <ul> <li><a href="/tv"><img src="images/tv_off.gif" class="mainnav"></a></li> </ul> 2. 选择.mainnav的class: $(".mainnav&qu

随机推荐