quadrant

body {

padding: 0;

margin: 0;

background-color: #333;

}

input {

border: solid 0px #DDD;

border-radius: 5px;

padding: 5px 10px;

}

button {

border: solid 0px #CCC;

border-radius: 5px;

background-color: #FFF;

padding: 5px 10px;

}

#quadrant {

background-color: #CCC;

width: 640px;

height: 640px;

margin: 50px auto 0 auto;

}

var defaultColor = '#333';

var $quadrant = $('#quadrant');

var $canvas = $quadrant.find('canvas');

$quadrant.css('margin-top', ($(window).height() - $canvas.height()) / 2);

var ctx = $canvas.get(0).getContext("2d");

// 绘制线条

function drawLine(ctx, config) {

if(ctx && config && config.x0 && config.y0 && config.x1 && config.y1) {

// 默认线条颜色为灰色

var color = config.color;

if(typeof(color) === 'undefined' || color.length <= 0) {

color = defaultColor;

}

ctx.strokeStyle = color;

// 绘制线条

var x0 = config.x0,

y0 = config.y0,

x1 = config.x1,

y1 = config.y1;

ctx.moveTo(x0, y0);

ctx.lineTo(x1, y1);

ctx.stroke();

}

}

// 绘制点

function drawPoint(ctx, config) {

if(ctx && config && config.x && config.y) {

config.x0 = config.x - 1;

config.y0 = config.y - 1;

config.x1 = config.x;

config.y1 = config.y;

drawLine(ctx, config);

}

}

// 绘制尖角

function drawAngle(ctx, config) {

var size = config.size ? config.size : 5;

var top = config.top;

var left = config.left;

var mode = config.mode ? config.mode : 1;

var color = config.color ? config.color : ''

if(size && top && left && mode) {

if(mode > 4 || mode 

mode = 1;

}

var line1Config = {}, line2Config = {};

line1Config.x0 = line2Config.x0 = left;

line1Config.y0 = line2Config.y0 = top;

switch(mode) {

case 1:// 开口向左

line1Config.x1 = left - size;

line1Config.y1 = top + size;

line2Config.x1 = left - size;

line2Config.y1 = top - size;

break;

case 2:// 开口向上

line1Config.x1 = left - size;

line1Config.y1 = top - size;

line2Config.x1 = left + size;

line2Config.y1 = top - size;

break;

case 3:// 开口向右

line1Config.x1 = left + size;

line1Config.y1 = top + size;

line2Config.x1 = left + size;

line2Config.y1 = top - size;

break;

case 4:// 开口向下

line1Config.x1 = left - size;

line1Config.y1 = top + size;

line2Config.x1 = left + size;

line2Config.y1 = top + size;

break;

}

drawLine(ctx, line1Config);

drawLine(ctx, line2Config);

}

}

// 创建坐标系

var cWidth = $canvas.get(0).width;

var cHeight = $canvas.get(0).height;

var qPadding = 50;

var qWidth = cWidth - qPadding * 2;

var qHeight = cHeight - qPadding * 2;

function createQuadrant(ctx) {

// 绘制x轴

var xLine = {

x0: qPadding,

y0: qPadding + qHeight / 2,

x1: qPadding + qWidth,

y1: qPadding + qHeight / 2

};

drawLine(ctx, xLine);

drawAngle(ctx, {top: xLine.y1, left: xLine.x1, model: 1});

// 绘制y轴

var yLine = {

x0: qPadding + qWidth / 2,

y0: qPadding,

x1: qPadding + qWidth / 2,

y1: qPadding + qHeight

};

drawLine(ctx, yLine);

drawAngle(ctx, {top: yLine.y0, left: yLine.x0, mode: 4});

}

createQuadrant(ctx);

// 绘制函数图像

function drawFunction(ctx, func) {

// 绘制坐标系中的点

function drawQuadrantPoint(x, y) {

// 换算坐标系与画布中的点

var cX = qPadding + qWidth / 2 + x;// canvas x

if(cX > cWidth - qPadding) {

cX = cWidth - qPadding;

}

if(cX 

cx = qPadding;

}

var cY = qPadding + qHeight / 2 - y;

if(cY > cHeight - qPadding) {

cY = cHeight - qPadding;

}

if(cY 

cY = qPadding;

}

drawPoint(ctx, {'x': cX, 'y': cY});

}

// 计算坐标系的最大最小值

var minX = qWidth / -2, maxX = qWidth / 2;

for(var i=minX; i<=maxX; i++) {

var y = func(i);

drawQuadrantPoint(i, y);

}

}

// 清空坐标系

function resetQuadrant(ctx) {

ctx.beginPath();

ctx.clearRect(0, 0, cWidth, cHeight);

createQuadrant(ctx);

}

$(function() {

var $func = $('input[name="func"]').val('Math.tan(x)');

$('#draw').on('click', function(event) {

resetQuadrant(ctx);

var funcStr = $func.val();

drawFunction(ctx, function(x) {

return eval(funcStr);

});

}).click();

$('#reset').on('click', function(event) {

resetQuadrant(ctx);

});

});

本文为测试canvas的基本API，并实现了绘制平面直角坐标系及函数线条功能，但因目前画布像素仅为640*640，绘制效果较差，不能够投入实际使用。

用Flash与C语言制作工程实时数据动态曲线图

宋国志songguozhi1234@163.com

本文旨在说明如何利用Flash和C语言制作BS模式下的实时数据动态曲线图，现在流行的实时数据曲线图，大都是采用了CS模式的开发语言，BS模式的虽有一些实例，比如google上的股市曲线图，但其实现的方式和流程在网上很少能见到。

其运行时的界面如下，数据实时更新，曲线图从左往右动态移动：

下面先讲在实现过程中的工作环境以及开发工具进行简单的介绍：

1.Macromedia Flash Professional 8；

2.Macromedia Dreamweaver 8;

3.标准C；

4.操作系统：Windows，主要用来制作Flash和网页；

5.操作系统：Linux，用作网站的服务器，安装apache；

6.apache软件。

假设以上的环境都已经安装完毕，并经测试运行正常，下面就逐步的介绍开发过程：

一．在制作此例前，我假设您已了解以下Flash知识点：

1.使用this.createEmptyMovieClip动态创建MovieClip；

2.使用AS绘制线条或矩形；

3.对Flash中“深度”的理解；

4.使用this.createTextField动态创建文本框

二．正式开始

1.创建一个空白文档，有两个层：

看上图，两个层：

A．script：放置一些脚本；

B．坐标曲线： 放置一个MovieClip，即生成的曲线；

2.按Ctrl+F8新建一个影片剪辑(MovieClip)，里面放置一个动态文本框，实例名称为：tips，如下图：

3.返回场景，将刚才制作的mc坐库中托至场景(放在可视区域外)，并且命名为：mouse_mc，如图：

4.按Ctrl+F8新建一个影片剪辑(MovieClip)：坐标曲线，有三个层:，如下图：

A.script：放置一些脚本；

B.文字：放置x,y轴的说明文字；

C.xy轴： 放置x,y坐标轴；

5.在影片剪辑“坐标曲线”的“xy轴”层上画x,y坐标线：

这步就是注意坐标轴的中心点，画在影片剪辑的注册点上，即_x=0,_y=0处；

6.在坐标轴附近，创建二个动态文本框，分别指定变量名为：name_x，name_y，如下图：

这二个文本框用来显示坐标轴的说明文字；

7.接着在的“script”层的第一帧，加入如下代码：

//载入实时数据的对象

newFollow=new LoadVars();

//x,y轴的名称

name_x = "Time(S)";

name_y = "Data";

//x轴刻度总长

var xtotal:Number=120;

//y轴刻度总长

var ytotal:Number=100;

//存放曲线上点的数组

var point_arr:Array=new Array();

//曲线上点的个数，最大为120(表示2分钟)

var numPoints:Number;

numPoints=0;

//x轴单位刻度的像素数

var xspace = Math.floor(360/xtotal);

//y轴单位刻度的像素数

var yspace = Math.floor(200/ytotal);

//画X轴刻度

DrawScalX(xtotal);

//画Y轴刻度

DrawScalY(ytotal);

//画X轴刻度

function DrawScalX(total:Number) {

createEmptyMovieClip("scalX_mc", 1);

scalX_mc.lineStyle(1, 0x6699CC, 80);

var i:Number;

for (i=1; i

if (i%10 == 0) {

scalX_mc.lineStyle(1, 0x6699CC, 70);

scalX_mc.moveTo(xspace*i, 0);

scalX_mc.lineTo(xspace*i, -6);

CreateText(i, xspace*i-14-5*xspace+15, 5);

} else {

scalX_mc.lineStyle(1, 0x6699CC, 30);

scalX_mc.moveTo(xspace*i, 0);

scalX_mc.lineTo(xspace*i, -4);

}

}

}

function DrawScalY(total:Number) {

createEmptyMovieClip("scalY_mc", 2);

var i:Number;

for (i=1; i

if (i%10 == 5) {

scalY_mc.lineStyle(1, 0x6699CC, 50);

scalY_mc.moveTo(0, 0-(yspace*i));

scalY_mc.lineTo(7, 0-(yspace*i));

} else if (i%10 == 0) {

scalY_mc.lineStyle(1, 0x6699CC, 80);

scalY_mc.moveTo(0, 0-(yspace*i));

scalY_mc.lineTo(8, 0-(yspace*i));

CreateText(i, -30, 0-(yspace*i)-9);

} else {

scalY_mc.lineStyle(1, 0x6699CC, 30);

scalY_mc.moveTo(0, 0-(yspace*i));

scalY_mc.lineTo(4, 0-(yspace*i));

}

}

}

//建立x,y轴的坐标文本

function CreateText(txt:Number, X:Number, Y:Number) {

var my_txt = createTextField("my_txt"+txt, Math.floor(Math.random()*100000), X, Y, 30, 30);

my_txt.multiline = false;

my_txt.wordWrap = true;

my_txt.selectable = false;

var my_fmt:TextFormat = new TextFormat();

my_fmt.color = 0x999999;

my_fmt.align = "center";

my_txt.text = txt;

my_txt.setTextFormat(my_fmt);

}

//画曲线

function DrawLine() {

createEmptyMovieClip("curve_mc", 3);

//曲线填充色

curve_mc.beginFill(0xFFFFCC, 50);

//曲线颜色

curve_mc.lineStyle(1, 0xFF6600, 100);

curve_mc.moveTo(0, 0);

for (var i = 0; i

curve_mc.lineTo(i*xspace, 0-point_arr[i]*yspace);

DrawCircle((i), 0-(point_arr[i]));

}

curve_mc.lineTo(((point_arr.length-1)*xspace), 0);

curve_mc.lineStyle(1, 0x000000, 0);

curve_mc.lineTo(0, 0);

curve_mc.endFill();

if (point_arr[0])

_root.cnp="即时数据："+point_arr[0]+" P/S";

}

//构造曲线上点的数组

function display() {

//曲线上新点的y轴坐标值

var str:String;

var i:Number;

newFollow.load("/cgi-bin/getdata.cgi?nocahe="+getTimer());

newFollow.onLoad=function(){

str=newFollow.new_point;

for (i=numPoints; i>0; i--) {

point_arr[i]=point_arr[i-1];

}

if (numPoints<120)

numPoints++;

point_arr[0]=str;

}

//画曲线

DrawLine();

}

setInterval(display,1000);

stop();

8.返回场景，在场景的第一帧加入如下代码：

//让鼠标提示内容的宽度根据内容的多少自动调整

mouse_mc.tips.autoSize = true;

//页面的编码方式

System.useCodepage = true;

9.将库中的“坐标曲线”影片剪辑拖至场景中，命名为：mc，如下图：

10.参数说明：

//载入实时数据的对象

newFollow=new LoadVars();

//x,y轴的名称

name_x = "Time(S)";

name_y = "Data";

//x轴刻度总长

var xtotal:Number=120;

//y轴刻度总长

var ytotal:Number=100;

//存放曲线上点的数组

var point_arr:Array=new Array();

//曲线上点的个数，最大为120(表示2分钟)

var numPoints:Number;

numPoints=0;

11.制作Flash影片

导出影片并保存为Real-Time_curve.swf，制作一个网页，将该影片插入到网页中，保存网页为Real-Time_curve.html，然后将该网页和Flash影片一起上传到apache服务器的htdocs目录中。但记得要修改这两个文件的权限，否则在测试的时候会出现无权访问的错误。

三．制作实时数据源

在Linux下编写一个模拟实时数据产生器，其代码如下：

#include

int main(void)

{

srand((int)time(0));

printf("Content-type: text/html/n/n");

printf("new_point=%d", rand()%101);

return 0;

}

将代码保存为getdata.c，并将编译后的可执行文件命名为getdata。将可执行的getdata保存到apache服务器的cgi-bin目录中。

在上面的代码中，值得注意的是两个printf语句。第一个printf语句是cgi编程的规范，在这里我不做阐述，可以查阅相关资料做进一步的理解，而第二个printf语句实际上与前面介绍的Flash中的newFollow.load("/cgi-bin/getdata.cgi?nocahe="+getTimer())构成了一个实时数据的通信接口。

四．问题讨论

1.保证数据的实时刷新。在IE浏览器中可能由于缓存的原因而导致Flash无法实时动态的显示，因此在Flash中必须使浏览器每次都从服务器上去读取数据，而不会使用本地的缓存，因此在Flash中调用实时数据源时加上了参数nochae=getTimer()，由于getTimer()在每次调用的时候的值不同，使浏览器认为是调用一个新的程序，这样保证数据的有效性和实时性。

2.动态曲线的刷新频率。setInterval(display,1000)使浏览器每隔一秒钟就调用一次display()函数，重新获取一次数据，然后绘制新的曲线。

3.曲线上点的值保存在一维数组point_arr中，使用该一维数组可以同时体现出曲线上坐标点的位置，数组元素的下标值即为曲线的X坐标值，该下标所对应的数组元素值就为曲线的Y坐标值。由于曲线上总共可以显示120个点的值，也即是2分钟的数据，因此数组的长度也设置为120，2分钟之前的元素没有采用溢出，而是采用的覆盖的方式，这样对系统来说也安全，以免造成内存问题。

4.当然，曲线图的X/Y轴的名称以及轴上的刻度大小都是可以通过html或者其他语言在调用Flash影片时作为参数传递给Flash。

作者：宋国志

2008年9月5日

全程代码小编就在这里发出来了哈，最终的效果图，

// c语言+图形编程 电脑时钟

//包含头文件

#include

#include

#include

void Draw_Dial();//绘制静态的表盘

void Draw_Hand(int hour, int minute, int secend); //绘制表针

//主函数

int main()

{

initgraph(640, 480);//初始化一个图形界面 640*480

//circle(320,240,150);//画圆的函数

//rectangle(0, 0, 50, 50);//画正方体的函数

Draw_Dial();

setwritemode(R2_XORPEN);//设置XOR绘图模式

SYSTEMTIME time;//定义一个时间结构体 用来保存当前的时间

while (!_kbhit())

{

GetLocalTime(&time);//获取当前的时间

Draw_Hand(time.wHour,time.wMinute,time.wSecond); //把表针绘制出来

Sleep(1000);//间隔1秒 1000毫秒

Draw_Hand(time.wHour, time.wMinute, time.wSecond); //把表针绘制出来

}

closegraph();//关闭图形界面

return 0;

}

//绘制静态的表盘

void Draw_Dial()

{

//绘制边界

setcolor(GREEN);

circle(320, 240, 160);//画圆函数的参数 320 240坐标 160是圆的半径大小

circle(320, 240, 60);

circle(320, 240, 2);

//图形界面的输出文本信息 txt text 文字

outtextxy(260,420,L"GOOD GOOD STUDY");

outtextxy(283, 440, L"DAY DAY UP");

//line(0, 0, 639, 479);

//绘制刻度

//circle(320, 85, 2);

setcolor(WHITE);

int x, y;

for (int i = 0; i

{

x = 320 + int(145 * sin(PI * 2 * i / 60));

y = 240 + int(145 * cos(PI * 2 * i / 60));

if (i % 15 == 0)

bar(x - 5, y - 5, x + 5, y + 5);

else if (i % 5 == 0)

circle(x, y, 3);

else

putpixel(x, y, WHITE); //点

}

}

//绘制表针

void Draw_Hand(int hour, int minute, int second)

{

double h_hour, h_minute, h_second; //三个弧度值

int x_hour, y_hour, x_minute, y_minute, x_second, y_second; //末端位置

//计算弧度值

h_second = second * 2 * PI / 60;

h_minute = minute * 2 * PI / 60 + h_second / 60;

h_hour = hour * 2 * PI / 12 + h_minute / 12;

//计算末端位置

x_second = int(120 * sin(h_second)); y_second=int(120 * cos(h_second));

x_minute = int(100 * sin(h_minute)); y_minute = int(100 * cos(h_minute));

x_hour = int(70 * sin(h_hour)); y_hour = int(70 * cos(h_hour));

//绘制秒针

setlinestyle(PS_SOLID, 2); //PS_SOILD 实线 2像素 线条的粗细

setcolor(RED);

line(320 + x_second, 240 - y_second, 320 - x_second / 3, 240 + y_second / 3);

//绘制分针

setlinestyle(PS_SOLID, 6); //PS_SOILD 实线 2像素 线条的粗细

setcolor(YELLOW);

line(320 + x_minute, 240 - y_minute, 320 - x_minute / 5, 240 + y_minute/5);

//绘制时针

setlinestyle(PS_SOLID, 7); //PS_SOILD 实线 2像素 线条的粗细

setcolor(GREEN);

line(320 + x_hour, 240 - y_hour, 320 - x_hour / 5, 240 + y_hour/5);

}

演示一番 是不是？？？逼格不高，这只怕是最简易的一个时钟了吧。对了。注意一下！！！记得没安装图形库的，记得要去安装哟。。。。