image.png
之前讨论过外公切线切点的计算
方法一
很类似，主要就是计算∠P1C1C2 的角度
△P1C1O与△P3C2O是相似三角形
令 圆心之间的距离 d = C1C2
这样可以求出C1O的距离
C1O = d r1/(r1+r2 )
那么∠P1C1O = arccos(r1/C1O) = arccos((r1+r2 )/d)
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 = 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
网友评论