2015-12-02 54 views
0

我試圖做一個基本的繪圖程序使用角度觸摸模塊和$刷卡服務以及html5畫布這裏是我想到它包含在一個模塊和控制器,我知道工作

this.canvas=angular.element('canvas')[0]; 
console.log(this.canvas.on) 
this.canvasCord=angular.element(this.canvas).offset(); 
var ctx=this.canvas.getContext('2d'); 
$swipe.bind(angular.element('canvas'),{start:this.startDraw,move:this.coninueDraw,end:this.continueDraw,cancel:function(event){console.log(event);}},["mouse","touch"]); 
var convertCord=function(cord){ 
    cord.x=cord.x-this.canvasCord.left; 
    cord.y=cord.y-this.canvasCord.top; 
    return cord; 
}; 
this.startDraw=function(cord,event){ 
    console.log('starting') 
    cord=convertCord(cord); 
    ctx.beginPath() 
    ctx.moveTo(cord.x,cord.y); 
    ctx.lineWidth='5'; 
}; 
this.continueDraw=function(cord,event){ 
    console.log(cord); 
    cord=convertCord(cord); 
    ctx.lineTo(cord.x,cord.y); 
    ctx.stroke(); 
}; 

我對我的畫布HTML是隻是一個基本的<canvas></canvas>

我的問題是,是$swipe.bind()的一部分時功能,當元素被觸摸或點擊從來沒有實際調用或滑動。我似乎可以開始工作的唯一回調是取消操作,我在短時間內重複地點擊或單擊畫布。我正在使用jQuery的手機,但angularjs和angularjs觸摸加載後的jQuery和jQuery的移動。有誰知道爲什麼這不工作?

回答

0

我發現我的問題是對this對象的引用,這是在$swipe將它們轉換爲普通變量而不是將其附加到此對象中進行定義之後定義的。