KineticJS and Zynga Scroller

Question

Im trying to implement the Zynga Scroller into my app but i have no idea how to get it connected.

Im using Kinetic.JS to create a canvas and fill it with rectangles in 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 );}

the Canvas is going to have a large map on it, which shoudl allow the users to zoom in adn zoom out, but also pan across the image to look at different areas.

http://jsfiddle.net/z3MHz/

Answer 1

Did you check the Zynga Canvas demo?

Some useful links:

http://zynga.github.io/scroller/demo/canvas.html and also view the source of this page.

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

It looks like Zynga scroller works with a Canvas. What you'll want to do is remove the property draggable: true from your stage, and modify the code from ui.js to handle the map drag functionality from the canvas level (instead of inside the stage).