Javascript stage scale calculator

Question

I've searched far and wide throughout the web thinking that somebody may have had a similar need, but have come short. I'm needing to create a calculator that will adjust the size of a stage for draggable objects based on a Width and Height field (in feet).

I'm needing to maintain a max width and height that would, ideally, be set in a variable for easy modification. This max width and height would be set in pixels. I would set dimensions of the draggable items on the stage in "data-" attributes, I imagine. I'm not looking to match things up in terms of screen resolutions.

What's the best way to approach this? I'm pretty mediocre at math and have come up short in being able to create the functions necessary for scaling a stage of objects and their container like this.

I'm a skilled jQuery user, so if it makes sense to make use of jQuery in this, that'd be great. Thanks in advance.

Answer 1

There are at least a couple of ways to scale things proportionately. Since you will know the projected (room) dimensions and you should know at least one of the scaled dimensions (assuming you know the width of the stage), you can scale proportionately by objectLengthInFeet / roomWidthInFeet * stageWidthInPixels.

Assuming a stage width of 500 pixels for an example, once you know the room dimensions and the width of the stage:

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;
    };

Here's a demo: http://jsfiddle.net/uQDnY/