制作简易图像浏览器,互联网营销

简介:   先发点牢骚放松下心情, 最近完全没有做项目的动力,每天感觉脑子昏昏沉沉的没有一点状态。  一来可能快春节了,自己离家比较远也在担心何时回家何时购票,  二来公司程序员就我一个人在单干,软件 项目什么的做好了,却不能接受一次又一次的添加功能和修改数据库,(我真的很想骂某个人的娘)   三来也老早计划好了11年4月份一年合同到期后就离职,现在好像一点都静不下心来  如果有各位同僚给我开解开解我也好恢复下心境。

  先发点牢骚放松下心情, 最近完全没有做项目的动力,每天感觉脑子昏昏沉沉的没有一点状态。

  一来可能快春节了,自己离家比较远也在担心何时回家何时购票,

  二来公司程序员就我一个人在单干,软件 项目什么的做好了,却不能接受一次又一次的添加功能和修改数据库,(我真的很想骂某个人的娘)

  三来也老早计划好了11年4月份一年合同到期后就离职,现在好像一点都静不下心来

  如果有各位同僚给我开解开解我也好恢复下心境。

  好了,下面来说这个简易的图像浏览器吧。  其实这也不是无中生有我要去做的一个东西, 我们公司的软件 项目都是我一个人在做的, 在做之前我已经构思好了所有的东西,也尽自己最大努力去实现了。 但是一个人兼顾设计 开发 测试,。所有东西几个月下来, 有时候就会有其他新的想法。

  这个图像浏览器就算是其中一个小的部分吧, 先来看一下预览效果吧,

 

  就是Demo有缩略图的这个东西了, 我把它封装成了一个控件  命名为 ImageViewBox  .其实这个东西很简单,但是就是简单我们有时候一下又不知道如何下手,

  再加上我本身最近心情就比较烦躁,所以实现的时候太多细节也没注意, 只是简单实现一个缩略图浏览这样一个效果!

  不过就具体的实现方法我还是简单说下,也方便有需要的朋友可以借鉴!

  先简单描述下我可能要应用的场景:


我的软件是一套工程监测软件, 工程会有工程图, 一个工程会分几部分,每部分有自己的一张CAD的工程图,  每部分工程中会安装很多传感器或者监测设备。   那我所要做的软件首先需要一个主界面,这个主界面上就需要能显示工程图 以及 传感器的分布 的一个预览效果。 在我之前有一篇博客中也提到过,以前我用剪裁图片在原图上进行高亮的方式来实现。  但是随着一个工程分的部分越多,在工程背景图上用剪裁方式就不太好了 因为会太显拥挤!  那就只能用这样一种浏览的方式,将 工程中分出来的部分 用图像浏览器这种方式在显示,当选中单击它的时候 背景切换为它,并在它上面布设传感器控件。 实现类似如下的效果:  

 

  至于上面这张图怎么实现大家一眼也都看出来了,也不是本文要讨论的! 只是为了说明这个图片浏览器所要应用的一个场景,以便大家不用看到代码后太鄙视我!好了,现在说这个图像浏览器吧, 

  : 控件主体  ImageViewBox:UserControl   

  :缩略图显示主体  ImageViewItem:Control     这里为什么也设计为一个控件呢, 实际上是为了在 ImageViewBox中方便的直接用Dock布局,而不用复杂的绘制

  主要的东西就这2个, ImageViewItem 作为一个小控件,主要显示图像缩略图和图像标题 ,  当然为了我的特定应用场景,代码简单就OK了,有了ImageViewItem 只需要它添加到ImageViewBox中 并Dock =Left 就能规规矩矩的排成一行的。

   为了规矩的排成一个横行, 我们还需要限制ImageViewBox  以及 ImageViewItem 的大小, 另外ImageViewBox 的AutoScroll 也要设置为true,剩下的工作就是ImageViewItem 的呈现了,主要的效果就是 圆角边框、鼠标经过时的变色, 鼠标选中时的变色以及事件。原本我的应用场景中是需要定义一个对象 如: class 截面

        {
             public  Bitmap 截面背景图
            {
                
get ;
                
set ;
            }

            
public   string  截面名称
            {
                
get ;
                
set ;
            }

            
public  传感器 传感器数组
            {
                
get ;
                
set ;
            }
        }

  这样的话,我在ImageViewItem 的构造函数传入  截面 这个对象就可以了, 但是后来想想还是算了, 实际用到的时候用它的tag属性来绑定,现在为了演示方便就直接 public ImageViewItem(Bitmap bmp,string title)   好了。

  然后就是定义三种状态下,对不同状态下 ImageViewItem的绘制了, 限定缩略图大小为 96*96 , 具体的绘制部分代码如下:

  ///   <summary>
        
///  重写控件绘制
        
///   </summary>
        
///   <param name="e"></param>
         protected   override   void  OnPaint(PaintEventArgs e)
        {
            
using (Graphics g = e.Graphics)
            {
                
// 处理背景
                g.SetClip( this .ClientRectangle);
                g.Clear(SystemColors.Window);
                
// 绘制边框与背景色
                 using (Pen borderPen = new  Pen(NONE_BORDER_COLOR))
                {
                    
if  (BackStyle  ==  DrawBackStyle.FOCUSED)
                    {
                        borderPen.Color 
=  FOCUSED_BORDER_COLOR;
                        
using  (LinearGradientBrush backBrush  =   new  LinearGradientBrush( this .ClientRectangle,FOCUSED_LIGHT_COLOR,FOCUSED_DEEP_COLOR, LinearGradientMode.Vertical))
                        {
                            g.FillPath(backBrush, Utility.GetRoundedRectanglePath(
2 2 this .Width  -   4 this .Height  -   4 5 ));
                        }
                    }
                    
else   if  (BackStyle  ==  DrawBackStyle.SELECTED)
                    {
                        borderPen.Color 
=  SELECTED_BORDER_COLOR;
                        
using  (LinearGradientBrush backBrush  =   new  LinearGradientBrush( this .ClientRectangle, SELECTED_LIGHT_COLOR, SELECTED_DEEP_COLOR, LinearGradientMode.Vertical))
                        {
                            g.FillPath(backBrush, Utility.GetRoundedRectanglePath(
2 2 this .Width  -   4 this .Height  -   4 5 ));
                        }
                    }
                    g.DrawPath(borderPen, Utility.GetRoundedRectanglePath(
2 2 this .Width  -   4 this .Height  -   4 5 ));
                }
                
// 绘制缩略图与标题
                 if  ( this .ThumbnailImage  !=   null )
                {
                    g.DrawImage(
this .ThumbnailImage,  new  Rectangle(IMAGE_POINT, IMAGE_SIZE));
                }
                Color foreColor 
=   this .ImageViewBox.ForeColor;
                Rectangle rt 
=   new  Rectangle( 3 103 98 , TextRenderer.MeasureText( this .Title, ImageViewBox.Font).Height);
                TextRenderer.DrawText(g, 
this .Title, ImageViewBox.Font, rt, foreColor,
                    TextFormatFlags.EndEllipsis 
|  TextFormatFlags.HorizontalCenter  |  TextFormatFlags.VerticalCenter  |  TextFormatFlags.SingleLine);
            }
        }

  有一些细节方面的东西我就不多解释了,主要是为了方便我的应用, 不如 ImageViewItem中的  ImageViewBox 属性等! 以及用ImageViewBox属性来设置标题字体颜色等。这一部分对于有过制作自定义控件的朋友就很熟悉了, 那关于三种状态的的变化呢 也很简单,就是重写下 OnMouse 相关的函数,代码如下


        
///   <summary>
        
///  鼠标进入控件区域
        
///   </summary>
        
///   <param name="e"></param>
         protected   override   void  OnMouseEnter(EventArgs e)
        {
            
if  ( ! BackStyle.Equals(DrawBackStyle.SELECTED))
            {
                
this .BackStyle  =  DrawBackStyle.FOCUSED;
                
this .Refresh();
            }
            
base .OnMouseEnter(e);
        }

        
///   <summary>
        
///  鼠标移出控件区域
        
///   </summary>
        
///   <param name="e"></param>
         protected   override   void  OnMouseLeave(EventArgs e)
        {
            
if  ( ! BackStyle.Equals(DrawBackStyle.SELECTED))
            {
                
this .BackStyle  =  DrawBackStyle.NONE;
                
this .Refresh();
            }
            
base .OnMouseLeave(e);
        }

        
///   <summary>
        
///  控件被点击
        
///   </summary>
        
///   <param name="e"></param>
         protected   override   void  OnClick(EventArgs e)
        {
            
// 取消其他ImageViewItem 选中状态
             foreach  (ImageViewItem item  in   this .ImageViewItemCollection)
            {
                
if  (item.BackStyle  !=  DrawBackStyle.NONE)
                {
                    item.BackStyle 
=  DrawBackStyle.NONE;
                    item.Refresh();
                }
            }
            
this .BackStyle  =  DrawBackStyle.SELECTED;
            
this .Refresh();
            
base .OnClick(e);
        }

  有了上面这些东西,其实就已经能简单的实现本文标题的这个东西了,不过我们还需要加点东西 ,需要加一个类ImageViewItemCollection.cs  。呵呵,这样大家就知道该怎么做了吧,那我就不废话了! 请不要拍我,我也知道简单,我也想封装好一点发出来,但是真的心烦意乱,就当是给也在找这方面实现资料的朋友一个示例吧,虽然不怎么好!

   我就直接上代码了:代码下载

目录
相关文章
|
1月前
|
机器学习/深度学习 人工智能 搜索推荐
【图像生成技术】人工智能在广告营销的革新:图像生成技术的应用与实践代码示例
随着人工智能技术的飞速发展,广告营销行业迎来了前所未有的变革。图像生成技术,作为AI领域的一颗璀璨明星,正被广泛应用于创造个性化、高吸引力的产品展示图、海报乃至宣传视频,以精准对接目标受众,显著提升广告的转化率和整体营销效果。本文将深入探讨这一技术的应用场景,并通过一个简单的代码示例,展示如何利用深度学习框架TensorFlow来实现创意图像的自动生成。
43 4
|
2月前
|
JavaScript
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
|
3月前
自适应IT互联网营销企业网站pbootcms模板
一款蓝色自适应IT互联网营销企业网站pbootcms模板,该模板采用响应式设计,可自适应手机端,适合一切网络技术公司、互联网IT行业,源码下载,为您提供了便捷哦。
39 2
|
4月前
|
存储 人工智能 应用服务中间件
Web应用是一种通过互联网浏览器和网络技术在互联网上执行任务的计算机程序
【5月更文挑战第30天】Web应用是一种通过互联网浏览器和网络技术在互联网上执行任务的计算机程序
56 2
|
Web App开发 存储 缓存
前端性能精进之浏览器(三)——图像
前端性能精进之浏览器(三)——图像
|
SQL 数据采集 运维
《实时数仓助力互联网实时决策和精准营销》|学习笔记
快速学习《实时数仓助力互联网实时决策和精准营销》
235 0
|
编解码 缓存 资源调度
揭密浏览器指纹:原来我们一直被互联网巨头监视,隐私在网上裸奔、无处可藏
今天讲⼀些让您按捺不住和欲求不满的反浏览器追踪技术,揭开你是如果被互联网巨头监控的。
352 0
揭密浏览器指纹:原来我们一直被互联网巨头监视,隐私在网上裸奔、无处可藏
|
Web App开发 监控
从AIPL到GROW,谈互联网大厂的营销分析模型
上一篇《一文看懂:搭建活动分析体系》分享以后,有小伙伴问:那做活动分析,是不是也有模型呢?答:不但有,而且很多。而且互联网大厂尤其热衷于创造新模型,以至于每年都有新词冒出来,诸如:AIPL、FAST、GROW、RISE、5A……等等,看得人头晕目眩。今天就跟大家简单聊聊这些营销模型背后的底层逻辑。
479 0
从AIPL到GROW,谈互联网大厂的营销分析模型
|
数据采集 弹性计算 运维
实时数仓助力互联网实时决策和精准营销|学习笔记
快速学习 实时数仓助力互联网实时决策和精准营销
215 0

热门文章

最新文章