2013-05-01 106 views
0

因此,我試圖儘可能簡化我的代碼,基本上創建了兩個階段,兩個可拖動圖層,每個圖層都帶有一個圖像。 (我試圖創建一個的jsfiddle但似乎可拖動根本不工作都在那裏)當你按下將一個圖像(平移)放在另一個圖像(平移)上時動力學中斷

<html> 

<body> 
    <div id="view1" style="float:left;"></div> 
    <div style="float:left;">--</div> 
    <div id="view2" style="float:left;"></div> 
</body> 

<script type='text/javascript' src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.3.min.js"></script> 

<script> 

for (var i = 0; i < 2; i++) { 
    var divName = 'view' + (i + 1); 

    var stage = new Kinetic.Stage({ 
     container: divName, 
     width: 200, 
     height: 200 
    }); 

    var kineticLayer = new Kinetic.Layer(); 
    kineticLayer.setDraggable("draggable"); 
    stage.add(kineticLayer); 

    var image = new Image(); 
    image.onload = imageOnLoad; 
    image.kineticLayer=kineticLayer; 

    image.src = 'http://2.bp.blogspot.com/-lwBsEScRW_U/T-Hwz0-CVGI/AAAAAAAAKjY/2RC9pFcXRsE/s1600/Muppets.JPG'; 
} 


function imageOnLoad() { 
    this.kineticLayer.removeChildren(); 

    var kineticImage = new Kinetic.Image({ 
     image: this 
    }); 

    this.kineticLayer.add(kineticImage); 
    this.kineticLayer.draw(); 
} 

</script> 

</html> 

,並保存圖像上,並在其周圍平移確定移動它,但是當你移動光標在其他圖像的頂部(同時按住),與錯誤的動能突破「遺漏的類型錯誤:無法讀取屬性‘X’的未定義」

編輯:的jsfiddle jsfiddle.net/LFeDg/ THX到EliteOctagon

編輯:這個'錯誤'只會發生在鉻開發工具打開!

我需要平移操作來保持工作狀態,只要光標保持在任意位置(我不需要在這種情況下拖放),我該如何解決這個問題?這是一個動力學錯誤?

謝謝!

+0

貌似錯誤。我認爲kineticjs在舞臺之外運作不佳。 – lavrton 2013-05-01 02:59:30

回答

0

這裏是你發佈的代碼的的jsfiddle:http://jsfiddle.net/LFeDg/

你不必在開頭所描述的內容。你有兩個階段,每個階段都有一個圖層和圖像。

嘗試編寫沒有循環結構和使用不同版本的kineticjs的代碼。像:

stage1 = new Kinetic.Stage(); 
stage2 = new Kinetic.Stage(); 

+0

嗨,感謝您的回答和JSfiddle! 好吧,有趣的是,使用你的小提琴我意識到這個問題只發生在你打開chrome開發工具的時候,那麼當我寫在我的msg中時,雖然你可以恢復它,但它會中斷。爲什麼會發生?這又是一個動力學錯誤還是我做錯了什麼? – kofifus 2013-05-02 00:18:28

+0

你也是對的,我有兩個階段沒有一個。你可以請評論,如果這是正確的方式來實現我想要的東西(幾個圖像顯示每個都有能力在它的圖層中移動)? 謝謝! – kofifus 2013-05-02 00:20:19