• 用javascript绘制点线数据

    图形学的东西，理论与实际有一定差异，我们实际代码中使用的float，精度会受影响，导致一些算法运算结果与理论有一定差异。而且浮点运算本身就要考虑误差，对误差的大小设置，也影响最终结果呈现。
    最近程序中，有个算法，根据输入的一组点，生成mesh，要求相邻的三个点不能共线，所以需要对这些点做预处理，把共线的点剔除掉。
    写了个算法，很简单，判断三个点是否共线，共线就剔除中间这个点，然后下移一个点，继续判断新的三个点。
    根据各种情况，写了很多测试数据，运行效果也很好，能正常剔除共线点。
    实际运行时，发现有的数据处理后正常，有的数据就离谱了。
    每组点数据多少不一样，几十个到几千个点，打印出来，也很难看出问题。所以要把处理前后的数据做可视化处理。
    代码是C++的，在处理完后，把点数据分别写到两个文件里：

    1.                     if (origin_points.size()<100)
    2.                     {
    3.                         static int fid = 0;
    4.                         std::string fn  = "D:/ring_" + std::to_string(fid) + ".txt";
    5.                         std::string fn2 = "D:/ring_2_" + std::to_string(fid) + ".txt";
    6.                         
    7.                         recodeData(fn, "origin_points", origin_points);
    8.                         recodeData(fn2, "new_origin_points", new_origin_points);
    9.                         ++fid;
    10.                     }

    判断数据量大小，是为了减少数据输出，先看看比较简单的。
    recodeData使用了boost的json处理类：

    1. #include <fstream>
    2. #include <string>
    3. #include <boost/property_tree/ptree.hpp>
    4. #include <boost/property_tree/json_parser.hpp>
    5.  
    6. void recodeData(const std::string &fn, const std::string type, const std::vector<glm::vec3> &point_list)
    7. {
    8.     std::ofstream ofs;
    9.     ofs.open(fn, std::ios::out);
    10.  
    11.     boost::property_tree::ptree root;
    12.     root.put("type", type);
    13.     root.put("count", point_list.size());
    14.     boost::property_tree::ptree json_point_list;
    15.  
    16.     for (auto &point : point_list)
    17.     {
    18.         boost::property_tree::ptree xy;
    19.         boost::property_tree::ptree x, y;
    20.         x.put("", std::to_string(point.x));
    21.         y.put("", std::to_string(point.y));
    22.         xy.push_back(std::make_pair("", x));
    23.         xy.push_back(std::make_pair("", y));
    24.         json_point_list.push_back(std::make_pair("", xy));
    25.     }
    26.     root.add_child("point_list", json_point_list);
    27.     std::stringstream ss;
    28.     boost::property_tree::write_json(ss, root);
    29.     std::string jsonString = ss.str();
    30.     ofs << jsonString << std::endl;
    31.     ofs.close();
    32. }

    生成的ring_*.txt和ring_2_*.txt是对应的处理前数据和处理后数据，都是json文件，里面的point_list就是点数组，点是二维的，一个点有x、y值组成。
    然后写一个html文件，用于把两个文件读入显示。

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5. 	<meta charset="UTF-8">
    6. 	<title>test</title>
    7. 	<style>
    8. 		.one,
    9. 		.two {
    10. 			width: 50%;
    11. 			border: 1px solid #ccc;
    12. 			float: left;
    13. 			box-sizing: border-box;
    14. 		}
    15. 	</style>
    16. </head>
    17.  
    18. <body>
    19. 	<div class="one">
    20. 		<canvas height="720" width="720" id="my_canvas_1"> </canvas>
    21. 		<br />
    22. 		<input id="input_1" type="file" name="input_1_file" value="上传文件1" onchange="drawPloyon1(this)" />
    23. 	</div>
    24. 	<div class="two">
    25. 		<canvas height="720" width="720" id="my_canvas_2"> </canvas>
    26. 		<br />
    27. 		<input id="input_2" type="file" name="input_2_file" value="上传文件2" onchange="drawPloyon2(this)" />
    28. 	</div>
    29. </body>
    30.  
    31.  
    32. <script>
    33. 	var canvas_1 = document.getElementById('my_canvas_1');
    34. 	var canvas_2 = document.getElementById('my_canvas_2');
    35. 	drawFrame(canvas_1, "red");
    36. 	drawFrame(canvas_2, "blue");
    37.  
    38. 	function drawPoint(ctx, x, y) {
    39. 		ctx.moveTo(x - 5, y - 5);
    40. 		ctx.lineTo(x + 5, y - 5);
    41. 		ctx.lineTo(x + 5, y + 5);
    42. 		ctx.lineTo(x - 5, y + 5);
    43. 		ctx.lineTo(x - 5, y - 5);
    44. 		ctx.lineTo(x + 5, y + 5);
    45. 		ctx.moveTo(x - 5, y + 5);
    46. 		ctx.lineTo(x + 5, y - 5);
    47. 		ctx.moveTo(x, y);
    48. 	}
    49.  
    50. 	function drawFrame(mycanvas, color) {
    51. 		var w = mycanvas.width;
    52. 		var h = mycanvas.height;
    53. 		var ctx = mycanvas.getContext('2d');
    54. 		ctx.strokeStyle = color;
    55. 		ctx.beginPath();
    56. 		ctx.moveTo(0, 0);
    57. 		ctx.lineTo(w - 1, 0);
    58. 		ctx.lineTo(w - 1, h - 1);
    59. 		ctx.lineTo(0, h - 1);
    60. 		ctx.lineTo(0, 0);
    61. 		ctx.closePath();
    62. 		ctx.stroke();
    63. 	}
    64. 	function drawLine(json_str, my_canvas) {
    65. 		var ctx = my_canvas.getContext('2d');
    66. 		ctx.strokeStyle = "green";
    67. 		ctx.beginPath();
    68.  
    69. 		var x0, y0;
    70. 		var obj_json = JSON.parse(json_str);
    71. 		var point_list = obj_json.point_list;
    72. 		var x_max = -Number.MAX_VALUE;
    73. 		var x_min = Number.MAX_VALUE;
    74. 		var y_max = -Number.MAX_VALUE;
    75. 		var y_min = Number.MAX_VALUE;
    76. 		for (var i = 0; i < point_list.length; i++) {
    77. 			var xy = point_list[i];
    78. 			var x = Number(xy[0]);
    79. 			var y = Number(xy[1]);
    80. 			if (x_min > x) x_min = x;
    81. 			if (x_max < x) x_max = x;
    82. 			if (y_min > y) y_min = y;
    83. 			if (y_max < y) y_max = y;
    84. 		}
    85. 		var x_len = x_max - x_min;
    86. 		var y_len = y_max - y_min;
    87. 		var ppl;
    88. 		if (x_len > y_len) {
    89. 			ppl = my_canvas.width / x_len;
    90. 		}
    91. 		else {
    92. 			ppl = my_canvas.height / y_len;
    93. 		}
    94. 		for (var i = 0; i < point_list.length; i++) {
    95. 			var xy = point_list[i];
    96. 			var x = Number(xy[0]);
    97. 			var y = Number(xy[1]);
    98. 			console.log("x:" + x + ",y:" + y);
    99. 			x = (x - x_min) * ppl;
    100. 			y = (y - y_min) * ppl;
    101. 			if (i != 0)
    102. 				ctx.lineTo(x, y);
    103. 			else {
    104. 				x0 = x;
    105. 				y0 = y;
    106. 				ctx.moveTo(x, y);
    107. 			}
    108. 			ctx.stroke();
    109. 			drawPoint(ctx, x, y);
    110. 		}
    111. 		//ctx.lineTo(x0, y0);
    112. 		ctx.moveTo(x0, y0);
    113.  
    114. 		ctx.lineTo(x0 + 10, y0);
    115. 		ctx.lineTo(x0 - 10, y0);
    116. 		ctx.lineTo(x0, y0);
    117. 		ctx.lineTo(x0, y0 + 10);
    118. 		ctx.lineTo(x0, y0 - 10);
    119.  
    120. 		ctx.closePath();
    121. 		ctx.stroke();
    122. 	}
    123.  
    124. 	function drawPloyon1(source) {
    125. 		var input = source;
    126. 		var reader = new FileReader();
    127. 		reader.readAsText(input.files[0]);
    128. 		reader.onload = function () {
    129. 			if (reader.result) {
    130. 				//显示文件内容
    131. 				temp_str = reader.result;
    132. 				var w = canvas_1.width;
    133. 				var h = canvas_1.height;
    134. 				canvas_1.getContext('2d').clearRect(0, 0, w, h);
    135. 				drawLine(temp_str, canvas_1);
    136. 			}
    137. 		};
    138. 	}
    139. 	function drawPloyon2(source) {
    140. 		var input = source;
    141. 		var reader = new FileReader();
    142. 		reader.readAsText(input.files[0]);
    143. 		reader.onload = function () {
    144. 			if (reader.result) {
    145. 				//显示文件内容
    146. 				temp_str = reader.result;
    147. 				var w = canvas_2.width;
    148. 				var h = canvas_2.height;
    149. 				canvas_2.getContext('2d').clearRect(0, 0, w, h);
    150. 				drawLine(temp_str, canvas_2);
    151. 			}
    152. 		};
    153. 	}
    154.  
    155.  
    156.  
    157. </script>
    158.  
    159. </html>

    运行后：

    通过对比，找到比较离谱的数据，再去分析改进算法。
    可以看到javascript还是很方便的，一百多行就可以读取文件绘制曲线。

  • 相关阅读:
    学生个人网页模板 学生个人网页设计作品 简单个人主页成品 个人网页制作 HTML学生个人网站作业设计代做
    【金融项目】尚融宝项目（十五）
    前端try和catch
    OpenHarmony SystemUI开发记录
    2.2 在 Linux 上安装 MySQL Shell
    教你几招，轻松实现视频转音频
    【Linux】Linux终端执行docker内部shell脚本
    淘宝/天猫获得淘宝商品详情（关键词搜索，店铺所有商品）API接口返回值说明
    Spring Cloud Tencent 迎来 1.7.0 大版本更新，欢迎体验
    Notes中的进度条
  • 原文地址：https://blog.csdn.net/caz28/article/details/125519156