JS从圆的边缘到另一个圆边绘制一条线 [英] JS drawing a line from the edge of a circle to another circle edge
问题描述
我正在尝试从HTML5画布中的两个圆的边缘绘制一条线。所以，我知道两个圆心的坐标及其半径。
I'm trying to draw a line from the edges of the two circles in HTML5 canvas. So, I know the coordinates of the centers of two circles and their radius.
- 随机抽取的圆圈。
- 线条应该从一个圆圈的边缘移动到另一个圆圈。
请帮助！
PS对不起我的英语：）
P.S. Sorry for my english :)
更新：
我正在尝试这个，但如何知道角度？
I'm trying this, but how to know angle?
from_line_x = circle1.x + circle1.radius * Math.cos(Math.PI * angle);
from_line_y = circle1.y + cirlce1.radius * Math.sin(Math.PI * angle);
to_line_x = circle2.x - circle2.radius * Math.cos(Math.PI * angle);
to_line_y = circle2.y - circle2.radius * Math.sin(Math.PI * angle);
UPDATE2：
我想我找到了如何找到角度。但是作为随机绘制的圆，绘制的线并不总是正确的。那怎么看算法呢？
I think I found how to find the angle. But as a circle drawn randomly, the line is drawn is not always true. How then should look algorithm?
对不起我的英语。
推荐答案
这是一个可以实现你所要求的解决方案。
Here's a solution that will achieve what you've asked for.
我已经宣布了3个类以使事情更清晰易读。首先，我定义一个通用的形状类。接下来，我定义一个基本的圆类。最后，我定义了一个vec2类。您可以像我一样轻松扩展它，并添加从形状类继承的其他形状 - 即方形三角形等。
I've declared 3 'classes' to make things clearer to read. First, I define a generic shape class. Next, I define a basic circle class. Finally, I define a vec2 class. You could easily extend this as I have done, and add other shapes that inherit from the shape class - i.e square triangle, etc.
我在随机位置创建10个圆圈半径。然后我在每个圆圈和跟随它的圆圈之间画一条线。我没有打扰'环绕'的情况，所以我绘制了10个圆圈和9个线条（我没有从圆圈9画到圆圈0）
I create 10 circles at random positions and radii. I then draw a line between each circle and the one following it. I didn't bother with the 'wrap-around' case, so I draw 10 circles and 9 lines (I dont draw from circle 9 to circle 0)
我'使用了Tamura剩下的一些代码，因此熟悉了画布的尺寸和ID。
I've used some of the code Tamura left, hence the familiar dimensions and id of the canvas.
<!doctype html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e)}
window.addEventListener('load', onDocLoaded, false);
var shapeList = [];
function onDocLoaded()
{
var i, n=10;
var canvas = byId('myCanvas');
for (i=0; i<n; i++)
{
shapeList[i] = new circle_t(Math.random()*578, Math.random()*400, Math.random()*30 + 20);
shapeList[i].draw(canvas);
}
for (i=0; i<n-1; i++)
draw_line2(shapeList[i].origX, shapeList[i].origY, shapeList[i].radius, shapeList[i+1].origX, shapeList[i+1].origY, shapeList[i+1].radius);
}
var shape_t = function(x,y)
{
this.origX = (x==undefined ? 0 : x);
this.origY = (y==undefined ? 0 : y);
}
shape_t.prototype =
{
origX:0, origY:0, typeString:'shape',
setPos: function(x,y){this.x=x;this.y=y;},
setType: function(typeString){this.typeString = typeString;},
toString: function(){return this.typeString + " - " + this.origX + "," + this.origY;},
draw: function(canElem){},
};
function circle_t(x,y,radius)
{
this.origX = (x==undefined ? 0 : x);
this.origY = (y==undefined ? 0 : y);
this.radius = (radius==undefined ? 10 : radius);
this.setType("circle");
}
circle_t.prototype = new shape_t();
circle_t.prototype.constructor = circle_t;
circle_t.prototype.draw = function(canElem, color)
{
var ctx = canElem.getContext('2d');
var col = 'black';
if (color != undefined)
col = color;
drawCircle(this.origX, this.origY, this.radius, ctx, col);
}
circle_t.prototype.setRadius = function(radius)
{
if (radius != undefined)
this.radius = radius;
}
function drawCircle(x, y, radius, ctx, col)
{
ctx.save();
if (col == undefined)
col = 'black';
ctx.strokeStyle = col;
ctx.lineWidth = 1;
ctx.beginPath();
ctx.arc(x,y,radius,(Math.PI/180)*0, (Math.PI/180)*360, false);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
// define a vec2 class to make vector maths easier (simpler to read)
function vec2(x,y)
{
this.length = function()
{
return Math.sqrt((this.x * this.x) + (this.y*this.y));
}
this.normalize = function()
{
var scale = this.length();
this.x /= scale;
this.y /= scale;
}
this.x = x;
this.y = y;
}
function draw_line2(center1_x, center1_y, radius1, center2_x, center2_y, radius2)
{
var betweenVec = new vec2(center2_x - center1_x, center2_y - center1_y);
betweenVec.normalize();
var p1x = center1_x + (radius1 * betweenVec.x);
var p1y = center1_y + (radius1 * betweenVec.y);
var p2x = center2_x - (radius2 * betweenVec.x);
var p2y = center2_y - (radius2 * betweenVec.y);
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(p1x,p1y);
context.lineTo(p2x,p2y);
context.stroke();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="400"></canvas>
</body>
</html>
点击此处观看现场演示： http://jsfiddle.net/YYjYL/
See here for a live demo: http://jsfiddle.net/YYjYL/
这篇关于JS从圆的边缘到另一个圆边绘制一条线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
