Question

我正处于为混合网络/文本冒险游戏制作2D地图构建器的原型制作阶段，到目前为止，KineticJS似乎是理想的选择。目前唯一的问题是，在鼠标移动时给定足够的速度，它将跳过单元格并且永远不会触发它们的鼠标悬停事件处理程序。

2个核心功能目标：当用户突出显示一个单元格时，它将被标记为“活动”。此外，如果他们按住鼠标并在网格中移动，则会打开或关闭单元格（如果第一个单元格未激活，则可能重构为全部打开，反之亦然）。

我的问题：有没有办法确保所有细胞都被触发，无论鼠标光标速度如何？如果没有，是否有更好的方法在细胞上绘制一条线，以便它始终触发所有相关的细胞？

整个原型已被放入jsFiddle（http://jsfiddle.net/7ggS4/）但是为了将来，其余部分也将被复制到下面。

    <head>
    <title>KineticJS</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/kineticjs/4.7.2/kinetic.min.js"></script>
</head>
<body>
    <div id="canvas"></div>
</body>
<script defer="defer">


    /**
    Return's a KS layer

    */
    function Grid(cells, stage) {
        //Constants
        // Illrelevant comment - It seriously pisses me off that canvas uses
        // string color codes ( either name or string hexidecimal ) instead of taking an
        // integer or actual hexidecimal 0xFFFF values.  This just seems painfully inefficient.
        this.activeCellColor = "green";
        this.clearCellColor = "blue";
        this.highlightCellColor = "red";

        this.cells = cells,
        this.layer = new Kinetic.Layer(),
        this.grid = new Array(),
        this.isMouseDown = false,
        this.mouseLeft = false,
        this.mouseRight = false,
        this.adjRow = stage.getWidth() / cells,
        this.adjCol = stage.getHeight() / cells;
        this.generate();
        stage.add(this.layer)

    }

    Grid.prototype.generate = function(){
        var i, rx, ry, rect;

        for (i = 0; i < this.cells * this.cells; i++) {
            rx = Math.floor(i / this.cells) * this.adjRow;
            ry = (i % this.cells) * this.adjCol;

            rect = new Kinetic.Rect({
                x: rx,
                y: ry,
                width: this.adjRow,
                height: this.adjCol,
                fill: this.clearCellColor,
                stroke: 'black',
                strokeWidth: .2,
                cell: {x: Math.floor(i / this.cells), y: i % this.cells},
                active: false,
                grid: this //Just in case .bind(this) doesn't work right
            });
            rect.on('mouseenter', this.onMouseEnter.bind(this));
            rect.on('mouseleave', this.onMouseLeave.bind(this));
            rect.on('mousedown', this.onMouseDown.bind(this));
            rect.on('mouseup', this.onMouseUp.bind(this));

            this.grid.push(rect);
            this.layer.add(rect);

        }

    }

    Grid.prototype.onMouseEnter = function(evt) {
        var src = evt.targetNode;
        console.log(evt.type, this.isMouseDown, src.attrs.cell)

        if (this.isMouseDown == true) {
            src.attrs.active = ! src.attrs.active;
        }

        if (src.attrs.active == false) {
            src.setFill(this.highlightCellColor);
        } else {
            src.setFill(this.activeCellColor);
        }

        this.layer.batchDraw();
    }

    Grid.prototype.onMouseLeave = function(evt) {
        var src = evt.targetNode;
        console.log(evt.type, this.isMouseDown, src.attrs.cell)

        if (src.attrs.active == false) {
            src.setFill(this.clearCellColor);
            this.layer.batchDraw();
        }

    }

    Grid.prototype.onMouseUp = function(evt){
        var src = evt.targetNode;
        console.log(evt.type, this.isMouseDown, src.attrs.cell)
        this.isMouseDown = false;
    }

    Grid.prototype.onMouseDown = function(evt){
        var src = evt.targetNode;
        console.log(evt.type, this.isMouseDown, src.attrs.cell)
        this.isMouseDown = true;
        src.attrs.active = ! src.attrs.active;

        if (src.attrs.active) {
            src.setFill(this.activeCellColor);
        } else {
            src.setFill(this.clearCellColor);
        }
        this.layer.batchDraw();
    }



    var stage = new Kinetic.Stage({
        container: 'canvas',
        width: 600,
        height: 600
      }),

    myGrid = new Grid(50, stage);

</script>

Answer 1

50x50 = 2500个活动物体：这对于Kinetic来说太多了。

请记住，每个“智能”动力单元都有很多与之相关的开销。

如何将网格减少到20x20？

或者，您必须将鼠标处理与细胞处理分开才能获得所需的性能。

鼠标处理

您的鼠标处理只涉及将鼠标点捕获到累积点数组中。您可以使用此类代码捕获舞台上的鼠标点：

$(stage.getContent()).on('click', function (event) {
    myPointsArray.push(stage.getMousePosition());
});

单元格处理

单元格处理将涉及应用这些累积点来影响网格单元格。执行此代码的有效位置是requestAnimationFrame（RAF）循环。你不会做动画，但是RAF提供高性能，因为它知道系统资源的可用性。 RAF循环看起来像这样：

function processPointsArray(array){

    // request another loop even before we're done with this one
    requestAnimationFrame(processPointsArray);

    // process the points array and affect your cells here

}

处理效率

RAF最多每秒调用60次，因此在此期间，您的用户可能只会导航网格的一小部分。您可以通过计算累积点阵列中的最小/最大x和y坐标来提高性能，并仅处理该边界内的那些网格单元。

如何使用KineticJS避免事件的延迟？

1 个答案: