用CSS調整畫布傾斜鼠標動作

Question

所以我有這個小提琴完全解釋了我的問題。

Working fiddle

的JS

 var w = this.w * this.scale; 
     var h = this.h * this.scale; 
     var x = this.x - w * .5; 
     var y = this.y - h * .5; 

     //standard Canvas rotation operation 
     ctx.save(); 
     ctx.translate(this.x, this.y); 
     ctx.rotate(this.rotation * Math.PI/180); 

     ctx.fillStyle = this.fillStyle; 
     ctx.fillRect(w * -0.5, h * -0.5, w, h); 
     ctx.restore(); 

Defective fiddle

Answer 1

您可以比較畫布的大小和CSS並進行必要的調整。

例如。

var cssScale = [canvas.getSize().x/canvas.get('width'), 
       canvas.getSize().y/canvas.get('height')]; 
... 
this.setDims(x*cssScale[0], y*cssScale[1], w*cssScale[0], h*cssScale[1]); 
... 
this.x = (x - this.offset[0])/cssScale[0] + w * .5; 
this.y = (y - this.offset[1])/cssScale[1] + h * .5; 

http://jsfiddle.net/rQkSF/

Answer 2

不知道我理解這個問題，但嘗試重新畫布高度&寬度屬性，當你調整到符合CSS的大小。