KineticJS和Zynga Scroller

Question

我正在尝试将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 );}

Canvas将会有一个大的地图，它可以让用户放大和缩小，但也可以平移图像以查看不同的区域。

http://jsfiddle.net/z3MHz/

Answer 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 中的代码以处理画布级别的地图拖动功能（而不是阶段）。