2013-10-30 40 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