2013-05-28 105 views
0

我已經搜索了一些解決方案並嘗試實現它們,但其中一些不起作用,其中一些對我來說很複雜。我試圖實施一些解決方案,導致失敗。在socket.io中繪製數據

我是一個newby在這裏,並希望學習如何實現socket.io與paper.js上最簡單的例子可能。複雜的東西只是讓我困惑。我會在這裏寫我的示例代碼。

客戶端:

<!DOCTYPE html> 
<html> 
<head> 
<!-- Load the Paper.js library --> 
<script src="http://localhost:3000/socket.io/socket.io.js"></script> 
<script type="text/javascript" src="paper.js"></script> 
</head> 
<body> 
<!-- Define inlined JavaScript --> 
<script type="text/paperscript" canvas="Canv"> 
var socket = io.connect('http://localhost:3000'); 

var scope = new paper.PaperScope(); 
scope.setup(Canv); 



var path; 


    function onMouseDown(event) { 
     path = new Path(); 
     path.strokeColor = 'black'; 
     path.add(event.point); 

} 


    onMouseDrag = function(event) { 
     path.add(event.point); 


    } 



</script> 



    <canvas id="Canv" width="900" height="500" 
    style="position:absolute;top:10%;left:13%;border:1px solid;"> 
       </canvas>  
</body> 
</html> 

和服務器端:

var io = require('socket.io'), 
connect = require('connect'); 

var app = connect().use(connect.static('public')).listen(3000); 
var socket = io.listen(app); 

請完善它,所以它會發送繪製座標......我看了很多教程,但並沒有得到它。

回答