使用 CSS 调整画布大小会使鼠标动作倾斜答案

【问题标题】：Resizing the canvas with CSS skews up mouse action使用 CSS 调整画布大小会使鼠标动作倾斜
【发布时间】：2014-06-03 18:16:05
【问题描述】：

所以我有这个完全解释了我的问题的小提琴。

Working fiddle

        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

【问题讨论】：

也许这个小提琴的方向会帮助理解画布的反应。 jsfiddle.net/hph4e/10

标签： html canvas css

【解决方案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/

【讨论】：

很好的答案我需要一些非常相似的东西

【解决方案2】：

不确定我是否理解该问题，但请尝试在调整大小时重置画布高度和宽度属性的大小以匹配 CSS。

【讨论】：

这就是我的意思...我不想那样做...即使画布的高度和宽度与 CSS 的不匹配，我也希望鼠标事件能够正常工作。