Redimensionner le canevas avec CSS redresse l'action de la souris

Question

J'ai donc ce violon qui explique totalement mon problème.

Working fiddle

La 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

Vous pouvez comparer la taille du canevas au CSS et effectuer les ajustements nécessaires.

par ex.

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

Je ne sais pas, je comprends la question, mais essayez de réinitialiser la taille de la hauteur de la toile & largeur des attributs pour correspondre à la CSS lorsque vous redimensionnez.