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

点关于直线的对称点

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