使用CSS调整画布的大小可以歪曲鼠标动作 [英] Resizing the canvas with CSS skews up mouse action
本文介绍了使用CSS调整画布的大小可以歪曲鼠标动作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
所以我有这个小提琴完全解释了我的问题。
So I have this fiddle which totally explains my issue.
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();
推荐答案
您可以将canvas的大小与CSS进行比较, 。
You can compare the size of the canvas to the CSS and make the necessary adjustments.
例如
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;
这篇关于使用CSS调整画布的大小可以歪曲鼠标动作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文