2

この質問がすでに出されている場合は申し訳ありませんが、私はそれを見つけることができませんでした。

私は最終的に約400-500の長方形を20-30ピクセルの高さ/幅で表示するはずのキャンバスを持っています。それらのそれぞれは、選択された動作の種類を作成するために、マウスの上で1ピクセルを上下に移動し、マウスを外に戻す必要があります。現在、私のコードは少量の図形でうまく機能しますが、そのうちの500の場合、コードは劇的に遅くなり始めます。インターネット上のいくつかの例から、「アニメーションレイヤー」を作成し、そこでアニメーション化する必要のあるオブジェクトを移動できることがわかりました。ただし、移動したアイテムを以前の位置から削除するには、メインレイヤーを再描画する必要があります...コードは次のとおりです。

var seatMap = {};

seatMap.seatTypes = {
    economy: {
        width: 20,
        height: 20,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4,
        cornerRadius: 5
    },
    business: {
        width: 22,
        height: 22,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4,
        cornerRadius: 5
    },
    first: {
        width: 25,
        height: 25,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4,
        cornerRadius: 5
    }
};

seatMap.Map = function (params) {
    var stage = new Kinetic.Stage({
        container: params.container,
        width: params.width,
        height: params.height
    });

    var mainLayer = new Kinetic.Layer();
    var animationLayer = new Kinetic.Layer();

    stage.add(mainLayer);
    stage.add(animationLayer);

    var addSeat = function (object) {
        object.seat.mainLayerRef = mainLayer;
        object.seat.animationLayerRef = animationLayer;

        mainLayer.add(object.seat);
    };

    var refresh = function () {
        mainLayer.draw();
    }

    return {
        refresh: refresh,
        addSeat: addSeat
    }
}

seatMap.Seat = function (params) {

    var seatType = params.seatType == null ? seatMap.seatTypes.economy : params.seatType;

    var seat = new Kinetic.Rect({
        width: seatType.width,
        height: seatType.height,
        x: params.x,
        y: params.y,
        fill: seatType.fill,
        stroke: seatType.stroke,
        strokewidth: seatType.strokewidth,
        cornerRadius: seatType.cornerRadius,
        listening: true
    });
    seat.staticXPosition = params.x;
    seat.staticYPosition = params.y;

    seat.on('mouseover', function (event) {
        event.shape.moveTo(event.shape.animationLayerRef);
        event.shape.setX(event.shape.staticXPosition - 2);
        event.shape.setY(event.shape.staticYPosition - 2);
        event.shape.animationLayerRef.draw();
        event.shape.mainLayerRef.draw();
    });
    seat.on('mouseout', function (event) {
        event.shape.setX(event.shape.staticXPosition);
        event.shape.setY(event.shape.staticYPosition);
        event.shape.moveTo(event.shape.mainLayerRef);
        event.shape.animationLayerRef.draw();
        event.shape.mainLayerRef.draw();
    });

    return {
        seat: seat,
    }
}

そして、キャンバスをレンダリングするコード：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="scripts/jquery-1.8.0.js"></script>
    <script type="text/javascript" src="scripts/kinetic-v3.10.5.min.js"></script>
    <script type="text/javascript" src="scripts/local/seatMapKineticExtender.js"></script>
    <!--<script type="text/javascript" src="scripts/local/app.js"></script>-->
    <script>
        $(function () {
            var map = new seatMap.Map({
                container: 'stage',
                width: 1000,
                height: 420
            });

            for (var i = 0; i < 800; i += 30) {
                for (var j = 0; j < 500; j+=30) {
                    var seat = new seatMap.Seat({
                        seatType: seatMap.seatTypes.business,
                        x: i,
                        y: j
                    });
                    map.addSeat(seat);
                }
            }
            //var seat = new seatMap.Seat({
            //    seatType: seatMap.seatTypes.business,
            //    x: 200,
            //    y: 200
            //});

            //map.addSeat(seat);
            map.refresh();
        });
    </script>
</head>
<body>
    <div id="stage" style="width: 1000px; height: 420px; margin: 0 auto; border: 1px solid black; position: relative">
        <div style="position: absolute; top: 0; z-index: 1000">
            <button id="zoomIn" type="button">Zoom In</button>
            <button id="zoomOut" type="button">Zoom Out</button>
        </div>

    </div>
</body>
</html>

私はここで何か非常に悪いことをしているように感じますが、残念ながら私はkineticjsに十分に精通していません。誰かが私を正しい方向に向けることができますか？

よろしくお願いします、ダニー

4

3 に答える 3

4

KineticJS v4.0.0をチェックしてください。イベント検出エンジンが書き直され、数十万の形状がある場合でも瞬時にヒット検出が行われます。

http://kineticjs.com/

于 2012-08-25T01:57:05.987 に答える
2

さて、これは良い挑戦でした。問題はシェイプイベントにあると思いましたが、改善はこれまでになく小さかったです。

KineticJSのイベントは、現在のマウス座標と一致するまでモデルの座標を検索することにより、特定の画面形状に適用されます。したがって、レイヤーを1つだけにすることで、検索する配列のサイズを増やします。

修正は、多くのレイヤーを使用することです。すべての行にレイヤーを追加しました。

以下のコードの他の変更のいくつかは次のとおりです。

  1. レイヤー間で図形を移動しないでください。配列のスプライスとインデックスのシフトが発生します。
  2. 小さなシフトmove(x,y)の方法ではなく、相対的な方法を使用します。setX() setY()
  3. チュートリアルで読んだアニメーションレイヤーの概念は、時間指定されたフレーム間隔で実際のアニメーションを実行するために使用されます。イベントで通常の形の動きをしているだけです。
  4. マイナーなJSの改善。プライベートデータとメソッドを非表示にするためにオブジェクトを返す場合は、オブジェクトの作成に使用しないでくださいnew。

ページ 

<script>
    $(function () {
        var map = seatMap.Map({
            container: 'stage',
            width: 1000,
            height: 420
        });

        for (var i = 0; i < 800; i += 30) {
            var layer = map.createLayer();
            for (var j = 0; j < 500; j+=30) {
                var seat = seatMap.Seat({
                    seatType: seatMap.seatTypes.business,
                    x: i,
                    y: j
                });
                map.addSeat(seat, layer);
            }
            layer.draw();
        }
        //var seat = new seatMap.Seat({
        //    seatType: seatMap.seatTypes.business,
        //    x: 200,
        //    y: 200
        //});

        //map.addSeat(seat);
        map.refresh();
    });
</script>

コード 

seatMap.Map = function (params) {
var stage = new Kinetic.Stage({
    container: params.container,
    width: params.width,
    height: params.height
});

var addSeat = function (object, layer) {
    object.seat.layer = layer;
    layer.add(object.seat);     
};

var refresh = function () {
    mainLayer.draw();
};

var createLayer = function() {
    var layer = new Kinetic.Layer();
    stage.add(layer);
    return layer;
};
return {
    createLayer : createLayer,
    refresh: refresh,
    addSeat: addSeat
};
}

seatMap.Seat = function (params) {

var seatType = params.seatType == null ? seatMap.seatTypes.economy : params.seatType;

var seat = new Kinetic.Rect({
    width: seatType.width,
    height: seatType.height,
    x: params.x,
    y: params.y,
    fill: seatType.fill,
    stroke: seatType.stroke,
    strokewidth: seatType.strokewidth,
    cornerRadius: seatType.cornerRadius,
    listening: true
});
seat.staticXPosition = params.x;
seat.staticYPosition = params.y;

seat.on('mouseover', function (event) {
    event.shape.move(-3,-3);
    event.shape.layer.draw();
});
seat.on('mouseout', function (event) {

    event.shape.move(3,3);
    event.shape.layer.draw();
});

return {
    seat: seat,
};
}
于 2012-08-23T00:40:55.757 に答える
1

500の形を描くことはそれをします。もちろん、パフォーマンスはコンピューターの速度、ブラウザーにも依存します（Chromeは現在最速ですが、明らかにすべてのブラウザーで許容できるパフォーマンスが必要です）。

パフォーマンスとそれを改善する方法については、このリンクを確認してください。

于 2012-08-22T21:32:32.760 に答える