在上一次的例子上加深一点点，这次我们选择动态的绑定目标点，三个目标相互转化，实现的思路是以拖拽点为目标计算出除了拖拽点以外的两个圆球的位置
以上个案例的公式，设点分别为A,B,C，当我拖拽点A时其余两个点都以A为目标点，所以会有种三角铁的感觉，但是因为我们在计算目标点之前会先计算角度，所以呈现出的是等边三角形的样子
还是老规矩，代码贴上
var canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d");
var spring=0.03;
var friction=0.95;
var springLength=100;
var targetX=targetY=0;
function Ball(x,y,radius,speed){
this.x=x;
this.y=y;
this.radius=radius;
this.vx=0;
this.vy=0;
}
var dx=dy=0;
var ball1=new Ball(Math.random()*canvas.width,Math.random()*canvas.height,10);
var ball2=new Ball(Math.random()*canvas.width,Math.random()*canvas.height,10);
var ball3=new Ball(Math.random()*canvas.width,Math.random()*canvas.height,10);
var ball1_dragging=false;
var ball2_dragging=false;
var ball3_dragging=false;
balles=[];
balles.push(ball1,ball2,ball3);
function animation(){
cxt.clearRect(0,0,canvas.width,canvas.height)
if(!ball1_dragging){
springTo(ball1,ball2);
springTo(ball1,ball3);
}
if(!ball2_dragging){
springTo(ball2,ball1);
springTo(ball2,ball3);
}
if(!ball3_dragging){
springTo(ball3,ball1);
springTo(ball3,ball2);
}
// if(ball1.x>canvas.width || ball1.x<0 || ball1.y<0 || ball1.y>canvas.height){
// ball1.x=canvas.width/2
// ball1.y=canvas.height/2
// ball2.x=canvas.width/2
// ball2.y=canvas.height/2
// ball3.x=canvas.width/2
// ball3.y=canvas.height/2
// }
balles.forEach(function(ball,i){
cxt.fillStyle="#EFEFEF"
cxt.beginPath();
cxt.arc(ball.x,ball.y,ball.radius,0,Math.PI*2,true);
cxt.fill();
})
cxt.beginPath();
cxt.strokeStyle="#fff";
cxt.moveTo(ball1.x,ball1.y);
cxt.lineTo(ball2.x,ball2.y);
cxt.lineTo(ball3.x,ball3.y);
cxt.lineTo(ball1.x,ball1.y);
cxt.stroke();
cxt.closePath();
requestAnimationFrame(animation);
}
function springTo(ballA,ballB){
dx=ballA.x-ballB.x;
dy=ballA.y-ballB.y;
var angle=Math.atan2(dy,dx);
targetX=ballB.x+Math.cos(angle)*springLength;
targetY=ballB.y+Math.sin(angle)*springLength;
ballA.vx+=(targetX-ballA.x)*spring;
ballA.vy+=(targetY-ballA.y)*spring;
ballA.vx*=friction;
ballA.vy*=friction;
ballA.x+=ballA.vx;
ballA.y+=ballA.vy;
}
function move(event){
if(ball1_dragging){
ball1.x=event.point.x;
ball1.y=event.point.y;
}
if(ball2_dragging){
ball2.x=event.point.x;
ball2.y=event.point.y;
}
if(ball3_dragging){
ball3.x=event.point.x;
ball3.y=event.point.y;
}
}
function down(event){
if(tool.isMoveRadius(event.point,ball1,ball1.radius))
ball1_dragging=true;
if(tool.isMoveRadius(event.point,ball2,ball2.radius))
ball2_dragging=true;
if(tool.isMoveRadius(event.point,ball3,ball3.radius))
ball3_dragging=true;
}
function up(event){
ball1_dragging=false;
ball2_dragging=false;
ball3_dragging=false;
}
window.onload=function(){
animation();
tool.MT(canvas,move,down,up)
}