KineticJS 및 Zynga Scroller

Question

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

캔버스

는 사용자가 확대 ADN 축소뿐만 아니라 다른 지역에서 볼 이미지를 가로 질러 이동하는 것을 허용 shoudl 그것에 큰지도를해야 할 것입니다.

http://jsfiddle.net/z3MHz/

Answer 1

당신은 Zynga의 캔버스 데모를 확인 했습니까?

몇 가지 유용한 링크 :

http://zynga.github.io/scroller/demo/canvas.html 또한이 페이지의 소스를 볼 수 있습니다. 그것은 Zynga의 스크롤과 같은

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

는 캔버스와 함께 작동합니다. 스테이지에서 속성 draggable: true을 제거하고 ui.js에서 코드를 수정하여 스테이지 내부가 아닌 캔버스 레벨에서지도 드래그 기능을 처리합니다.