在JavaScript中将对象添加到数组中

Question

I am trying to get the mouse pointer coordinates and store them into an array(tail) such that the array is limited only to 100 objects. 我试图获取鼠标指针坐标并将其存储到array（tail）中，以使该数组仅限于100个对象。 If extra objects comes,the old one's are to be replaced with the new one's. 如果有多余的物品，则旧物品将被新物品替换。 Basically like a queue. 基本上像一个队列。 Basically i am trying to create a trail after the basic circle using a circle of smaller radius. 基本上，我正在尝试使用较小半径的圆在基本圆之后创建一条轨迹。

Here's my js: 这是我的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();
    });
  });

And here's the html: 这是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>

Output: Uncaught TypeError: Cannot call method 'push' of undefined main_kinetic.js:46 Object {x: 656, y: 175} --> console output which returns the cursor position. 输出：未捕获的TypeError：无法调用未定义main_kinetic.js的方法“ push”：46对象{x：656，y：175}->控制台输出，该输出返回光标位置。

Here's the fiddle: http://jsfiddle.net/BVeTH/ 这是小提琴： http : //jsfiddle.net/BVeTH/

Answer 1

You could create your own container for your data points that handles only keeping 100 (or however many you want). 您可以为自己的数据点创建自己的容器，该容器只能处理100个（或任意数量）。 Something like this: 像这样：

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

(see here: http://jsfiddle.net/Frm27/4/ ) （请参阅此处： http : //jsfiddle.net/Frm27/4/ ）

Then you can track your datapoints easily: 然后，您可以轻松跟踪数据点：

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();
});

Answer 2

Unless you reassign it somewhere I am not seeing tail is not an array. 除非您在某个地方重新分配它，否则我不会看到tail不是数组。

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

If you wanted to store objects with x and y coordinates in it you would need 如果要存储带有x和y坐标的对象，则需要

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

在JavaScript中将对象添加到数组中

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-01-22 14:03:34

解决方案2
0 2014-01-22 12:58:24

在JavaScript中将对象添加到数组中

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-01-22 14:03:34

解决方案2 0 2014-01-22 12:58:24

解决方案1
1 已采纳 2014-01-22 14:03:34

解决方案2
0 2014-01-22 12:58:24