图像库的图像管理器
2.75/5 (10投票s)
智能自定义控件
引言
许多图片库类型的 Web 应用程序都提供更改图片属性的功能。这允许以各种选项查看图片，例如，用户可以旋转图片、缩放图片、更改灰度、镜像图片或增加/减少其不透明度。我已经开发了这个智能自定义控件，它允许您通过从上下文菜单中选择图片属性来执行所有这些操作。
背景
这个想法是在我查看 Silverlite Telerik 动画控件时产生的。这些控件使用Microsoft 过滤器，这些过滤器是 IE 特定的。
使用代码
完整的代码和程序集已附加。您可以下载ImageControl.dll 并将其添加到您的项目引用中。将控件放在页面上后，您可以分配各种属性以控制上下文菜单中设置的属性集。以下是公开的属性
- 图片 URL
- ShowRotateLeft (显示左旋转)
- ShowRotateRight (显示右旋转)
- ShowGrayScale (显示灰度)
- ShowMirror (显示镜像)
- ShowOpaccity (显示不透明度)
- ShowInvert (显示反转)
- ShowZoomIn (显示放大)
- ShowZoomOut (显示缩小)
- LeftRotateImage (左旋转图片)
- RighttRotateImage (右旋转图片)
- ZoomInImage (放大图片)
- ZoomOutImage (缩小图片)
- ImageHeight
- ImageWidth
- ContextMenuTableClass (上下文菜单表格类)
- ContextMenuMouseOverClass (上下文菜单鼠标悬停类)
- ContextMenuMouseOutClass (上下文菜单鼠标移出类)
关于代码
步骤 1
为了将 Microsoft 过渡过滤器应用于图片，我重写了 CreateChildControls 事件并添加了一个 DIV/SPAN (HtmlGenericControl) 标签以及默认的过滤器属性。然后，我在 DIV 控件内添加了图片控件，以及上下文菜单的属性。
protected override void CreateChildControls()
{
Controls.Clear();
HtmlGenericControl ogen = new HtmlGenericControl();
ogen.ID =this.ClientID + "_filterDIV";
ogen.Attributes.Add("style", "position:relative; width:" + _ImageWidth
+ "; height:" + _ImageHeight + "; background:gold; padding:2px;
border:1px solid black;
filter:progid:DXImageTransform.Microsoft.gradient(
startColorstr='BLACK, endColorstr='yellowgreen'),
progid:DXImageTransform.Microsoft.BasicImage(
Rotation=0,Mirror=0,Invert=0,XRay=0,Grayscale=0,Opacity=1.00,Mask=0),
;");
System.Web.UI.WebControls.Image oImage
= new System.Web.UI.WebControls.Image();
oImage.ID = "filterImage";
oImage.AlternateText = "";
if ( Height !=0)
oImage.Height = Height;
if (Width != 0)
oImage.Width = Width;
oImage.ImageUrl = _ImageUrl;
_ImageClientID = oImage.ClientID;
ogen.Controls.Add(oImage);
this.Controls.Add(ogen);
string strScripr = "<script type='text/javascript'
language='javascript'> document.all(
'" + oImage.ClientID + "').oncontextmenu = function() {
dopopup(event.x,event.y,'"+_ContextmenuDivID+"');return false;
} </script>";
this.Page.ClientScript.RegisterStartupScript(typeof(string),
"RefisterEvent",strScripr);
base.CreateChildControls();
}
第二步
下一步是注册所需的 JS 文件和 CSS 文件。公共 Javascript 和默认 CSS 是嵌入资源，因此在控件的 PreRender 中我注册了它们。
protected override void OnPreRender(EventArgs e)
{
/*Add JS */
string scriptUrl = Page.ClientScript.GetWebResourceUrl(
this.GetType(), "ImageControl.ImgControl.js");
this.Page.ClientScript.RegisterClientScriptInclude(typeof(string),
"ImageControlJS", scriptUrl);
/*Add CSS */
string includeTemplate
= "<link rel='stylesheet' text='text/css' href='{0}' />";
string includeLocation
= this.Page.ClientScript.GetWebResourceUrl(this.GetType(),
"ImageControl.ImageControl.css");
LiteralControl include
= new LiteralControl(String.Format(includeTemplate,includeLocation));
((System.Web.UI.HtmlControls.HtmlHead)this.Page.Header).Controls.Add(
include);
/*End Add CSS */
base.OnPreRender(e);
}
步骤 3
我使用 HTML 表格创建了上下文菜单——默认样式为隐藏——基于选择的各种属性，例如在 Render 事件上的 ShowRotateLeft/ShowRotateRight。还有一点：由于 JS 根据从上下文菜单中选择的属性更改过渡过滤器，因此我们必须更改与所选图片对应的过渡过滤器。这就是为什么我们必须为 DIV 元素提供唯一 ID 的原因。我在 onInit 事件中给它一个唯一名称，并使用this.UniqueID+"_ContexuMenuDiv"生成一个唯一 ID。
protected override void Render(HtmlTextWriter writer)
{
writer.WriteLine(
"<div style=\"position:absolute;z-index:500; display:'none';\" id='"
+ _ContextmenuDivID + "' onclick=\"this.style.display='none';\">");
/*start writing Context Menu table */
writer.WriteLine("<table class='"+_ContextMenuTableClass+"'>");
if(_ShowRotateLeft)
writer.WriteLine(
"<TR><TD ONMOUSEOVER
=\"this.className='Mover'\" ONMOUSEOUT
=\"className='MOut'\" onclick
=\"RotateLeft(
'"+this.ClientID+"_filterDIV');\">Rotate Left</TD></TR>");
if (_ShowRotateRight)
writer.WriteLine(
"<TR><TD ONMOUSEOVER
=\"this.className='Mover'\" ONMOUSEOUT
=\"className='MOut'\" onclick
=\"RotateRight(
'" + this.ClientID + "_filterDIV');\">
Rotate Right</TD></TR>");
if(_ShowGrayScale)
writer.WriteLine(
"<TR><TD ONMOUSEOVER
=\"this.className='Mover'\" ONMOUSEOUT
=\"className='MOut'\" onclick
=\"ChangeScale('grayscale',
'" + this.ClientID + "_filterDIV');\">
GrayScale</TD></TR>");
if (_ShowInvert)
writer.WriteLine(
"<TR><TD ONMOUSEOVER
=\"this.className='Mover'\" ONMOUSEOUT
=\"className='MOut'\" onclick
=\"ChangeScale('invert',
'" + this.ClientID + "_filterDIV');\">Invert</TD></TR>");
if (_ShowMirror)
writer.WriteLine(
"<TR><TD ONMOUSEOVER
=\"this.className='Mover'\" ONMOUSEOUT
=\"className='MOut'\" onclick=\"ChangeScale(
'mirror','" + this.ClientID + "_filterDIV');\">
Mirror</TD></TR>");
if (_ShowOpaccity)
{
writer.WriteLine(
"<TR><TD ONMOUSEOVER=\"this.className='Mover'\" ONMOUSEOUT
=\"className='MOut'\" onclick=\"Opac(
1,'" + this.ClientID + "_filterDIV');\">
Increase Opacity</TD></TR>");
writer.WriteLine(
"<TR><TD ONMOUSEOVER=\"this.className='Mover'\" ONMOUSEOUT
=\"className='MOut'\" onclick=\"Opac(
2,'" + this.ClientID + "_filterDIV');\">
Decrease Opacity</TD></TR>");
}
if (_ShowZoomIn)
writer.WriteLine(
"<TR><TD ONMOUSEOVER=\"this.className='Mover'\" ONMOUSEOUT
=\"className='MOut'\" onclick=\"ZoomIn(
'" + _ImageClientID + "');\">Zoom In</TD></TR>");
if (_ShowZoomOut)
writer.WriteLine(
"<TR><TD ONMOUSEOVER=\"this.className='Mover'\" ONMOUSEOUT
=\"className='MOut'\" onclick=\"ZoomOut(
'" + _ImageClientID + "');\">Zoom Out</TD></TR>");
writer.WriteLine("</table>");
/*End writing Context Menu table */
writer.WriteLine("</div>");
base.Render(writer);
}
protected override void OnInit(EventArgs e) {
_ContextmenuDivID = this.UniqueID+"_ContexuMenuDiv";
base.OnInit(e);
}
关注点
Microsoft 提供了许多文本和图片的过滤器和过渡效果。但是，要在 ASPX 页面中使用它们，您必须精通 Javascript 并了解这些过滤器。通过使用此控件，您无需了解这些过滤器的详细信息；您只需拖放控件即可。
历史
- 2007年5月17日 - 发布原始版本