Aspx网页画图

来源：互联网发布：gifcam mac版下载编辑：程序博客网时间：2024/05/19 06:51

在网页上画图一般会有下面两种方法（暂时不知道是否还有其他方法）
方法一：用纯代码画图
方法二：Office控件画图

先讲下用C#纯代码画图
这里我以C#画函数图为例

其实纯代码画函数图非常简单，先了解下怎么在网页上画线·就会在网页上画图了

所以就先说下如何在网页上画线了

我直接把代码列出来··其实我本人就是喜欢给我个完整的有注释的例子我自己运行就可以慢慢理解了后面都完整的代码下载

WebPaintPic.aspx Html代码

不需要有改变

WebPaintPic.aspx.cs 代码如下：

using System;

using System.Data;

using System.Configuration;

using System.Collections;

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.IO;//文件存取

using System.Drawing;//画图基本功能

using System.Drawing.Drawing2D;//二维画图

using System.Drawing.Imaging;//高级功能

public partial class System_WebPaintPic : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

Bitmap img = new Bitmap(400, 200);//创建Bitmap对象

MemoryStream stream = draw();

img.Save(stream, ImageFormat.Jpeg); //保存绘制的图片

Response.Clear();

Response.ContentType = "image/jpeg";

Response.BinaryWrite(stream.ToArray());

}

public MemoryStream draw()

{

Bitmap img = new Bitmap(400, 200);//创建Bitmap对象

Graphics g = Graphics.FromImage(img);//创建Graphics对象

Pen Bp = new Pen(Color.Black); //定义黑色画笔

Pen Rp = new Pen(Color.Red);//红色画笔

Pen Sp = new Pen(Color.Blue);//蓝色

AdjustableArrowCap aac; //定义箭头帽

aac = new System.Drawing.Drawing2D.AdjustableArrowCap(4, 4);

Sp.CustomStartCap = aac; //开始端箭头帽

//Sp.CustomEndCap = aac;

Font Bfont = new Font("Arial", 12, FontStyle.Bold);//大标题字体

Font font = new Font("Arial", 6);//一般字

Font Tfont = new Font("Arial", 9);//较大字体

g.DrawRectangle(new Pen(Color.White, 400), 0, 0, img.Width, img.Height); //矩形底色

//黑色过度型笔刷

LinearGradientBrush brush = new LinearGradientBrush(new Rectangle(0, 0, img.Width, img.Height), Color.Black, Color.Black, 1.2F, true);

//蓝色过度型笔刷

LinearGradientBrush Bluebrush = new LinearGradientBrush(new Rectangle(0, 0, img.Width, img.Height), Color.Blue, Color.Blue, 1.2F, true);

//g.DrawString("我的实验",Bfont,brush,40,5); //绘制大标题

g.DrawRectangle(Bp, 0, 0, img.Width - 100, img.Height - 40); //绘制矩形与上面的矩形即是边框

g.DrawLine(Sp, 20, 10, 20, 150);//数坐标

g.DrawLine(Sp, 280, 150, 20, 150);//横坐标

g.DrawString("5", font, brush, 58, 151); //横坐标数字

g.DrawString("10", font, brush, 98, 151);

g.DrawString("15", font, brush, 138, 151);

g.DrawString("20", font, brush, 178, 151);

g.DrawString("0.5", font, brush, 5, 108); //数坐标数字

g.DrawString("1", font, brush, 5, 68);

g.DrawString("1.5", font, brush, 5, 28);

g.DrawLine(Bp, 60, 145, 60, 150); //

g.DrawLine(Bp, 100, 145, 100, 150);

g.DrawLine(Bp, 140, 145, 140, 150);

g.DrawLine(Bp, 180, 145, 180, 150);

g.DrawLine(Bp, 220, 145, 220, 150);

g.DrawLine(Bp, 25, 110, 20, 110);

g.DrawLine(Bp, 25, 70, 20, 70);

g.DrawLine(Bp, 25, 30, 20, 30);

//画函数曲线这样以 y=0.003*x^1.8 为例用穷举函数曲线中的两点画曲线

//画0-0.1-0.2 以+0.1到=20个点

for (double i = 0; i <= 20; )

{

double Write11 = (20 + 8 * i);

double Write12 = 150 - 80 * (0.003 * Math.Pow(i, 1.8));

double Write21 = (20 + 8 * (i + 0.1));

double Write22 = 150 - 80 * (0.003 * Math.Pow(i + 0.1, 1.8));

g.DrawLine(Bp, (float)Write11, (float)Write12, (float)Write21, (float)Write22);

i = i + 0.1;

}

MemoryStream stream = new MemoryStream(); //保存绘制的图片

img.Save(stream, ImageFormat.Jpeg); //保存绘制的图片

return stream;

}

用纯代码画图就完成了·

下面是用OFFICE的一个组件画图的方法个人认为还是用组件画图的方法来的比较简单

上面的图片是画在网页上面的如何让它在Image的控件里显示呢这个Very easy 你把那整个页面当成个图片就OK了 ·方便图片定位

例：<img src="WebPaintPic.aspx" />

前面已经介绍了用C# 纯代码的方式画图 ..下面来看看用office组件画图，用Micosoft Office Web Components 组件要确保服务器要装微软office2000或以上，客户端用户也要装Office2000或以上才能使用

本例假设你已经装上了Office

首先打开 VS2005（建议不要用其他的编译器）在项目里添加引用（具体怎么添加见Google）在Com 选择项里选择 Microsoft Office Web Comonents 11.0 确定此时项目会自动添加Bin文件夹包含以下几个文件

OfficeWebToPaint.aspx Html

代码只要拖入个 <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>

容器控件即可

OfficeWebToPaint.aspx.cs 代码：

using System;
using System.Data;
using System.Configuration;
using System.Collections;
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 OWC11;//画图必须

public partial class System_OfficePaintTest : System.Web.UI.Page
...{
    protected void Page_Load(object sender, EventArgs e)
    ...{
        //创建ChartSpace对象来放置图表  图形容器对象
        ChartSpace laySpace = new ChartSpaceClass();

        //在ChartSpace对象中添加图表    图像图像
        ChChart InsertChart = laySpace.Charts.Add(0);

        //指定绘制图表的类型。类型可以通过OWC.ChartChartTypeEnum枚举值得到
        //InsertChart.Type = ChartChartTypeEnum.chChartTypeLine;//折线图
        //InsertChart.Type = ChartChartTypeEnum.chChartTypeArea;//面积图
        //InsertChart.Type = ChartChartTypeEnum.chChartTypeBarClustered;//条形图
        InsertChart.Type = ChartChartTypeEnum.chChartTypeColumnClustered;//柱形图
        //InsertChart.Border.Color = "White";//图像的边框颜色

        //指定图表是否需要图例标注
        InsertChart.HasLegend = true;
        InsertChart.Legend.Font.Size = 10;//字体
        InsertChart.Legend.Position = ChartLegendPositionEnum.chLegendPositionRight;//图例标注的位置

        //图表的标题
        InsertChart.HasTitle = true;//为图表添加标题
        InsertChart.Title.Caption = "开关管温度";//设置标的内容
        InsertChart.Title.Font.Size = 15;//设置标题字体大小
        InsertChart.Title.Font.Bold = true;//是否加粗

        //为x,y轴添加图示说明
        InsertChart.Axes[0].HasTitle = true;
        InsertChart.Axes[0].Title.Caption = "";//月份

        InsertChart.Axes[1].HasTitle = true;
        InsertChart.Axes[1].Scaling.SplitMinimum = 200;
        InsertChart.Axes[1].Title.Caption = "T 温度";

        //添加一个series系列
        InsertChart.SeriesCollection.Add(0);

        //给定series系列的名字
        InsertChart.SeriesCollection[0].SetData(ChartDimensionsEnum.chDimSeriesNames, +(int)ChartSpecialDataSourcesEnum.chDataLiteral, "计算节温");//文字也是标注的文字

        //给定分类的值
        InsertChart.SeriesCollection[0].SetData(ChartDimensionsEnum.chDimCategories, +(int)ChartSpecialDataSourcesEnum.chDataLiteral, "第一个开关管第二个开关管第三个开关管");
        //给定值的值
        InsertChart.SeriesCollection[0].SetData(ChartDimensionsEnum.chDimValues, (int)ChartSpecialDataSourcesEnum.chDataLiteral, "100 70 48 55 44");
        //输出文件.

        //给定series系列的名字
        InsertChart.SeriesCollection.Add(1);
        InsertChart.SeriesCollection[1].SetData(ChartDimensionsEnum.chDimSeriesNames, +(int)ChartSpecialDataSourcesEnum.chDataLiteral, "最高允许节温");//文字也是标注的文字

        //给定分类的值
        InsertChart.SeriesCollection[1].SetData(ChartDimensionsEnum.chDimCategories, +(int)ChartSpecialDataSourcesEnum.chDataLiteral, "第一个开关管第二个开关管第三个开关管");
        //给定值的值
        InsertChart.SeriesCollection[1].SetData(ChartDimensionsEnum.chDimValues, (int)ChartSpecialDataSourcesEnum.chDataLiteral, "33 55 33 22 88");
        //输出文件.

        string strAbsolutePath = (Server.MapPath(".")) + "\ShowData.gif";

        laySpace.ExportPicture(strAbsolutePath, "GIF", 800, 350);

        //创建GIF文件的相对路径.
        string strRelativePath = "./ShowData.gif";

        //把图片添加到placeholder中，并在页面上显示
        string strImageTag = "<IMG SRC='" + strRelativePath + "'/>";
        this.PlaceHolder1.Controls.Add(new LiteralControl(strImageTag));

    }
}

以上代码经测试都可以运行

一般在网页上画图·就是用上面两种方法：

0 0