1

Zynga Scrollerをアプリに実装しようとしていますが、接続する方法がわかりません。

Kinetic.JS を使用してキャンバスを作成し、javascript で四角形で塗りつぶします。

    <div data-role="page">
    <div data-role="content">
        <div id="container">
        </div>
    </div>
</div>


$( window ).on( "pageinit", function ( event ) {
drawStage();} );

function drawStage() {
    var stage = new Kinetic.Stage( {
        container: 'container',
        width: 500,
        height: 500,
        draggable: true
    } );

var layer = new Kinetic.Layer();
var rectRed = new Kinetic.Rect( {
    x: 100,
    y: 100,
    width: 100,
    height: 100,
    fill: 'red'
} );

var rectBlue = new Kinetic.Rect( {
    x: 200,
    y: 200,
    width: 100,
    height: 100,
    fill: 'blue'
} );

layer.add( rectRed );
layer.add( rectBlue );
stage.add( layer );}

キャンバスには大きな地図が表示されます。これにより、ユーザーはズームインとズームアウトを行うことができますが、画像をパンしてさまざまな領域を見ることもできます。

http://jsfiddle.net/z3MHz/

4

1 に答える 1

1

Zynga Canvas のデモを確認しましたか?

いくつかの便利なリンク:

http://zynga.github.io/scroller/demo/canvas.htmlおよびこのページのソースも表示します。

http://zynga.github.io/scroller/demo/asset/ui.js

Zynga スクローラーが Canvas で動作するようです。ステージからプロパティを削除し、ui.jsdraggable: trueのコードを変更して、(ステージ内ではなく) キャンバス レベルからマップのドラッグ機能を処理するようにします。

于 2013-08-27T16:24:03.480 に答える