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

畫布是要在其上具有較大的地圖，這shoudl允許用戶放大ADN縮小，而且還可以在圖像平移來看看不同的領域。

http://jsfiddle.net/z3MHz/

Answer 1

你是否檢查了Zynga的畫布演示？

一些有用的鏈接：

http://zynga.github.io/scroller/demo/canvas.html並查看該頁面的源代碼。

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

它看起來像Zynga的滾動工作用帆布。你想要做的是從你的舞臺上刪除draggable: true屬性，並修改ui.js的代碼，以便從畫布級別（而不是舞臺內）處理地圖拖動功能。