Steven-nagisa-Y / Canvas-drawing

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

通过HTML/JS画图

Github链接:Github

1.文件简介

  • !安装服务端.cmd:用于安装本地服务端环境;

  • 运行服务端.cmd:已经有node.js环境,或者安装了上一步的环境之后,需要绘图请运行;

  • Cn.json:用于输出Cn数据,请勿手动修改;

  • drawpoints.json:示例图像的点集;

  • index.html:展示图像的主页面;

  • main.c:用于把点的坐标通过傅里叶变换,转换为Cn;

  • main.exe:在Windows 10 x64环境编译好的main.c,输入为point.txt,输出为Cn.json;

  • main.js:在网页画图的主要JavaScript脚本,输入为Cn.json;

  • old.main.js:老版本的JavaScript脚本,能够获得任意绘图像的点集合(需要通过控制台);

  • node.msi:Windows 10 x64平台的Node.js安装包,若是其他平台,请前往官网下载

  • package.json:npm 包的描述文件,勿管;

  • point.txt:输入的点的坐标,范围[0, 500]​格式为:

    x1 y1 x2 y2 x3 y3 ...

  • server.js:通过node.js实现的本地服务器,用法:node server.js,退出请按 ctrl - c;

2.使用

1-安装本地服务环境

如果你直接用浏览器打开index.html能够正常显示图像,请跳到第三步。

新版浏览器禁止了页面在本地读取数据,所以只有采用在本地运行一个服务端来显示网页。

Windows 10 x64可直接双击运行!安装服务端.cmd,按照步骤安装即可。

安装一次后无需再次安装。

2-运行本地服务端

第二次运行可以在本目录下运行:运行服务端.cmd,然后通过浏览器打开:http://localhost:4040

3-输入点集

在point.txt中输入点坐标集合,范围是[0, 500]​,格式为x1 y1 x2 y2 x3 y3 ...

记住坐标的个数,一组 x1 y1 算一个点

4-通过傅里叶变换获得Cn

Windows 10 x64可直接运行:main.exe

输入的第一个数据为:上述点集的个数;

输入第二个数据为:拟合圈的个数,建议范围:[20, 1000],过大浏览器绘图卡顿。

5-查看图像

在老版本的浏览器中可以直接运行:index.html查看图像;

新版浏览器请保证已进行第一、第二步骤,在控制台看到:Server running at http://localhost:4040,之后,访问 http://localhost:4040 即可查看绘图。

6-退出

关闭全部窗口即可退出。

3-开源协议

采用Apache License 2.0开源协议。

About


Languages

Language:JavaScript 73.8%Language:C 15.9%Language:HTML 6.5%Language:Batchfile 2.0%Language:CSS 1.8%