[关闭]
@zsh-o 2019-09-08T19:54:06.000000Z 字数 5118 阅读 760

点关于直线的对称点


  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <script>
  5. class Vector2D {
  6. constructor (x, y) {
  7. this.x = x;
  8. this.y = y;
  9. }
  10. // add
  11. add_ (b) {
  12. this.x += b.x;
  13. this.y += b.y;
  14. return this;
  15. }
  16. add (b) {
  17. return Vector2D.Add(this, b);
  18. }
  19. add_scalar_ (s) {
  20. this.x += s;
  21. this.y += s;
  22. return this;
  23. }
  24. add_scalar (s) {
  25. return Vector2D.Add_Scalar(this, s);
  26. }
  27. // minus
  28. minus_ (b) {
  29. this.x -= b.x;
  30. this.y -= b.y;
  31. return this;
  32. }
  33. minus (b) {
  34. return Vector2D.Minus(this, b);
  35. }
  36. minus_scalar_ (s) {
  37. this.x -= s;
  38. this.y -= s;
  39. return this;
  40. }
  41. minus_scalar (s) {
  42. return Vector2D.Minus_scalar(this, s);
  43. }
  44. // mul
  45. mul(b) {
  46. return Vector2D.Mul(this, b);
  47. }
  48. mul_scalar_ (s) {
  49. this.x *= s;
  50. this.y *= s;
  51. return this;
  52. }
  53. mul_scalar (s) {
  54. return Vector2D.Mul_Scalar(this, s);
  55. }
  56. mul_mat_left (M) {
  57. return Vector2D.Mul_Mat_Left(this, M);
  58. }
  59. mul_mat_left_ (M) {
  60. var x = this.x * M.a + this.y * M.c;
  61. var y = this.x * M.b + this.y * M.d;
  62. this.x = x;
  63. this.y = y;
  64. return this;
  65. }
  66. // static method
  67. static Ones () {
  68. return new Vector2D (1, 1);
  69. }
  70. static Add (a, b) {
  71. return new Vector2D (a.x + b.x, a.y + b.y);
  72. }
  73. static Add_Scalar(a, s) {
  74. return new Vector2D (a.x + s, a.y + s);
  75. }
  76. static Minus (a, b) {
  77. return new Vector2D (a.x - b.x, a.y - b.y);
  78. }
  79. static Minus_Scalar (a, s) {
  80. return new Vector2D (a.x - s, a.y - s);
  81. }
  82. static Mul(a, b) {
  83. return a.x * b.x + a.y * b.y;
  84. }
  85. static Mul_Scalar (a, s) {
  86. return new Vector2D(a.x * s, a.y * s);
  87. }
  88. static Mul_Mat_Left (v, M) {
  89. return new Vector2D (v.x * M.a + v.y * M.c, v.x * M.b + v.y * M.d);
  90. }
  91. static Mul_Mat_Right (v, M) {
  92. return new Vector2D (M.a * v.x + M.b * v.y, M.c * v.x + M.d * v.y);
  93. }
  94. };
  95. class Matrix2x2 {
  96. /*
  97. a b
  98. c d
  99. */
  100. constructor (a, b, c, d) {
  101. this.a = a;
  102. this.b = b;
  103. this.c = c;
  104. this.d = d;
  105. }
  106. // add
  107. add_ (B) {
  108. this.a += B.a;
  109. this.b += B.b;
  110. this.c += B.c;
  111. this.d += B.d;
  112. return this;
  113. }
  114. add (B) {
  115. return Matrix2x2.Add(this, B);
  116. }
  117. add_scalar_ (s) {
  118. this.a += s;
  119. this.b += s;
  120. this.c += s;
  121. this.d += s;
  122. return this;
  123. }
  124. add_scalar (s) {
  125. return Matrix2x2.Add_Scalar(this, s)
  126. }
  127. // minus
  128. minus_ (B) {
  129. this.a -= B.a;
  130. this.b -= B.b;
  131. this.c -= B.c;
  132. this.d -= B.d;
  133. return this;
  134. }
  135. minus (B) {
  136. return Matrix2x2.Minus(this, B);
  137. }
  138. minus_scalar_ (s) {
  139. this.a -= s;
  140. this.b -= s;
  141. this.c -= s;
  142. this.d -= s;
  143. return this;
  144. }
  145. minus_scalar (s) {
  146. return Matrix2x2.Minus_scalar(this, s)
  147. }
  148. // mul
  149. mul(B) {
  150. return Matrix2x2.Mul(this, B);
  151. }
  152. mul_(B) {
  153. var a = this.a * B.a + this.b * B.c;
  154. var b = this.a * B.b + this.b * B.d;
  155. var c = this.c * B.a + this.d * B.c;
  156. var d = this.c * B.b + this.d * b.d;
  157. this.a = a; this.b = b; this.c = c; this.d = d;
  158. return this;
  159. }
  160. mul_scalar (s) {
  161. return Matrix2x2.Mul_Scalar(this, s);
  162. }
  163. mul_scalar_ (s) {
  164. this.a *= s;
  165. this.b *= s;
  166. this.c *= s;
  167. this.d *= s;
  168. return this;
  169. }
  170. mul_vector_left (v) {
  171. return Matrix2x2.Mul_Vector_Left(v, this);
  172. }
  173. mul_vector_right (v) {
  174. return Matrix2x2.Mul_Vector_Right(v, this);
  175. }
  176. transport () {
  177. return Matrix2x2.Transport(this);
  178. }
  179. transport_ () {
  180. var c = this.c;
  181. this.c = this.b;
  182. this.b = c;
  183. return this;
  184. }
  185. minor () {
  186. return Matrix2x2.Minor(this);
  187. }
  188. minor_ () {
  189. var a = this.d;
  190. var b = -1 * this.b;
  191. var c = -1 * this.c;
  192. var d = this.a;
  193. this.a = a; this.b = b; this.c = c; this.d = d;
  194. return this;
  195. }
  196. det () {
  197. return Matrix2x2.Det(this);
  198. }
  199. inv () {
  200. return Matrix2x2.Inv(this);
  201. }
  202. inv_ () {
  203. var _det = this.det();
  204. if (_det == 0) {
  205. console.error("Det of matrix is 0");
  206. return this;
  207. }
  208. this.minor_();
  209. this.mul_scalar_(1 / _det);
  210. return this;
  211. }
  212. // static method
  213. static Eye () {
  214. return new Matrix2x2 (1, 0, 0, 1);
  215. }
  216. static Add (A, B) {
  217. return new Matrix2x2 (
  218. A.a + B.a,
  219. A.b + B.b,
  220. A.c + B.c,
  221. A.d + B.d);
  222. }
  223. static Add_Scalar (A, s) {
  224. return new Matrix2x2 (
  225. A.a + s,
  226. A.b + s,
  227. A.c + s,
  228. A.d + s);
  229. }
  230. static Minus (A, B) {
  231. return new Matrix2x2 (
  232. A.a - B.a,
  233. A.b - B.b,
  234. A.c - B.c,
  235. A.d - B.d);
  236. }
  237. static Minus_Scalar (A, s) {
  238. return new Matrix2x2 (
  239. A.a - s,
  240. A.b - s,
  241. A.c - s,
  242. A.d - s);
  243. }
  244. static Mul (A, B) {
  245. return new Matrix2x2(
  246. A.a * B.a + A.b * B.c, A.a * B.b + A.b * B.d,
  247. A.c * B.a + A.d * B.c, A.c * B.b + A.d * B.d
  248. );
  249. }
  250. static Mul_Scalar (A, s) {
  251. return new Matrix2x2 (
  252. A.a * s,
  253. A.b * s,
  254. A.c * s,
  255. A.d * s);
  256. }
  257. static Mul_Vector_Left (v, M) {
  258. return Vector2D.Mul_Mat_Left(v, M);
  259. }
  260. static Mul_Vector_Right (v, M) {
  261. return Vector2D.Mul_Mat_Right(v, M);
  262. }
  263. static Transport (M) {
  264. return new Matrix2x2 (
  265. M.a, M.c,
  266. M.b, M.d
  267. );
  268. }
  269. static Minor (M) {
  270. return new Matrix2x2 (
  271. M.d, -M.b,
  272. -M.c, M.a,
  273. );
  274. }
  275. static Det (M) {
  276. return M.a * M.d - M.b * M.c;
  277. }
  278. static Inv (M) {
  279. var _det = Matrix2x2.Det(M);
  280. if (_det == 0) {
  281. console.error("Det of matrix is 0");
  282. return null;
  283. }
  284. var minor = Matrix2x2.Minor (M);
  285. return Matrix2x2.Mul_Scalar(minor, 1 / _det);
  286. }
  287. };
  288. function randomInt(left, right) {
  289. return Math.floor(Math.random() * (right - left + 1)) + left;
  290. }
  291. </script>
  292. </head>
  293. <body>
  294. <canvas id="m_canvas" width="900" height="600"></canvas>
  295. <script>
  296. function drawPoint (ctx, point, size, color) {
  297. ctx.beginPath();
  298. ctx.arc(point.x, point.y, size, 0, 2*Math.PI);
  299. ctx.fillStyle = color;
  300. ctx.fill();
  301. }
  302. function drawLine (a, b, width, color) {
  303. ctx.beginPath();
  304. ctx.moveTo(a.x, a.y);
  305. ctx.lineTo(b.x, b.y);
  306. ctx.strokeStyle = color;
  307. ctx.lineWidth = width;
  308. ctx.stroke();
  309. }
  310. </script>
  311. <script>
  312. var m_canvas = document.getElementById("m_canvas");
  313. var ctx = m_canvas.getContext("2d");
  314. // 随机两点为l1
  315. var pa = new Vector2D(randomInt(0, 300), randomInt(0, 200));
  316. pa = new Vector2D(100, 150);
  317. var pb = new Vector2D(randomInt(600, 900), randomInt(400, 600));
  318. ctx.strokeStyle = "rgba(0, 0, 255, 1.0)";
  319. ctx.strokeRect(0, 0, 900, 600);
  320. // 添加鼠标跟踪
  321. m_canvas.onmousemove = function (e) {
  322. // 清空
  323. ctx.clearRect(0, 0, 900, 600);
  324. // 绘制边界
  325. ctx.strokeStyle = "rgba(0, 0, 255, 1.0)";
  326. ctx.strokeRect(0, 0, 900, 600);
  327. // 画l1直线
  328. drawLine(pa, pb, 3, "rgba(255, 0, 0, 1.0)");
  329. // 绘制l1两点
  330. drawPoint(ctx, pa, 5, "rgba(0, 0, 0, 1.0)");
  331. drawPoint(ctx, pb, 5, "rgba(0, 0, 0, 1.0)");
  332. // 鼠标当前坐标
  333. var x = e.offsetX;
  334. var y = e.offsetY;
  335. var pc = new Vector2D(x, y);
  336. drawPoint(ctx, pc, 5, "rgba(0, 0, 0, 1.0)");
  337. // 计算点坐标
  338. var xl = pa.x - pb.x; var yl = pa.y - pb.y;
  339. var matrix_l = new Matrix2x2(yl, -xl, xl, yl);
  340. var matrix_A = new Matrix2x2(pb.x, -pb.y, pc.y, pc.x);
  341. var vector_l = new Vector2D(yl, xl);
  342. var po = matrix_l.inv().mul(matrix_A).mul_vector_right(vector_l);
  343. drawPoint(ctx, po, 5, "rgba(0, 0, 0, 1.0)");
  344. // 绘制d点
  345. var pd = po.mul_scalar(2).minus(pc);
  346. drawPoint(ctx, pd, 5, "rgba(0, 0, 0, 1.0)");
  347. };
  348. </script>
  349. </body>
  350. </html>
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注