最近遇到一个需求，画一个轮廓，然后外面画一个圆，圆外面再画个箭头表示方向，不能互相遮挡，所以轮廓要完全在圆内。

涉及一个子问题，先调研了一下：计算包含三角形的最小圆。后续根据这个一直迭代计算包含任意多边形的最小圆。

锐角三角形就是外接圆；钝角三角形要取最长边中点作为圆心，最长边长度作为直径；直角三角形可以并入其中任意一种情况。

参照了博客：https://blog.csdn.net/qq_17148595/article/details/122067966

效果如图

 

 

附上完整网页代码：

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <style>
  5             #main{
  6                 height: 100%;
  7                 display: flex;
  8                 flex-direction: column;
  9             }
 10             #top{
 11                 display: grid;
 12                 grid-template-rows: 50% 50%;
 13                 grid-template-columns: 33% 33% 33%;
 14             }
 15             input{
 16                 width: 100px;
 17             }
 18             canvas{
 19                 flex-grow: 1;
 20             }
 21         </style>
 22     </head>
 23     <body>
 24         <div id="main">
 25             <div id="top">
 26                 <div>
 27                     <span>A.x</span>
 28                     <input type="number" value="333" oninput="update()" />
 29                 </div>
 30                 <div>
 31                     <span>B.x</span>
 32                     <input type="number" value="400" oninput="update()" />
 33                 </div>
 34                 <div>
 35                     <span>C.x</span>
 36                     <input type="number" value="315" oninput="update()" />
 37                 </div>
 38                 <div>
 39                     <span>A.y</span>
 40                     <input type="number" value="100" oninput="update()" />
 41                 </div>
 42                 <div>
 43                     <span>B.y</span>
 44                     <input type="number" value="200" oninput="update()" />
 45                 </div>
 46                 <div>
 47                     <span>C.y</span>
 48                     <input type="number" value="370" oninput="update()" />
 49                 </div>
 50             </div>
 51             <canvas width="1000" height="800"></canvas>
 52         </div>
 53     </body>
 54     <script>
 55         function circleCenter(A, B, C) {
 56             let yDelta_a = B.y - A.y;
 57             let xDelta_a = B.x - A.x;
 58             let yDelta_b = C.y - B.y;
 59             let xDelta_b = C.x - B.x;
 60             if(xDelta_a==0||xDelta_b==0||yDelta_a==0)//边界情况，把点换个位置
 61                 return circleCenter(B,C,A);
 62             let center = {};
 63             let aSlope = yDelta_a/xDelta_a;
 64             let bSlope = yDelta_b/xDelta_b;
 65             center.x = (aSlope*bSlope*(A.y - C.y) + bSlope*(A.x + B.x)
 66                 - aSlope*(B.x+C.x) )/(2* (bSlope-aSlope) );
 67             center.y = -1*(center.x - (A.x+B.x)/2)/aSlope +  (A.y+B.y)/2;
 68             center.r=Math.sqrt((center.x-A.x)**2+(center.y-A.y)**2);//求出圆心之后随便跟一个点算距离就是半径
 69             return center;
 70         }
 71         function update(){
 72             let c=document.getElementsByTagName('canvas')[0];
 73             let ctx=c.getContext('2d');
 74             c.width=c.width;//to clear
 75             let a=Array.from(document.getElementsByTagName('input')).map(u=>parseInt(u.value));
 76             let l=[];
 77             for(let i=0;i<3;i++){
 78                 l.push(Math.sqrt((a[(i+1)%3]-a[i])**2+(a[(i+1)%3+3]-a[i+3])**2));
 79             }
 80             let max=0;
 81             for(let i=1;i<3;i++)
 82                 if(l[i]>l[max])
 83                     max=i;//找到最长边
 84             if(l.reduce((a,b)=>a+b)-l[max]*2<0.01)//共线
 85                 return;
 86             let sum=0;
 87             for(let i=0;i<3;i++){
 88                 if(i!=max)
 89                     sum+=l[i]**2;
 90             }
 91             let circle=circleCenter({x:a[0],y:a[3]}, {x:a[1],y:a[4]}, {x:a[2],y:a[5]});
 92             ctx.moveTo(a[0],a[3]);
 93             ctx.lineTo(a[1],a[4]);
 94             ctx.lineTo(a[2],a[5]);
 95             ctx.closePath();
 96             ctx.stroke();
 97             ctx.strokeStyle='blue';
 98             ctx.beginPath();
 99             ctx.arc(circle.x,circle.y,circle.r,0,2*Math.PI);
100             ctx.stroke();
101             if(l[max]**2>=sum){//不是锐角三角形
102                 ctx.strokeStyle='red';
103                 ctx.beginPath();
104                 ctx.arc((a[max]+a[(max+1)%3])/2,(a[max+3]+a[(max+1)%3+3])/2,l[max]/2,0,2*Math.PI);
105                 ctx.stroke();
106             }
107         }
108         update();
109     </script>
110 </html>