javascript - 创建唯一变量

Question

我的 Javascript 基础不是最强的，我很好奇其他人会如何应对我为自己创造的当前挑战。

我在玩 paper.js

以下代码创建了这个

眼睛对鼠标事件的 react 方式与此处的眼睛相同(从该代码中学习)— www.arc.id.au/XEyes.html

这是我所拥有的:

// Eye position center
eCntrX = 100
eCntrY = 100

var topLid = new Path()
topLid.add(new Point(eCntrX - 60, eCntrY))
topLid.add(new Point(eCntrX, eCntrY - 28))
topLid.add(new Point(eCntrX + 60, eCntrY))
topLid.add(new Point(eCntrX, eCntrY + 28))

topLid.strokeWidth = '6'
topLid.strokeColor = '#000'
topLid.closed = true
topLid.smooth()

var iris = new Path.Circle(eCntrX, eCntrY, 24)
iris.fillColor = '#6CE0FF'
iris.strokeWidth = '6'
iris.strokeColor = '#000'

var pupil = new Path.Circle(eCntrX, eCntrY, 15)
pupil.fillColor = '#000'

var glint = new Path.Circle(eCntrX, eCntrY, 5)
glint.fillColor = '#fff'
glint.position = new Point(eCntrX + 6, eCntrY - 6)

var ball = new Group([iris, pupil, glint])


function onMouseMove(event) {

  // Cursor position
  var csrX = event.point.x
  var csrY = event.point.y

  // Ball position
  var ballX = ball.position.x
  var ballY = ball.position.y

  // Displacement
  var dx = csrX - ballX
  var dy = csrY - ballY

  //Radius
  var r = 5

  //Pythagerous thereom calcs. R
  var R = Math.sqrt(dx*dx+dy*dy)

  x = dx*r/R
  y = dy*r/R

  ball.position = new Point(eCntrX + x, eCntrY + y)

  // console.log('x:' + x + 'y:' + y)

}

我希望用眼睛填满整个页面。我的最终目标是创建这样的东西:

我的问题是，创建多只可交互眼睛的最佳方法是什么。

我一直在玩“for”，但 onMouseMove 函数只适用于最后创建的 Eye。

也一直在看 paperjs item.clone — paperjs.org/reference/item#clone

还是我需要为每只眼睛创建独特的变量？

这是请求的带有 for 的代码:

for(var i = 0; i < 10; i++){

  // Eye position center
  // 100, 300, 500, 600
  eCntrX = 100 * i + 100
  eCntrY = 100

  var topLid = new Path()
  topLid.add(new Point(eCntrX - 60, eCntrY))
  topLid.add(new Point(eCntrX, eCntrY - 28))
  topLid.add(new Point(eCntrX + 60, eCntrY))
  topLid.add(new Point(eCntrX, eCntrY + 28))

  topLid.strokeWidth = '6'
  topLid.strokeColor = '#000'
  topLid.closed = true
  topLid.smooth()

  var iris = new Path.Circle(eCntrX, eCntrY, 24)
  iris.fillColor = '#6CE0FF'
  iris.strokeWidth = '6'
  iris.strokeColor = '#000'

  var pupil = new Path.Circle(eCntrX, eCntrY, 15)
  pupil.fillColor = '#000'

  var glint = new Path.Circle(eCntrX, eCntrY, 5)
  glint.fillColor = '#fff'
  glint.position = new Point(eCntrX + 6, eCntrY - 6)

  var ball = new Group([iris, pupil, glint])

}

function onMouseMove(event) {

    // Cursor position
    var csrX = event.point.x
    var csrY = event.point.y

    // Ball position
    var ballX = ball.position.x
    var ballY = ball.position.y

    // Displacement
    var dx = csrX - ballX
    var dy = csrY - ballY

    //Radius
    var r = 5

    //Pythagerous thereom calcs. R
    var R = Math.sqrt(dx*dx+dy*dy)

    x = dx*r/R
    y = dy*r/R

    ball.position = new Point(eCntrX + x, eCntrY + y)

    console.log('x:' + x + 'y:' + y)

}

Answer 1

您需要创建一个包含所有眼睛的变量，然后在您的 mousemove 事件中循环遍历该变量中的元素并应用逻辑依次定位每个眼睛。

var eyeballs = [];
for (...) {
   .... 
   //var ball = new Group([iris, pupil, glint])
   eyeballs.push(new Group([iris, pupil, glint]));
}

function onMouseMove(event) {
    for (var i = 0, len = eyeballs.length; i < len; i++) {
        var ball = eyeballs[i];
        ...
        ball.position = new Point(eCntrX + x, eCntrY + y);
    }
}