1. 홈
  2. 질의 응답
  3. 자바 스크립트에서 배열에 객체 추가

자바 스크립트에서 배열에 객체 추가

2014-01-22 6 views
0

마우스 포인터 좌표를 가져 와서 배열에 100 개 객체로만 제한되도록 배열 (꼬리)에 저장하려고합니다. 여분의 물체가 오는 경우, 이전 물체는 새로운 물체로 교체되어야합니다. 기본적으로 대기열을 좋아합니다. 기본적으로 작은 반경의 원을 사용하여 기본 원 다음에 흔적을 만들려고합니다. 여기 자바 스크립트에서 배열에 객체 추가

내 JS의 : 

$(document).ready(function() { 
    var tail = { 
     x:0, 
     y:0 
    }; 
    var i = 0; 
    var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: window.innerWidth, 
     height: window.innerHeight, 
     listening: true 
    }); 
    var layer = new Kinetic.Layer({ 
     listening: true 
    }); 
    var layer = new Kinetic.Layer(); 
    var player = new Kinetic.Circle({ 
     x: 20, 
     y: 20, 
     radius: 6, 
     fill: 'cyan', 
     stroke: 'black', 
     draggable: true 
    }); 

    var pixel = new Kinetic.Circle({ 
     x: 20, 
     y: 20, 
     radius: 2, 
     width: stage.getWidth(), 
     height: stage.getHeight(), 
     fill: "white" 
    }); 

    layer.add(player); 
    stage.add(layer); 

    // move the circle with the mouse 
    stage.getContent().addEventListener('mousemove', function() { 
     player.setPosition(stage.getPointerPosition()); 
     console.log(stage.getPointerPosition()); 
     var obj = { 
      x: stage.getPointerPosition().x, 
      y: stage.getPointerPosition().y 
     } 
     tail[i].push(obj); 
     ++i; 
     console.log(tail[i]); 
//  pixel.setPosition(tail[i], tail[i + 1]); 
     layer.draw(); 
    }); 
    });

을 그리고 여기에 HTML의 :

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Collision Detection</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <meta name="viewport" content="width=device-width"> 
     <link rel="stylesheet" href="../css/style.css"/> 
    </head> 
    <body> 
     <div id="container" style=" background:#000; margin:auto; float:left;"></div> 
     <script src="../js/jquery.min.js"></script> 
     <script src="../js/kinetic-v5.0.0.min.js"></script> 
     <script src="../js/main_kinetic.js"></script> 
    </body> 
</html>

출력 : catch되지 않은 형식 오류 : 메소드 정의되지 않은 main_kinetic.js의 '푸시'호출 할 수 없습니다 : 46 개체 {X : 656, y : 175} -> 콘솔 출력으로 커서 위치를 반환합니다. 당신이 그것을 다시 할당하지 않는 한 http://jsfiddle.net/BVeTH/

출처

2014-01-22 Nevin Madhukar K

답변

1

를 필요 필요). 이런 식으로 뭔가 :

var LimitedArray = function (upperLimit) { 
    var storage = []; 

    // default limit on length if none/invalid supplied; 
    upperLimit = +upperLimit > 0 ? upperLimit : 100; 

    this.push = function (item) { 
     storage.push(item); 
     if (storage.length > upperLimit) { 
      storage.shift(); 
     } 
     return storage.length; 
    }; 

    this.get = function (i) { 
     return storage[i]; 
    }; 

    this.iterateItems = function (iterator) { 
     var i, l = storage.length; 
     if (typeof iterator !== 'function') { return; } 
     for (i = 0; i < l; i++) { 
      iterator(storage[i]); 
     } 
    }; 
};

(여기 참조 : http://jsfiddle.net/Frm27/4/를)

그럼 당신은 쉽게 데이터 포인트를 추적 할 수 있습니다

이 
var trail = new LimitedArray(100); 

// code... 

// move the circle with the mouse 
stage.getContent().addEventListener('mousemove', function() { 
    player.setPosition(stage.getPointerPosition()); 
    console.log(stage.getPointerPosition()); 
    var obj = { 
     x: stage.getPointerPosition().x, 
     y: stage.getPointerPosition().y 
    } 
    trail.push(obj); 
    trail.iterateItems(function (item) { 
     // Do something with each item.x and item.y 
    }); 
    //  pixel.setPosition(tail[i], tail[i + 1]); 
    layer.draw(); 
});

출처

2014-01-22 14:03:34 RobH

+0

iterateItems 함수의 "item"이 객체입니까? 그리고 나는 "this.iterateItems"와 "this.get"함수를 모두 이해하지 못했습니다. js에 inbuilt get 함수가 있습니까? 및 iterateitems 함수는 논리를 설명 할 수 있습니까? 미안하지만 나는 바보 같아서 자바 스크립트를 배우고있다. –

+0

그리고 출력이있는 방식으로 작동하는 바이올린을 설정할 수 있습니까? 사촌 나는이 문제에 대해 많은 시간을 보냈다. 나의 제한된 지식으로 해결할 수없는 것 같다. –

+0

'LimitedArray'는 생성자 함수입니다 - 당신이 google에 있다면'this.get' 등을 모두 설명 할 좋은 튜토리얼을 찾아야합니다. 바이올린은 출력을 생성합니다 - 콘솔에 기록합니다. 브라우저에서 Google 브라우저 개발자 콘솔을 사용하는 방법을 알아 보려면 Google 브라우저 개발자 콘솔을 이용하십시오. – RobH

0

어딘가에 내가보고 있지 않다 꼬리가 배열이 아닌 :

는 여기에 바이올린입니다. 당신은 x와 그 안에 y 좌표와 개체를 저장하고 싶다면

var tail = { 
    x:null, 
    y:0 
};

당신은 당신은 단지 100을 유지 (또는 그러나 당신이 많은 핸들 데이터 포인트를 자신의 용기를 만들 수

var tail = [{ 
    x:null, 
    y:0 
}]; 
tail.push(...);

출처

2014-01-22 12:58:24

+0

: "catch되지 않은 형식 오류 개체 # 는 '푸시'를있는 방법이 없습니다" 내가 이것을 시도했을 때 이것은 나타났다. –

+0

꼬리 [i] .push (obj)가 아닌 tail.push (obj)를 수행해야합니다. 후자는 위치 i에서 배열로 푸시하지 않습니다. 위치 i에서 객체를 잡고 그 객체에 밀어 넣으려고합니다. 그리고 그 객체는 배열이 아니므로 배열에 없습니다. tail.unshift (obj)를 사용하여 객체를 배열의 맨 앞으로 밀어 넣을 수도 있습니다. –

관련 문제

 관련 문제