2013-10-30 39 views
-1

我在整個網絡中搜索的範圍很廣,以至於有人可能有類似的需求,但已經短缺。我需要創建一個計算器,根據寬度和高度字段(以英尺爲單位)調整可拖動對象的舞臺大小。Javascript階段比例計算器

我需要保持一個最大寬度和高度,理想情況下,將其設置在一個變量中以便於修改。此最大寬度和高度將以像素爲單位設置。我想,我會在舞臺上的「數據」屬性中設置可拖動項目的尺寸。我不打算在屏幕分辨率方面進行匹配。

解決此問題的最佳方法是什麼?我在數學上相當平庸,並且能夠創建縮放對象階段和它們的容器所需的功能這樣的短小功能。

我是一個熟練的jQuery用戶,所以如果在這方面使用jQuery是有意義的,那就太棒了。提前致謝。

+0

爲什麼腳嗎?對於顯示器/屏幕來說,這看起來很奇怪。 – pete

+0

我們正在爲客戶創建一個房間配置器,客戶需要撥打房間尺寸,這反過來會影響傢俱圖形的尺寸,從他們的默認尺寸(它們都是均勻尺寸的圖形)。 – wdews

+0

好的,什麼是分配的屏幕空間來表示房間(800x600,1024x768,1600x900等)? – pete

回答

1

至少有幾種方法可按比例縮放比例。既然你會知道投影(房間)尺寸,並且至少應該知道其中一個縮放尺寸(假設你知道舞臺的寬度),則可以按比例縮放objectLengthInFeet/roomWidthInFeet * stageWidthInPixels

假設500個像素的舞臺寬度爲例,一旦你知道房間的尺寸和舞臺的寬度:

var stageWidth = 500, 
    roomWidth = parseFloat($('#width').val(), 10) || 0, // default to 0 if input is empty or not parseable to number 
    roomHeight = parseFloat($('#height').val(), 10) || 0, // default to 0 if input is empty or not parseable to number 
    setRoomDimensions = function (e) { 
     roomWidth = parseFloat($('#width').val(), 10); 
     roomHeight = parseFloat($('#height').val(), 10); 
    }, 
    feetToPixels = function feetToPixels(feet) { 
     var scaled = feet/roomWidth * stageWidth; 
     return scaled; 
    }; 

這裏有一個演示:http://jsfiddle.net/uQDnY/

+0

太棒了!這正是我所期待的。非常感謝@pete。 – wdews