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 一起使用。您要做的是draggable: true从舞台中删除该属性，并修改ui.js中的代码以处理画布级别（而不是舞台内部）的地图拖动功能。

于 2013-08-27T16:24:03.480 回答