Question

我正在做一个自我研究的游戏。

我的目标是在鼠标指针后有一条路径。（哪个有效）但是，当我打开chrome并运行它时。在一定的高度和宽度之后，小径停留在画布上而不是被擦掉。任何人都可以帮我这个吗？

以下是它的小提琴：http://jsfiddle.net/Frm27/4/ 但是请在chrome或任何浏览器上尝试它，因为问题不在于小提琴而是浏览器！

我有以下代码：

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

$(document).ready(function() {
    var tail = new LimitedArray(50);

    var i = 0, j = 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
    });

    layer.add(player);


    // move the circle with the mouse
    stage.getContent().addEventListener('mousemove', function() {
        layer.removeChildren();
        layer.add(player);
        player.setPosition(stage.getPointerPosition());
        var obj = {
            x: stage.getPointerPosition().x,
            y: stage.getPointerPosition().y
        };

        tail.push(obj);
        var arr = [];
        tail.iterateItems(function (p) {
            arr.push(p.x, p.y);
        });
        var line = new Kinetic.Line({
        points: arr,
        stroke: 'white',
        strokeWidth: 2,
        lineCap: 'round',
        lineJoin: 'round'
      });
        layer.add(line);
        layer.draw();
    });
    stage.add(layer);
});

这是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>

和css：

html {
    color:#000;
    background:#222222;
}
a {
    cursor:pointer;
    list-style: none;
}
html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
    margin:0;
    padding:0;
}
#container {
    background:#000;
    margin:auto;
    cursor:none;
    float:left;
}

Answer 1

我正在处理的项目中遇到与您相同的问题。

我可以在Chrome 34.0.1847.116 m中重现您的问题，但不能在IE11中重现您的问题（请参阅＆＃34;问题小提琴＆＃34;）。

这似乎是KineticJS 4.5.3中的一个错误，因为迁移到KineticJS 5.1.0似乎可以修复它（参见＆＃34;固定小提琴＆＃34;）。

Problem fiddle

Fixed fiddle

var stage = new Kinetic.Stage({
    container: 'container',
    width: window.innerWidth,
    height: window.innerHeight
});

var layer = new Kinetic.Layer();

var player = new Kinetic.Circle({
    x: 20,
    y: 20,
    radius: 6,
    fill: 'cyan',
    stroke: 'black',
    draggable: true
});

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

// move the circle with the mouse
stage.getContent().addEventListener('mousemove', function() {
    player.setPosition(stage.getPointerPosition());        
    layer.draw();
});

Kinectisj：鼠标踪迹仍然存在的问题（图层问题）

1 个答案: