js内公切线切点的计算

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

image.png

之前讨论过外公切线切点的计算

方法一

很类似，主要就是计算∠P1C1C2 的角度
△P1C1O与△P3C2O是相似三角形
令 圆心之间的距离 d = C1C2
这样可以求出C1O的距离
C1O = d r1/(r1+r2 )

那么∠P1C1O = arccos(r1/C1O) = arccos((r1+r2 )/d)

par.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 = 100;

  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(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};
    }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(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};
    }
  }

  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.p4);
    drawLine(p.p2,p.p3);
    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计算

4169630-90a03fd4bafbe691.png

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 = 100;

    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)};
    }

    /**
     * @param c1 大圆
     * @param c2 小圆
     * @param r1 大圆半径
     * @param r2 小圆半径
     * */
    function calcQieDian(c1, c2, r1, r2) {
        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 = Math.PI - (spread - angleBetweenCenters);
        const angle4 = -Math.PI + angleBetweenCenters + 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);
        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.p4);
        drawLine(p.p2, p.p3);
        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();

结合之前的外公切线，这样内外公切线都有了
image.png

CODERLIHAO
关注
python 计算两圆的公切线
jacke121的专栏
09-22 2682
import math import numpy as np def get_qiedian(point_a,point_b): angle_o = math.atan2(point_b[1] - point_a[1], point_b[0] - point_a[0]) angle1 = int(angle_o * 180 / math.pi) x_fuhao = 1 if angle_o > math.pi / 2: x_fuhao = -1 x_new_...
Python圆形计算指南：如何计算两个圆的公切线？
.
03-22 776
在这个例子中，我们计算了两个圆的公切线，其中一个圆的半径为 2，另一个圆的半径为 1。我们涵盖了从计算两个圆心之间的距离到计算切点之间的距离、角度和坐标的所有概念。在这个例子中，我们计算了一个半径为 1 的圆上处于 45 度位置的切点到圆心的距离。计算两个圆心之间的距离后，我们需要计算两个圆之间的夹角。接下来，我们将深入了解这些主题，并通过演示如何使用Python代码来计算两个圆的公切线来加深您对概念的理解。计算两个圆之间的夹角后，我们需要计算圆心和切点之间的距离。
js外公切线切点的计算
L25000的专栏
04-20 987
令P1P3 与C1C2 的交点是E点 P1C1 / P3C2 = C1E / C2E = C1E / (C1E - C1C2) 令 圆心之间的距离 d = C1C2 ∴ ∠P1C1E = arccos((P1C1 - P3C2) / C1C2 ) = arccos( (r1 -r2 ) / d) 计算 C2C1 与水平线夹角，然后加上∠P1C1E就是P1的角度 let canvas = ...
JS面向切面编程
JunChow
01-15 523
When I see a bird that walks like a duck and swims like a duck and quacks like a duck, I call that bird a duck. 切面 切面 在面向对象编程中，定义的类通常都是领域模型，类拥有的方法通常是和纯粹的业务逻辑相关。 面向切面编程 面向切面编程（AOP, Aspe...
js-对Math对象中数学函数的总结
kjprime的博客
02-28 1338
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 1618
通过反三角函数，可以求出三角形的角度（弧度制），然后通过乘以。180/π，来把弧度制转换为角度制。
两圆的外切线与内切线的切点算法
weixin_39421817的博客
10-26 7341
最近想画两球水滴效果所有在网上找两圆外切点和内切点的算法，找了很久没有找到所以自己写了一个工具类来计算两圆的公切线点。具体效果如下图： 根据CircleUtils类的getCircleTangentPointOut方法返回外切点坐标[r1p1, r1p2, r2p1, r2p2],依次为左边圆的两个切点坐标和右边两个切点坐标。 根据CircleUtils类的getCircleTangent...
绘制圆的外部/内部公切线：获取并绘制圆的外部/内部公切线-matlab开发
05-31
根据切点的位置，可以分为外部公切线（两个圆外切）和内部公切线（两个圆内切）。 在MATLAB中，我们可以使用以下步骤来实现这个功能： 1. **定义圆的参数**：首先，我们需要知道每个圆的中心坐标和半径。假设我们...
matlab 求公切线方程,【原创】绘制两圆公切线MATLAB代码
weixin_42360972的博客
03-29 2755
function common_tangent(x1,y1,r1,x2,y2,r2)% 画两圆的公切线% x1-- 第一个圆的圆心横坐标% y1-- 第一个圆的圆心纵坐标% r1-- 第一个圆的半径% x2-- 第二个圆的圆心横坐标% y2-- 第二个圆的圆心纵坐标% r2-- 第二个圆的半径% 用到了坐标平移和旋转% by：xiezhh(谢中华)% 2011.2.27d ...
js中有哪些内置函数
JsRoccketq的博客
11-08 2160
Object array bollean number string function date regexp 正则表达式 error 数值方法 数值对象仅包含了几个任何对象均定义的默认方法 方法 描述 constructor() 返回创建该对象实例的函数。默认是数值对象。 toExponential() 强制将数值以指数形式显示。 toFixed() 可把 ...
两个圆公切线求法_如何求两个圆的公切线方程？
热门推荐
weixin_33206646的博客
12-30 7万+
点击上方蓝字“高中数学xyz”一起玩耍 公切线是指同时相切于两条或两条以上的曲线的直线。和两个圆相切的直线叫做这两个圆的公切线。如果两个圆在公切线的同侧，则这公切线叫外公切线;如果两个圆在公切线的异侧，则叫内公切线。 我们都熟知两个圆的位置关系无外乎五种情况： 相离、外切、相交、内切和内含. 那么如何去求两个非内含的两个圆的公切线方程呢？下面以两个相离的圆为例，浅谈...
求两圆的公切线计算
lvchang
05-30 1万+
关于两圆的公切线计算我们首先需要搞清楚的是两个圆之间有哪些位置关系，两个圆的位置包括内含、内切、外切、外离几种方式，可以看出位置关系可以根据“两圆心之间的距离”与“两圆半径和”以及“两圆半径差”之间的关系判断。 假设大圆半径为R，小圆半径为 r， 把“两圆心之间的距离”表示为d，“两圆半径和”表示为s，“两圆半径差”表示为x，那么： d = |R + r|; x =|R - r|; 可以得出各位置关系必须满足以下相应条件： 内含： d > 0 &&...
JavaScript
大雄专栏
09-18 1296
JavaScript 有六种数据类型。主要的类型有 number、string、object 以及 Boolean 类型,其他两种类型为 null 和 undefined。　　 String 字符串类型:字符串是用单引号或双引号来说明的。（使用单引号来输入包含引号的字符串。）如：“The cow jumped over the moon.” 　　　数值数据类型：JavaScript 支持整
tf.acos_JavaScript中带有示例的Math.acos（）方法
cumt30111的博客
07-05 208
tf.acos JavaScript | Math.acos()方法 (JavaScript | Math.acos() Method) Math.acos() is a function in math library of JavaScript that is used to find the value of arccosine of a number and return the valu...
JS Math.sin() 与 Math.cos() 用法(画圆)
chelen_jak的专栏
05-25 1万+
原文出处：https://blog.youkuaiyun.com/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中怎么用。
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)...
js过圆外一点的直线与圆相切的切点坐标计算
L25000的专栏
04-19 8291
由圆外一点P1（x1，y1）向圆(x - a)2 + (y - b)2 = R2作切线，切线与圆相切的切点是P0(x0,y0) 先求直线P0P1直线方程 因为P0P1⊥OP0 向量OP0 = （x0 - a,y0 - b ） 向量P0P1 = (x1 - x0, y1 - y0) 所以 向量P0P1 点乘 向量OP0 = 0 所以 （x0 - a)* (x1 - x0) + (y0 - b)(...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值