js外公切线切点的计算

最新推荐文章于 2023-06-27 23:33:03 发布
最新推荐文章于 2023-06-27 23:33:03 发布
阅读量763 收藏 1
点赞数
文章标签： canvas js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l25000/article/details/105627815
版权

image.png

方法一

令 圆心之间的距离 d = C1C2
∴ ∠P1C1E = arccos((P1C1 - P3C2) / C1C2 ) = arccos( (r1 -r2 ) / d)
计算 C2C1 与水平线夹角，然后加上∠P1C1E就是P1的角度

parti.gif

let canvas =  document.getElementById("target");
   canvas.width = document.body.clientWidth;
   canvas.height = document.body.clientHeight;
   let ctx = canvas.getContext("2d");
   let isDrawing = false;
   //大圆圆心
   let pointC1 = {x:500,y:500};
   //大圆半径
   let radius1 = 250;

   //小圆圆心
   let pointC2 =  {x:800,y:300};
   //小圆半径
   let radius2 = 50;

   let eventC1 = false;



   canvas.addEventListener('mousedown', e => {
       let x = e.offsetX;
       let y = e.offsetY;
       isDrawing = true;
       if(Math.pow(x - pointC1.x,2) + Math.pow(y - pointC1.y,2) <= radius1*radius1){
           //移动大圆
           eventC1 = true;
           pointC1.x = x;
           pointC1.y = y;
       }else{
           pointC2.x = x;
           pointC2.y = y;
       }
       update();
   });

   canvas.addEventListener('mousemove', e => {
       if (isDrawing === true) {
           let x = e.offsetX;
           let y = e.offsetY;
           if(eventC1){
               pointC1.x = x;
               pointC1.y = y;
           }else{
               pointC2.x = x;
               pointC2.y = y;
           }
           update();
       }
   });

   canvas.addEventListener('mouseup', e => {
       if (isDrawing === true) {
           isDrawing = false;
           eventC1 = false;
       }
   });


   /**
    * @param c1 大圆
    * @param c2 小圆
    * @param r1 大圆半径
    * @param r2 小圆半径
    * */
   function calcQieDian(c1,c2,r1,r2) {
       //圆心之间的距离
       let d = Math.sqrt(Math.pow(c1.x - c2.x,2) + Math.pow(c1.y - c2.y,2));
       //外公切线与连心线夹角的角度
       let theta = Math.acos((r1 - r2)/d);
       let vc1c2 = {x:c2.x - c1.x,y:-c2.y + c1.y}; //屏幕坐标系与笛卡尔坐标系是y轴是反着的
       let radC1C2 = Math.acos(vc1c2.x / Math.sqrt(Math.pow(vc1c2.x,2) + Math.pow(vc1c2.y,2)));

       if(c2.y <= c1.y){
           //大圆上的切点
           let p1 = {x:c1.x + Math.cos(theta + radC1C2) * r1,y:c1.y - Math.sin(theta + radC1C2)* r1};
           let p2 = {x:c1.x + Math.cos(theta - radC1C2) * r1,y:c1.y + Math.sin(theta - radC1C2)* r1};
           //小圆上的切点
           let p3 = {x:c2.x + Math.cos(theta + radC1C2) * r2,y:c2.y - Math.sin(theta + radC1C2)* r2};
           let p4 = {x:c2.x + Math.cos(theta - radC1C2) * r2,y:c2.y + Math.sin(theta - radC1C2)* r2};
           return {p1:p1,p2:p2,p3:p3,p4:p4};
       }else{
           radC1C2 = Math.PI - radC1C2;
           //大圆上的切点
           let p1 = {x:c1.x + Math.cos(Math.PI - theta - radC1C2) * r1,y:c1.y + Math.sin(Math.PI - theta - radC1C2)* r1};
           let p2 = {x:c1.x + Math.cos(Math.PI - (theta - radC1C2)) * r1,y:c1.y - Math.sin(Math.PI - (theta - radC1C2))* r1};
           //小圆上的切点
           let p3 = {x:c2.x + Math.cos(Math.PI - theta - radC1C2) * r2,y:c2.y + Math.sin(Math.PI - theta - radC1C2)* r2};
           let p4 = {x:c2.x + Math.cos(Math.PI - (theta - radC1C2)) * r2,y:c2.y - Math.sin(Math.PI - (theta - radC1C2))* r2};
           return {p1:p1,p2:p2,p3:p3,p4:p4};
       }
   }


   function update() {
       ctx.clearRect(0,0,canvas.width,canvas.height);

       //大圆的圆心
       drawPoint(pointC1.x,pointC1.y,"#097734");
       //大圆
       drawCircle(pointC1.x,pointC1.y,radius1,"#097734");

       //大圆的圆心
       drawPoint(pointC2.x,pointC2.y,"#0a6292");
       //大圆
       drawCircle(pointC2.x,pointC2.y,radius2,"#0a6292");


       let p = calcQieDian(pointC1,pointC2,radius1,radius2);

       drawText("C1",pointC1.x,pointC1.y);
       drawText("C2",pointC2.x,pointC2.y);
       drawText("p1",p.p1.x,p.p1.y);
       drawText("p2",p.p2.x,p.p2.y);
       drawText("p3",p.p3.x,p.p3.y);
       drawText("p4",p.p4.x,p.p4.y);
       drawPoint(p.p1.x,p.p1.y,"#097734");
       drawPoint(p.p2.x,p.p2.y,"#097734");
       drawPoint(p.p3.x,p.p3.y,"#097734");
       drawPoint(p.p4.x,p.p4.y,"#097734");

       drawLine(pointC1,p.p1);
       drawLine(pointC1,p.p2);
       drawLine(pointC2,p.p3);
       drawLine(pointC2,p.p4);
       drawLine(p.p1,p.p2);
       drawLine(p.p3,p.p4);

       drawLine(p.p1,p.p3);
       drawLine(p.p2,p.p4);
       drawLine(pointC1,pointC2);
   }


   function drawText(text,x,y) {
       ctx.beginPath();
       ctx.font="40px Arial";
       ctx.fillText(text,x,y);
       ctx.stroke();
   }

   function drawCircle(x,y,radius,color){
       ctx.beginPath();
       ctx.fillStyle=color;
       ctx.arc(x,y,radius,0,2*Math.PI,true);
       ctx.stroke();
   }

   function drawPoint(x,y,color){
       ctx.beginPath();
       ctx.fillStyle=color;
       ctx.arc(x,y,5,0,2*Math.PI,true);
       ctx.fill();
   }

   function drawLine(pointStart,pointEnd) {
       ctx.beginPath();
       ctx.moveTo(pointStart.x,pointStart.y);
       ctx.lineTo(pointEnd.x,pointEnd.y);
       ctx.stroke();
   }
   update();

方法二

利用atan2计算,先计算二个圆心之间的距离，利用atan2计算角度，剩下的就是求角度了，这种方法也是最简单的一种
atan2

let d = Math.sqrt(Math.pow(pointC1.x - pointC2.x,2) + Math.pow(pointC1.y - pointC2.y,2));
const angleBetweenCenters = angle(pointC2,pointC1);
const spread = Math.acos((radius1 - radius2) / d);
const angle1 = angleBetweenCenters + spread;
const angle2 = angleBetweenCenters - spread;
const angle3 = angleBetweenCenters + (Math.PI - (Math.PI - spread));
const angle4 = angleBetweenCenters - (Math.PI - (Math.PI - spread));
const p1 = getVector(pointC1.x,pointC1.y, angle1, radius1);
const p2 = getVector(pointC1.x,pointC1.y, angle2, radius1);
const p3 = getVector(pointC2.x,pointC2.y, angle3, radius2);
const p4 = getVector(pointC2.x,pointC2.y, angle4, radius2);

let canvas =  document.getElementById("target");
    canvas.width = document.body.clientWidth;
    canvas.height = document.body.clientHeight;
    let ctx = canvas.getContext("2d");
    let isDrawing = false;
    //大圆圆心
    let pointC1 = {x:500,y:500};
    //大圆半径
    let radius1 = 250;

    //小圆圆心
    let pointC2 =  {x:800,y:300};
    //小圆半径
    let radius2 = 50;

    let eventC1 = false;



    canvas.addEventListener('mousedown', e => {
        let x = e.offsetX;
        let y = e.offsetY;
        isDrawing = true;
        if(Math.pow(x - pointC1.x,2) + Math.pow(y - pointC1.y,2) <= radius1*radius1){
            //移动大圆
            eventC1 = true;
            pointC1.x = x;
            pointC1.y = y;
        }else{
            pointC2.x = x;
            pointC2.y = y;
        }
        update();
    });

    canvas.addEventListener('mousemove', e => {
        if (isDrawing === true) {
            let x = e.offsetX;
            let y = e.offsetY;
            if(eventC1){
                pointC1.x = x;
                pointC1.y = y;
            }else{
                pointC2.x = x;
                pointC2.y = y;
            }
            update();
        }
    });

    canvas.addEventListener('mouseup', e => {
        if (isDrawing === true) {
            isDrawing = false;
            eventC1 = false;
        }
    });

    function angle(c1,c2) {
        return Math.atan2(c1.y - c2.y, c1.x - c2.x);
    }

    function getVector(cx, cy, a, r) {
        return {x:cx + r * Math.cos(a), y:cy + r * Math.sin(a)};
    }

    function update() {
        ctx.clearRect(0,0,canvas.width,canvas.height);

        //大圆的圆心
        drawPoint(pointC1.x,pointC1.y,"#097734");
        //大圆
        drawCircle(pointC1.x,pointC1.y,radius1,"#097734");

        //大圆的圆心
        drawPoint(pointC2.x,pointC2.y,"#0a6292");
        //大圆
        drawCircle(pointC2.x,pointC2.y,radius2,"#0a6292");

        let d = Math.sqrt(Math.pow(pointC1.x - pointC2.x,2) + Math.pow(pointC1.y - pointC2.y,2));
        const angleBetweenCenters = angle(pointC2,pointC1);
        const spread = Math.acos((radius1 - radius2) / d);
        const angle1 = angleBetweenCenters + spread;
        const angle2 = angleBetweenCenters - spread;
        const angle3 = angleBetweenCenters + (Math.PI - (Math.PI - spread));
        const angle4 = angleBetweenCenters - (Math.PI - (Math.PI - spread));
        const p1 = getVector(pointC1.x,pointC1.y, angle1, radius1);
        const p2 = getVector(pointC1.x,pointC1.y, angle2, radius1);
        const p3 = getVector(pointC2.x,pointC2.y, angle3, radius2);
        const p4 = getVector(pointC2.x,pointC2.y, angle4, radius2);

        drawText("C1",pointC1.x,pointC1.y);
        drawText("C2",pointC2.x,pointC2.y);

        drawText("p1",p1.x,p1.y);
        drawText("p2",p2.x,p2.y);
        drawText("p3",p3.x,p3.y);
        drawText("p4",p4.x,p4.y);

        drawPoint(p1.x,p1.y,"#097734");
        drawPoint(p2.x,p2.y,"#097734");
        drawPoint(p3.x,p3.y,"#097734");
        drawPoint(p4.x,p4.y,"#097734");

        drawLine(pointC1,p1);
        drawLine(pointC1,p2);
        drawLine(pointC2,p3);
        drawLine(pointC2,p4);
        drawLine(p1,p2);
        drawLine(p3,p4);

        drawLine(p1,p3);
        drawLine(p2,p4);
        drawLine(pointC1,pointC2);
    }


    function drawText(text,x,y) {
        ctx.beginPath();
        ctx.font="30px Arial";
        ctx.fillText(text,x,y);
        ctx.stroke();
    }

    function drawCircle(x,y,radius,color){
        ctx.beginPath();
        ctx.fillStyle=color;
        ctx.arc(x,y,radius,0,2*Math.PI,true);
        ctx.stroke();
    }

    function drawPoint(x,y,color){
        ctx.beginPath();
        ctx.fillStyle=color;
        ctx.arc(x,y,5,0,2*Math.PI,true);
        ctx.fill();
    }

    function drawLine(pointStart,pointEnd) {
        ctx.beginPath();
        ctx.moveTo(pointStart.x,pointStart.y);
        ctx.lineTo(pointEnd.x,pointEnd.y);
        ctx.stroke();
    }
    update();
CODERLIHAO
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
两圆的切点.txt
07-10
求两圆的切点，网上查找了一些资料，发现方案挺多的，我选取了几个测试了下，这个就是我通过的代码了。可直接使用。这个跟CAD关系不大，绘图求点的其他工程都可以使用。
JavaScript
大雄专栏
09-18 1208
JavaScript 有六种数据类型。主要的类型有 number、string、object 以及 Boolean 类型,其他两种类型为 null 和 undefined。　　 String 字符串类型:字符串是用单引号或双引号来说明的。（使用单引号来输入包含引号的字符串。）如：“The cow jumped over the moon.” 　　　数值数据类型：JavaScript 支持整
3d云html原理,深入解析JS实现3D标签云的原理与方法
weixin_39781452的博客
05-31 535
本文实例讲述了深入解析JS实现3D标签云的原理与方法。分享给大家供大家参考，具体如下：最近开始用canvas搞3D了，搞得也是简单的东西，就是球体转圈。做出来后，突然想起以前看过的3D标签云，在以前觉得真心狂拽酷炫叼啊，当时也确实不知道怎么在平面上模拟3D，所以也就没去搞了。现在刚好用了canvas搞3D，也发现，好像3D标签云也差不多，然后就写了一下。具体怎么做呢，先说一下原理，3D标签云就是做...
如何找到两个圆的公切线？
gt11799的专栏
09-11 8768
大家都提供了道，我来提供术。我最近在自学python，题主如果想学python，可以私信微信号给我，我们一起努力啊。 我采用的是 @vczh的算法，期间程序有问题，我手算了一条内公切线的斜率，用的是 @程德华的方法。（我有多想念老师们出题的数值！老师们节日快乐。） 先说结论：python可以算，但是很麻烦，而且我的程序最终还是有问题。推荐使用matlab。 ——————————分割线————
js中有哪些内置函数
JsRoccketq的博客
11-08 2046
Object array bollean number string function date regexp 正则表达式 error 数值方法 数值对象仅包含了几个任何对象均定义的默认方法 方法 描述 constructor() 返回创建该对象实例的函数。默认是数值对象。 toExponential() 强制将数值以指数形式显示。 toFixed() 可把 ...
[p5.js作品教程]Reverse Phi Illusion视错觉实现
qq_45366264的博客
01-16 1056
Reverse Phi Illusion视错觉p5.js实现
js-对Math对象中数学函数的总结
kjprime的博客
02-28 811
Math对象的总结绝对值(abs)PI(π)平方根(√)最大值(可以取多个数的最大值max)最小值(可以取多个数的最小值min)取幂(pow)取随机值(大于0小于1，包括0不包括1 random)取32位二进制数中前导零的数量(clz32)自然数(e)取符号函数(sign)取浮点函数取整函数向上取整( > x)向下取整( < x)四舍五入取整取整(取数字的整数部分)指数函数自然数e的x次方(exp)自然数e的x次方减1(exp - 1)幂函数平方根√1/2(1/2的平方根)√2(2的平方根)三次
JavaScript已知直角三角形两条边的长度求三角形的角度
最新发布
充满智慧的博客
06-27 786
通过反三角函数，可以求出三角形的角度（弧度制），然后通过乘以。180/π，来把弧度制转换为角度制。
圆的面积，周长计算以及判断两圆之间是相交，相离，相切,内含，内切
weixin_33671935的博客
03-12 615
import math class Round: 　　def __init__(self,r,xy): 　　self.r = r 　　self.xy = xy 　　def Aera(self): 　　　　return math.pi * self.r ** 2 　　def Grith(self): 　　　　return math.pi * self.r * 2 　　def Jud...
arccos(x)函数
qq_39536716的博客
10-12 1万+
利用标准库中的cos(x)和fabs(x)函数实现arccos(x)函数，x取值范围是[-1, 1]，返回值为[0, PI]。要求结果准确到小数点后5位。(PI = 3.1415926) 　　提示：要达到这种程度的精度需要使用double类型。   样例输入   0.5   样例输出 数据规模和约定   -1 &lt;= x &lt;= 1, 0 &lt;= arccos(x)...
奥赛圆锥曲线的切线及切点弦方程学习教案.pptx
11-22
奥赛圆锥曲线的切线及切点弦方程学习教案.pptx
SpringAOP切点函数实现原理详解
08-19
主要介绍了SpringAOP切点函数实现原理详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Spring AOP中定义切点的实现方法示例
08-25
主要介绍了Spring AOP中定义切点的实现方法,结合实例形式分析了spring面向切面AOP定义切点的具体步骤、实现方法与相关操作技巧,需要的朋友可以参考下
基于梯度相关矩阵的切点检测
02-05
切点是表征图像中平面曲线局部形状变化的重要点特征，现有的研究鲜有涉及。构建了表征平面曲线局部几何特征的梯度相关矩阵（GCMs），通过GCMs行列式检测到了角点，但无法检测典型切点模型。由于GCM行列式仅在直线段...
QML 中常用的 JS 函数整理
m0_60259116的博客
03-29 1054
QML 中常用的 JS 函数整理
js内公切线切点的计算
L25000的专栏
04-20 409
之前讨论过外公切线切点的计算 很类似，主要就是计算∠P1C1C2 的角度 △P1C1O与△P3C2O是相似三角形 令 圆心之间的距离 d = C1C2 这样可以求出C1O的距离 C1O = d r1/(r1+r2 ) 那么∠P1C1O = arccos(r1/C1O) = arccos((r1+r2 )/d) let canvas = document.getElementById("ta...
JS Math.sin() 与 Math.cos() 用法(画圆)
chelen_jak的专栏
05-25 1万+
原文出处：https://blog.csdn.net/u010227447/article/details/45892745Math.sin(x)      x 的正玄值。返回值在 -1.0 到 1.0 之间；Math.cos(x)    x 的余弦值。返回的是 -1.0 到 1.0 之间的数；这两个函数中的X 都是指的“弧度”而非“角度”, 弧度的计算公式为： 2*PI/360*角度；30° 角...
JS 中 Math 对象的【三角函数】的用法与实战例子【打靶游戏】 | Math.tan(), Math.cos(), Math.sin()
热门推荐
林洪炳的日常技术积累
04-21 3万+
如果用JS做前端的时候，就会发现跟 Math 类打交道比较少。但是如果用 Node.js 做后台，或用 JS 写游戏的时候，Math 类就会无处不在，尤其是 random()、round()、abs()、ceil()、floor() 等方法很常用。本篇文章就来说说Math 类中的 sin()、cos()、tan() 这三个中学时期的数学重点究竟在JS中怎么用。
C++ 实现两圆外公切线交点计算
06-09
实现两圆外公切线交点计算，可以按照以下步骤进行： 1. 计算两圆心之间的距离，如果两圆相离或相切，则不存在外公切线； 2. 计算两圆心的连线与两圆的切点，得到切线的斜率； 3. 根据切线斜率和两圆心的位置，求出切线的方程； 4. 求出两圆心到切点的距离，即切线的截距； 5. 求解切线方程组，得到两条外公切线的交点。 以下是使用 C++ 实现两圆外公切线交点计算的代码示例： ```c++ #include <iostream> #include <cmath> using namespace std; struct Point { double x, y; }; struct Circle { Point center; double radius; }; // 计算两点之间的距离 double distance(Point p1, Point p2) { return sqrt(pow(p1.x - p2.x, 2) + pow(p1.y - p2.y, 2)); } // 计算两圆的公切线的交点 void calcOuterTangent(Circle c1, Circle c2) { // 计算两圆心之间的距离 double d = distance(c1.center, c2.center); // 如果两圆相离或相切，则不存在外公切线 if (d > c1.radius + c2.radius || d < abs(c1.radius - c2.radius)) { cout << "No outer tangent." << endl; return; } // 计算两圆心的连线与两圆的切点，得到切线的斜率 double angle = atan2(c2.center.y - c1.center.y, c2.center.x - c1.center.x); double sinAngle = sin(angle); double cosAngle = cos(angle); // 根据切线斜率和两圆心的位置，求出切线的方程 double m1 = c1.radius * sinAngle - c2.radius * sinAngle; double n1 = c1.radius * cosAngle - c2.radius * cosAngle; double m2 = c1.radius * sinAngle + c2.radius * sinAngle; double n2 = c1.radius * cosAngle + c2.radius * cosAngle; // 求出两圆心到切点的距离，即切线的截距 double b1 = c1.center.y - m1 / n1 * c1.center.x; double b2 = c2.center.y - m2 / n2 * c2.center.x; // 求解切线方程组，得到两条外公切线的交点 double x = (b2 - b1) / (m1 / n1 - m2 / n2); double y = m1 / n1 * x + b1; cout << "The intersection point of outer tangents is: (" << x << ", " << y << ")." << endl; } int main() { Circle c1 = {{0, 0}, 2}; Circle c2 = {{5, 0}, 3}; calcOuterTangent(c1, c2); return 0; } ``` 上述代码中，我们定义了两个结构体 Point 和 Circle，分别表示点和圆。distance 函数用于计算两点之间的距离。calcOuterTangent 函数用于计算两圆的外公切线的交点。在主函数中，我们定义了两个圆，并调用 calcOuterTangent 函数计算它们的外公切线的交点。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值