計算大小比例

我有一個尺寸爲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小提琴：http://jsfiddle.net/Saturnix/TkPX5/1/ 嘗試縮放窗口：矩形始終停留在中心。但是如果窗口變小，它不會調整大小。我錯過了計算w1和h1的公式。

來源

2012-10-02 Saturnix

如果我正確理解你的話，你必須在你的代碼中的任意位置修正'w1'到'w'和'h1'到'h'的比率。你希望'w1'和'h1'與'w'和'h'成正比，但顯式因子必須由你設定。之後，您可以設置例如'w1 = myFactor * w'（其中'myFactor'的範圍是0-1），所以'w1'取決於'w'的當前值。 – halex

我還希望w1和h1之間的原始比例始終相同...... – Saturnix

將常量'var WIDTH_PROPORTION = initialWidthOfImage/initialWidthOfDocument'和'var HEIGHT_PROPORTION = initialHeightOfImage/initialHeightOfDocument'並將這兩個值作爲因子。如果您縮放文檔，則會將圖像的新寬度設置爲「newWidth = WIDTH_PROPORTION * widthOfDocument」，高度也相同。 – halex

我寫了下面的代碼，要達到你想要什麼，並根據您的意見提供的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); 

}

此代碼工作見here。

來源

2012-10-02 14:09:43 halex

計算大小比例

回答

相關問題