6

Javascript の私の基盤は最強ではありません。私が自分のために作成した現在の課題について、他の人がどのように対処するのか興味があります。

paper.jsで遊んでいます

次のコードはこれを作成しますスクリーンショット

目は、ここの目と同じようにマウス イベントに反応します (そのコードから学習) — 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)

}
4

2 に答える 2

4

すべての目を含む変数を作成する必要があります。次に、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);
    }
}
于 2012-10-14T00:27:16.217 に答える
2

私はPaper.jsに精通していませんが、少なくともその周りにフレームワークを構築する方法についてのアイデアを提供することができます。

基本的に、眼球工場が必要です。眼球オブジェクトを作成し、それらをあなたに投げ返すもの。だからあなたはあなたの不気味な眼球の壁にそれらを掛けることができます。

以下のコードサンプルは完全に機能するわけではありません。詳細をプラグインする必要がありますが、簡単に理解できるはずです。

var Eyeball = function(params){

    // Eye position center
    var eCntrX = params.x,
        eCntrY = params.y;

    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]);


    //listen for the current mouse coordinates and update
    document.addEventListener('mousemove', function(event){

        // Cursor position
        var csrX = event.x,
        csrY = event.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)

    },false);

}

var eye = new Eyeball({x:100,y:100}); //if you want/need to pass in parameters for new Eyeballs like color or shape or whatever, you can define them in this object then access them in 'params' inside the Eyeball constructor.

あなたの眼球壁のために多くの眼球を作るために：

for(var i=0; i<100; i++){
   var eye = new Eyeball({x: Math.floor(Math.random()*300), y: Math.floor(Math.random()*300)});
}

コードでは、onMouseMove関数はどこにも呼び出されていません。これがPaper.jsによって呼び出された名前なのか、それとも含めるのを忘れたコードが他にもあるのかはわかりません。

私のためにその最後の部分に答えることができれば、私はこれを完全な答えで更新しようとします。

アップデート

では、次のステップに進んで、眼球に耳を追加しましょう。ちなみに、これはただグロスになっています。

アイデアは、各眼球がイベントをリッスンできる必要があるオブジェクトであるということです。

paper.jsのやり方では、各mouseMoveイベントですべての眼球をループし、位置を更新する必要があります。javascriptはシングルスレッドであるため、これにより、更新のたびにユーザーインターフェイスがロックされる可能性があります（何千もの目玉を想像してください！）。

私たちがやりたいのは、各眼球オブジェクトに「mousemove」イベントを直接リッスンさせることです。このイベントから、現在のマウス位置のxプロパティとyプロパティを取得できます。これを行うには、各眼球内にイベントリスナーを追加します。各イベントはEyeballのインスタンスのコンテキスト内で実行されるため、「ball」変数はイベントごとに一意になります。更新されたサンプルコードを参照して、これがすべて機能するかどうかを知らせてください。100個の眼球がマウスを追跡しているサンプルページを見たいです。おもう...

于 2012-10-14T00:36:11.367 に答える