Advertisement
fevzi02

Экз_1

Feb 8th, 2022
809
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 5.74 KB | None | 0 0
  1. <html>
  2.     <head>
  3.         <meta charset="UTF-8"/>
  4.         <title>Определение точки пересечения отрезков</title>
  5.     </head>
  6.      <body>
  7.         <br><br><br><br>
  8.         <button onclick="update_all()">    Обновить      </button>
  9.         <canvas id="canvas" width="500" height="500"></canvas>
  10.         <style>
  11.  
  12.             body
  13.             {
  14.                 background: #C5D0E6
  15.             }
  16.  
  17.             canvas
  18.             {
  19.                 display: block;
  20.                 margin: auto auto;
  21.                 border: 1px solid #04112F;
  22.                 background: #CBB6CE;
  23.             }
  24.             button{
  25.                 display: block;
  26.                 margin: auto auto;
  27.                 width: 100px;
  28.                 height: 30px;
  29.                 background: #FFCC00
  30.             }
  31.         </style>
  32.        
  33.         <script>
  34.             let c = document.getElementById('canvas');
  35.             let ctx = c.getContext('2d');
  36.            
  37.             let idA;
  38.             let x, y;
  39.             let points = [];
  40.             let A, B, C;
  41.             let point_X, point_Y;
  42.              
  43.             window.onload=function(){
  44.                 document.getElementById('canvas').addEventListener('click', (e) => {
  45.                     if(points.length < 4)
  46.                        points.push({x: e.offsetX, y: e.offsetY});
  47.                    Main();
  48.                });
  49.            }
  50.            
  51.            function Main()
  52.            {
  53.                ctx.strokeStyle = "#000";
  54.                ctx.fillStyle = "#2e49cd";
  55.                for(let i = 0; i < points.length; i++)
  56.                    ctx.fillRect(points[i].x - 2, points[i].y - 2, 3, 3);
  57.            
  58.                if(points.length > 1)
  59.                 {
  60.                     ctx.beginPath();
  61.                     ctx.moveTo(points[0].x, points[0].y);
  62.                     ctx.lineTo(points[1].x, points[1].y);
  63.                     if(points.length > 3)
  64.                     {  
  65.                         ctx.moveTo(points[2].x, points[2].y);
  66.                         ctx.lineTo(points[3].x, points[3].y);
  67.                     }    
  68.                     ctx.stroke();
  69.                     ctx.closePath();
  70.                     TempCheck();
  71.                 }
  72.             }
  73.              
  74.             function cross(ax, ay, bx, by)    //Векторное произведение
  75.             {
  76.                 return ax * by - bx * ay;
  77.             }
  78.              
  79.             function CrossingCheck(p1,p2,p3,p4) //Проверка пересечения
  80.             {
  81.                 let v1, v2, v3, v4;
  82.              
  83.                 v1 = cross(p4.x - p3.x,  p4.y - p3.y,  p1.x - p3.x,  p1.y - p3.y);
  84.                 v2 = cross(p4.x - p3.x,  p4.y - p3.y,  p2.x - p3.x,  p2.y - p3.y);
  85.                 v3 = cross(p2.x - p1.x,  p2.y - p1.y,  p3.x - p1.x,  p3.y - p1.y);
  86.                 v4 = cross(p2.x - p1.x,  p2.y - p1.y,  p4.x - p1.x,  p4.y - p1.y);
  87.  
  88.                 if ((v1 * v2 < 0) && (v3 * v4 < 0))
  89.                    return true;
  90.                else
  91.                    return false;
  92.            }
  93.            
  94.            function equation_line(p1,p2)  //Построение уравнения прямой Ax+By+C
  95.            {
  96.                A = p2.y - p1.y;                                            
  97.                B = p1.x - p2.x;
  98.                C =- p1.x * (p2.y-p1.y) + p1.y * (p2.x - p1.x);
  99.            
  100.            }
  101.            
  102.             function IntersectionX(a1,b1,c1,a2,b2,c2)  //Поиск точки пересечения по Х
  103.             {
  104.                let d, dx, pointx;
  105.                
  106.                d = a1 * b2 - b1 * a2;
  107.                dx =- c1 * b2 + b1 * c2;
  108.                
  109.                pointx = dx / d;
  110.                
  111.                return pointx;
  112.             }
  113.            
  114.            function IntersectionY(a1,b1,c1,a2,b2,c2) //Поиск точки пересечения по Y
  115.            {
  116.                let d ,dy, pointy;
  117.                
  118.                d = a1 * b2 - b1 * a2;
  119.                dy =- a1 * c2 + c1 * a2;
  120.                
  121.                pointy = dy / d;
  122.                
  123.                return pointy;
  124.            }
  125.            
  126.            function TempCheck()    //Проверка отрезков на пересечение
  127.            {
  128.                ctx.fillStyle = "red";
  129.  
  130.                if(CrossingCheck(points[0], points[1], points[2], points[3]))
  131.                {
  132.                    let a1, b1, c1, a2, b2, c2;
  133.  
  134.                    equation_line(points[0], points[1]);
  135.                    a1 = A;
  136.                    b1 = B;
  137.                    c1 = C;
  138.  
  139.                    equation_line(points[2], points[3]);
  140.                    a2 = A;
  141.                    b2 = B;
  142.                    c2 = C;
  143.  
  144.                    point_X = IntersectionX(a1, b1, c1, a2, b2, c2);
  145.                    point_Y = IntersectionY(a1, b1, c1, a2, b2, c2);
  146.  
  147.                    ctx.fillRect(point_X - 2, point_Y - 2, 4, 4);
  148.  
  149.                    setTimeout(function() {
  150.                         alert('Х=' + point_X + ',   Y=' + point_Y);}, 100);         
  151.                 }                      
  152.                else
  153.                     setTimeout(function() { alert("Отрезки Не пересекаются");}, 100);   
  154.            }
  155.  
  156.            function update_all()
  157.            {
  158.                idA = undefined;
  159.                x = undefined;
  160.                y = undefined;
  161.                A = undefined;
  162.                B = undefined;
  163.                C = undefined;
  164.                point_X = undefined;
  165.                point_Y = undefined;
  166.                points = [];
  167.  
  168.                ctx.clearRect(0, 0, 500, 500);
  169.            }
  170.        </script>
  171.     </body>
  172. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement