KineticJS и Zynga Scroller

Question

Я пытаюсь внедрить Zynga Scroller в мое приложение, но я понятия не имею, как его подключить.

Im using 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);} 

холста будет иметь большую карту на нем, что shoudl позволяет пользователям увеличить ADN уменьшить масштаб, но и перемещения по изображению, чтобы посмотреть на различных областях.

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, чтобы обработать функцию перетаскивания карты с уровня холста (а не внутри сцены).