KineticJS 移动形状答案

【问题标题】：KineticJS move shapeKineticJS 移动形状
【发布时间】：2014-06-08 03:50:24
【问题描述】：

我是 kineticjs 的新手，我正在尝试根据玩家输入制作一个圆形。事件侦听器上的警报正在触发，但圆圈没有移动。帮助？

代码如下：

   (function () {
        var stage = new Kinetic.Stage({
            container: "the-container",
            width: 800,
            height: 600,
        });
        var layer = new Kinetic.Layer();

        var playerCircle = new Kinetic.Circle({
            x: 50,
            y: 50,
            radius: 10,
            fill: "black",
        });

        var leftArrowCode = 37;
        var rightArrowCode = 39;
        var upArrowCode = 38;
        var downArrowCode = 40;

        document.addEventListener('keydown', function (event) {
            if (event.keyCode == leftArrowCode) {
                playerCircle.move({ x: -10, y: 0 });
                alert("left pressed");
            }
            if (event.keyCode == rightArrowCode) {
                playerCircle.move({ x: 10, y: 0 });
                alert("right pressed");
            }
            if (event.keyCode == upArrowCode) {
                playerCircle.move({ x: 0, y: -10 });
            }
            if (event.keyCode == downArrowCode) {
                playerCircle.move({ x: 0, y: 10 });
            }
        });

        layer.add(playerCircle);
        stage.add(layer);
    }());

【问题讨论】：

标签： kineticjs

【解决方案1】：

你需要重新绘制圆圈（注意我在事件监听器末尾添加的内容。也许可以尝试使用 transitionTo()，或者添加延迟以使其更平滑。

    document.addEventListener('keydown', function (event) {
    if (event.keyCode == leftArrowCode) {
    playerCircle.move({ x: -10, y: 0 });
    alert("left pressed");
    }
    if (event.keyCode == rightArrowCode) {
        playerCircle.move({ x: 10, y: 0 });
        alert("right pressed");
    }
    if (event.keyCode == upArrowCode) {
        playerCircle.move({ x: 0, y: -10 });
    }
    if (event.keyCode == downArrowCode) {
        playerCircle.move({ x: 0, y: 10 });
    }
    layer.add(playerCircle);
    stage.add(layer);
    return stage;
});

【讨论】：