Javascript 变形时在画布边界内保持圆圈-paper.js

我现在正在一个网站上工作，需要变形的圆形斑点。我正在使用paper.js创建画布/圆圈，并且非常接近，但需要以下方面的帮助：

使水滴在画布上居中

确保所有路径都不会超出画布

州与州之间的平稳缓和

这是我到目前为止的代码笔

类变形圆{
建造师（el）{
this.DOM={}
this.DOM.el=el；
log（this.DOM.el）
this.radius=getBounds（this.DOM.el）.width/2；
this.color='#FBBC05'；
这个速度=100；
this.morphingPaper=新纸张.PaperScope（）；
this.morphingPaper.setup（this.DOM.el）；
}
init（）{
this.setMorphingBg（this.morphingPaper）；
}
销毁{
}
setMorphingBg（）{
设centerX=getBounds（this.DOM.el）.width/2；
设centerY=getBounds（this.DOM.el）.height/2；
this.circle=新this.morphingPaper.Path.circle(
新纸点（centerX、centerY），
这是半径）；
this.circle.rndPos=[]；
//不同颜色
this.circle.fillColor=this.color；
此.generateRndPoints（）；
这个.画（这个.变形纸）；
}
generateRndPoints（）{
//根据大小在圆上生成4个随机点
让直径=这个半径*2；
this.circle.rndPos[0]=[
这个.rndPoint（0，（0.15*直径），'x'），
此.rnd点（（0.45*直径），（0.6*直径），“y”）
]
this.circle.rndPos[1]=[
这个.rndPoint（（0.45*直径），（0.6*直径），'x'），
此.rndPoint（0，（0.15*直径），'y'）
]
this.circle.rndPos[2]=[
此.rndPoint（（0.9*直径），（1.05*直径），'x'），
此.rnd点（（0.45*直径），（0.6*直径），“y”）
]
this.circle.rndPos[3]=[
这个.rndPoint（（0.45*直径），（0.6*直径），'x'），
此.rnd点（（0.9*直径），（1.05*直径），“y”）
]
}
RND点（最小、最大、位置）{
如果（pos=='x'）{//生成一个相对于当前位置的随机点
最小+=此圆位置x-此半径；
max+=此圆位置x-此半径；
}否则{
min+=此圆位置y-此半径；
最大+=此圆位置y-此半径；
}
返回Math.random（）*（max-min）+min；
}
画（）{
this.morphingPaper.view.onFrame=（）=>{
对于（设j=0；j<4；j++）{//动画，圆的每个段/锚点
//轻松到达新的点
设dX1=（this.circle.rndPos[j][0]-this.circle.segments[j].point.x）/（this.speed）；
设dY1=（this.circle.rndPos[j][1]-this.circle.segments[j].point.y）/（this.speed）；
此.circle.segments[j].点.x+=dX1；
此.circle.segments[j].点.y+=dY1；
if（Math.floor（this.circle.segments[j].point.x）==Math.floor（this.circle.rndPos[j][0]））{
此.generateRndPoints（）；
}
}
};
这是.morphingPaper.view.draw（）；
}
}
常量getBounds=（el）=>el.getBoundingClientRect（）；
让morphincycle=newmorphingcircle（document.querySelector（'canvas'）；
morphCircle.init（）

您可以在每次更新结束时设置圆在视图中心的位置：

circle.position=view.bounds.center

甚至更好，用于确保圆不超出视图：

circle.fitBounds（view.bounds.expand（-50））对于简化，有很好的库，但您也可以自己编写数学：您可以在每次更新结束时在视图中心设置圆的位置：
circle.position=view.bounds.center
甚至更好，用于确保圆不超出视图：
circle.fitBounds（view.bounds.expand（-50））对于简化，有很好的库，但您也可以自己编写数学：
class MorphingCircle {
  constructor(el) {
    this.DOM = {}
    this.DOM.el = el;
    
    console.log(this.DOM.el)

    this.radius = getBounds(this.DOM.el).width / 2;
    this.color = '#FBBC05';
    this.speed = 100;
    this.morphingPaper = new paper.PaperScope();
    this.morphingPaper.setup(this.DOM.el);
  }

  init() {
    this.setMorphingBg(this.morphingPaper);
  }

  destroy() {

  }

  setMorphingBg() {
    let centerX = getBounds(this.DOM.el).width / 2;
    let centerY = getBounds(this.DOM.el).height / 2;

    this.circle = new this.morphingPaper.Path.Circle(
      new paper.Point( centerX, centerY ),
    this.radius);
    this.circle.rndPos = [];

    //different colors
    this.circle.fillColor = this.color;

    this.generateRndPoints();
    this.draw(this.morphingPaper);
  }

  generateRndPoints() {
    //generate 4 random points on the circle depending on the size
    let diameter = this.radius * 2;

    this.circle.rndPos[0] = [
      this.rndPoint(0, (0.15 * diameter), 'x'),
      this.rndPoint((0.45 * diameter), (0.6 * diameter), 'y')
    ]

    this.circle.rndPos[1] = [
      this.rndPoint((0.45 * diameter), (0.6 * diameter), 'x'),
      this.rndPoint(0, (0.15 * diameter), 'y')
    ]

    this.circle.rndPos[2] = [
      this.rndPoint((0.9 * diameter), (1.05 * diameter), 'x'),
      this.rndPoint((0.45 * diameter), (0.6 * diameter), 'y')
    ]

    this.circle.rndPos[3] = [
      this.rndPoint((0.45 * diameter), (0.6 * diameter), 'x') ,
      this.rndPoint((0.9 * diameter), (1.05 * diameter), 'y')
    ]
  }

  rndPoint(min, max, pos) {
    if(pos === 'x') { //generate a random point relative to the current position
      min += this.circle.position.x - this.radius;
      max += this.circle.position.x - this.radius;
    } else {
      min += this.circle.position.y - this.radius;
      max += this.circle.position.y - this.radius;
    }

    return Math.random() * (max - min) + min;
  }

  draw() {
    this.morphingPaper.view.onFrame = () => {

      for (let j = 0; j < 4; j++) { //animation every segment / anchorpoint of the circle

        //ease to the new point
        let dX1 = (this.circle.rndPos[j][0] - this.circle.segments[j].point.x) / (this.speed);
        let dY1 = (this.circle.rndPos[j][1] - this.circle.segments[j].point.y) / (this.speed);

        this.circle.segments[j].point.x += dX1;
        this.circle.segments[j].point.y += dY1;

        if(Math.floor(this.circle.segments[j].point.x) === Math.floor(this.circle.rndPos[j][0])){
          this.generateRndPoints();
        }
      }

    };

    this.morphingPaper.view.draw();
  }
}

const getBounds = (el) => el.getBoundingClientRect();


let morphCircle = new MorphingCircle(document.querySelector('canvas'));
morphCircle.init()