该温度计控件主要通过一个类来实现,温度计根据高度来显示刻度数值,可根据获得的温度数值大小来填充颜色;同时,通过js脚本控制可在当前页面拖动该温度计控件放置于指定位置。
类:
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Drawing;
using System.Drawing.Imaging;
namespace WebChart
{
public class temperControl : HtmlGenericControl
{
public temperControl(int imageWidth, int imageHeight, int dataValue, string fileName)
{
div = new HtmlGenericControl("div");
img = new HtmlGenericControl("img");
img.Attributes["Src"] = chartDraw(imageWidth, imageHeight, dataValue, fileName);
img.Attributes["runnat"] = "server";
img.Attributes["id"] = "imgChart";
this.div.Controls.Add(img);
div.Attributes["id"] = "divDrg";
div.Attributes["onmouseover"] = "Drag.init(this);";
div.Style["position"] = "absolute";
this.Controls.Add(div);
}
protected HtmlGenericControl div;
protected HtmlGenericControl img;
protected string chartDraw(int imageWidth, int imageHeight, int dataValue, string fileName)
{
try
{
if (imageHeight < 290)
{
imageHeight = 160;
}
if (imageWidth < 80)
{
imageWidth = 80;
}
Bitmap image = new Bitmap(imageWidth, imageHeight);
Graphics g = Graphics.FromImage(image);
g.Clear(Color.Silver);
int px = Convert.ToInt32(Unit.Percentage(image.Width * 0.5).Value);
int xValue = Convert.ToInt32(Unit.Percentage(px * 0.1).Value);
int length = Convert.ToInt32(Unit.Percentage(image.Height * 0.95).Value);
int width = Convert.ToInt32(Unit.Percentage(image.Height * 0.1).Value);
Point[] point1 = new Point[] { new Point(xValue * 6, 2), new Point(xValue * 6, length) };//刻度起点
Point[] point2 = new Point[] { new Point(xValue * 8, 2), new Point(xValue * 8, length) };
g.DrawEllipse(new Pen(Color.Black, 1), xValue * 8 + 4, 2, 2, 2); //单位
g.DrawString("C", new Font("宋体", 9), Brushes.Black, new Point(xValue * 8 + 6, 2));
g.DrawLine(new Pen(Color.Green, 1), new Point(xValue * 6, 2), new Point(xValue * 8, 2));
g.DrawLines(new Pen(Color.Green, 1), point1);
g.DrawLines(new Pen(Color.Green, 1), point2);
g.DrawBezier(new Pen(Color.Red, 2), point1[1], new Point(xValue * 4, image.Height), new Point(xValue * 10, image.Height), point2[1]);
System.Drawing.Drawing2D.GraphicsPath path = new System.Drawing.Drawing2D.GraphicsPath();
path.AddBezier(point1[1], new Point(xValue * 4, image.Height), new Point(xValue * 10, image.Height), point2[1]);
g.FillPath(new SolidBrush(Color.Red), path);
double yValue = Convert.ToDouble((Convert.ToInt32(Unit.Percentage((length - 10) * 0.99).Value))) / 130;
int value = 0;
if (Convert.ToInt32(yValue) * 130 <= Convert.ToInt32(Unit.Percentage((length - 10) * 0.99).Value))
{
value = Convert.ToInt32(yValue);
}
else
{
value = Convert.ToInt32(yValue) - 1;
}
for (int i = 0; i <= 130; i++)
{
int k = 5;
if (i % 5 == 0)
{
k = 10;
}
if (i % 10 == 0)
{
k = 15;
}
int addValue = value * i;
if (i == 130)
{
int a = point2[1].Y - addValue;
}
Point[] pointI = new Point[] { new Point(point2[1].X, point2[1].Y - addValue), new Point(point2[1].X + k, point2[1].Y - addValue) };
if (imageHeight < 290)
{
if (k != 5)
{
g.DrawLines(new Pen(Color.Black, 1), pointI);
}
}
else
{
g.DrawLines(new Pen(Color.Black, 1), pointI);
}
if (k == 15)
{
int point = i - 30;
g.DrawString(point.ToString(), new Font("宋体", 9), Brushes.Black, new Point(pointI[1].X + 2, pointI[1].Y - 5));
}
}
int data = dataValue;
if (dataValue >= 0 && dataValue <= 100)
{
dataValue = (dataValue + 30) * value;
}
else if (-30 <= dataValue && dataValue < 0)
{
dataValue = (dataValue + 30) * value;
}
else if (dataValue < -30)
{
dataValue = (-30 + 30) * value;
}
else if (dataValue > 100)
{
dataValue = (100 + 30) * value;
}
g.FillRectangle(new SolidBrush(Color.Red), point1[1].X, point1[1].Y - dataValue, xValue * 2, dataValue);
g.DrawString(data.ToString(), new Font("宋体", 9), Brushes.Red, new Point(point1[1].X - 22, point1[1].Y - dataValue - 5));
if (fileName == null || fileName == "")
{
fileName = ".";
}
string filePath = System.Web.HttpContext.Current.Server.MapPath(fileName) + "//" + "chart_" + System.DateTime.Now.ToShortDateString() + ".Gif";
image.Save(filePath, ImageFormat.Gif);
image.Dispose();
g.Dispose();
string ImageSrc = "";
if (fileName == ".")
{
ImageSrc = "chart_" + System.DateTime.Now.ToShortDateString() + ".Gif";
}
else
{
ImageSrc = fileName + "/" + "chart_" + System.DateTime.Now.ToShortDateString() + ".Gif";
}
return ImageSrc;
}
catch { return null; }
}
}
}
脚本:
var Drag = {
divDrag:null,
init:function(divDrag){
divDrag.onmousedown = this.start;
},
start:function(e){
var divDrag;
e = Drag.fixEvent(e);
e.preventDefault && e.preventDefault();
Drag.divDrag = divDrag = this;
divDrag.x = e.clientX - Drag.divDrag.offsetLeft;
divDrag.y = e.clientY - Drag.divDrag.offsetTop;
document.onmousemove = Drag.move;
document.onmouseup = Drag.end;
},
move:function(e){
e = Drag.fixEvent(e);
var oLeft,oTop;
oLeft = e.clientX - Drag.divDrag.x;
oTop = e.clientY - Drag.divDrag.y;
Drag.divDrag.style.left = oLeft + 'px';
Drag.divDrag.style.top = oTop + 'px';
},
end:function(e){
e = Drag.fixEvent(e);
Drag.divDrag = document.onmousemove = document.onmouseup = null;
},
fixEvent: function(e){
if (!e) {
e = window.event;
e.target = e.srcElement;
e.layerX = e.offsetX;
e.layerY = e.offsetY;
}
return e;
}
}