Paper.js 不绘制多个形状

Question

我是 JavaScript 的新手，所以我正在寻求帮助。我正在尝试创建一个简单的太阳系模拟，它表示为围绕一个大圆圈（太阳）移动的几个小圆圈（行星）。我使用 Paper.js 创建动画。

我创建了两个 classes：Star 和 Planet。 Star class 具有绘制星星的 draw() 方法，而 Planet class 具有使行星移动的 motion() 方法。

问题是，当我创建多个对象并调用它们的 draw()/motion() 方法，然后尝试运行脚本时，我创建的最后一个对象是唯一的 drawn/animated.

例如，在这段代码中：

var sun = new Star("Sun", 400, 400, 50, '#fff250');
sun.draw();


var earth = new Planet("Earth", sun, 100, 10, 1.5, '#b6f7ff');
earth.motion();

var mars = new Planet("Mars", sun, 200, 10, 0.5, '#ff9485');
mars.motion();

mars.motion() 会工作得很好，但其他两种方法会被忽略。如果我去掉这个方法，地球就会出现等等。

完整代码如下：

function Star(name, xCoordinate, yCoordinate, radius, color) {
    this.name = name;
    this.xCoordinate = xCoordinate;
    this.yCoordinate = yCoordinate;
    this.radius = radius;
    this.color = color;


    var canvas = document.getElementById("canvas1");
    paper.setup(canvas);

    this.draw = function () {

        var circle = new paper.Path.Circle(new paper.Point(xCoordinate, yCoordinate), radius);
        circle.fillColor = color;
    }

}

function Planet(name, parentStar, distanceFromStar, radius, period, color) {
    this.name = name;
    this.parentStar = parentStar;
    this.distanceFromStar = distanceFromStar;
    this.radius = radius;
    this.period = period;
    this.color = color;

    var xCoordinate = parentStar.xCoordinate + distanceFromStar;
    var yCoordinate = parentStar.yCoordinate + distanceFromStar;

    var canvas = document.getElementById("canvas1");
    paper.setup(canvas);

    this.motion = function () {


        var circle = new paper.Path.Circle(new paper.Point(xCoordinate, yCoordinate), radius);
        circle.fillColor = color;

        paper.view.onFrame = function (event) {

            circle.position.x = parentStar.xCoordinate - distanceFromStar * Math.cos(period * event.time);
            circle.position.y = parentStar.yCoordinate - distanceFromStar * Math.sin(period * event.time);
        }

    }
}

window.onload = function() {
    var sun = new Star("Sun", 400, 400, 50, '#fff250');
    sun.draw();


    var earth = new Planet("Earth", sun, 100, 10, 1.5, '#b6f7ff');
    earth.motion();

    var mars = new Planet("Mars", sun, 200, 10, 0.5, '#ff9485');
    mars.motion();

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="paper-core.js"></script>
    <script src="solar-system.js"></script>
</head>
<body>
<canvas id="canvas1" resize="" style="user-select: none; touch-action: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" width="800" height="800" ></canvas>
</body>
</html>

我认为可能的原因是我这样做

var canvas = document.getElementById("canvas1");
paper.setup(canvas);

每次创建新对象时，我都不确定。请帮忙。提前谢谢你。

Answer 1

你对问题的假设是正确的。

每次绘制元素时，您都在设置整个 canvas。

您只需设置一次（只需从绘图方法中删除设置并将其添加到 window.onload）。

另一个问题是您将每个行星更新代码分配为 paper.view.onFrame。但它只能包含一个函数。为此，我创建了一个列表，其中包含每个行星的 update 函数，然后在 paper.view.onFrame 中我遍历数组并执行每个行星函数。

这是经过更改的代码

var planetList = [];

function Star(name, xCoordinate, yCoordinate, radius, color, canvas) {
  this.name = name;
  this.xCoordinate = xCoordinate;
  this.yCoordinate = yCoordinate;
  this.radius = radius;
  this.color = color;

  this.draw = function() {

    var circle = new paper.Path.Circle(new paper.Point(xCoordinate, yCoordinate), radius);
    circle.fillColor = color;
  }

}

function Planet(name, parentStar, distanceFromStar, radius, period, color, canvas) {
  this.name = name;
  this.parentStar = parentStar;
  this.distanceFromStar = distanceFromStar;
  this.radius = radius;
  this.period = period;
  this.color = color;

  var xCoordinate = parentStar.xCoordinate + distanceFromStar;
  var yCoordinate = parentStar.yCoordinate + distanceFromStar;

  this.motion = function() {


    var circle = new paper.Path.Circle(new paper.Point(xCoordinate, yCoordinate), radius);
    circle.fillColor = color;
    planetList.push( function(event) {

      circle.position.x = parentStar.xCoordinate - distanceFromStar * Math.cos(period * event.time);
      circle.position.y = parentStar.yCoordinate - distanceFromStar * Math.sin(period * event.time);
    });
  }
}

window.onload = function() {
  var canvas = document.getElementById("canvas1");
  paper.setup(canvas);

  var sun = new Star("Sun", 400, 400, 50, '#fff250', );
  sun.draw();


  var earth = new Planet("Earth", sun, 100, 10, 1.5, '#b6f7ff');
  earth.motion();

  var mars = new Planet("Mars", sun, 200, 10, 0.5, '#ff9485');
  mars.motion();
  
  paper.view.onFrame = function(event){
    var pLen = planetList.length,
        p;
    for (p=0;p<pLen;p++){
      planetList[p](event);
    }
  }

}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.3/paper-full.min.js"></script>
</head>

<body>
  <canvas id="canvas1" resize="" style="user-select: none; touch-action: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" width="800" height="800"></canvas>
</body>

</html>

Paper.js 不绘制多个形状

Paper.js doesn't draw multiple shapes

javascript

paperjs