0

我有一个尺寸为 w 和 h 的文档。里面有一个尺寸为 w1 和 h1 的矩形，位于坐标 x 和 y 上。

要计算 x 和 y 以使矩形始终位于我使用的文档的中心：

x = (w / 2) - (w1 / 2)
y = (h / 2) - (h1 / 2)

它有效！

但我也想动态地改变 w1 和 h1，使其始终与 w 和 h 成比例。例如，如果文档变得比矩形小，则矩形在缩小时应保持其比例。

那么，如何计算 w1 和 h1？

“文档”是 html5 画布，矩形是图像。我正在使用 JavaScript。

谢谢！

这是一个 JS Fiddle： http: //jsfiddle.net/Saturnix/TkPX5/1/ 尝试缩放窗口：矩形始终位于中心。但如果窗口变小，它不会调整大小。我错过了计算 w1 和 h1 的公式。

4

1 回答 1

1

我编写了以下代码，它应该可以实现您想要的，并且基于您在评论中提供的 jsfiddle：

var w1 = 300;
var h1 = 400;
var WPROP = w1/g.width;
var PROP = h1/w1;
g.draw = function() {       
    // DOCUMENT WIDTH AND HEIGHT
    var w = g.width;
    var h = g.height;            

    w1 = WPROP*w;
    h1 = PROP*w1;

    // RECTANGLE
    var x =  (w / 2) - (w1 / 2);
    var y = (h / 2) - (h1 / 2);

    g.ctx.fillRect(x,y,w1,h1);

}

请参阅此处以了解此代码。

于 2012-10-02T14:09:43.653 回答