-1

我在整个网络上进行了广泛的搜索,认为有人可能有类似的需求,但没有得到满足。我需要创建一个计算器,它将根据宽度和高度字段(以英尺为单位)调整可拖动对象的舞台大小。

我需要保持最大宽度和高度,理想情况下,将其设置在变量中以便于修改。这个最大宽度和高度将以像素为单位设置。我想我会在“data-”属性中设置舞台上可拖动项目的尺寸。我不希望在屏幕分辨率方面进行匹配。

解决这个问题的最佳方法是什么?我在数学上相当平庸,并且无法创建像这样缩放对象及其容器的阶段所需的函数。

我是一个熟练的 jQuery 用户,所以如果在此使用 jQuery 是有意义的,那就太好了。提前致谢。

4

1 回答 1

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/

于 2013-10-30T22:10:05.787 回答