用CSS调整画布倾斜鼠标动作

所以我有这个小提琴完全解释了我的问题。用CSS调整画布倾斜鼠标动作

的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

来源

2010-11-11 Shouvik

也许这小提琴的方向将HEL明白画布回应。 http://jsfiddle.net/hph4e/10/ – Shouvik 2010-11-13 05:01:07

您可以比较画布的大小和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/

来源

2010-11-13 09:15:50 arby

太棒了！这工作:) – Shouvik 2010-11-13 18:39:43

很好的答案我需要一些非常相似的东西 – austinbv 2011-04-20 16:28:22

不知道我理解这个问题，但尝试重新画布高度&宽度属性，当你调整到符合CSS的大小。

来源

2010-11-12 13:59:30

这就是我的观点......我不想这样做......我希望鼠标事件工作，即使画布的高度和宽度不匹配CSS的。 – Shouvik 2010-11-13 04:56:45

用CSS调整画布倾斜鼠标动作

回答

相关问题