javascript - 使用 javascript、范围输入和 css 转换的数学 : scale()

Question

我有一个宽度为 794px 的 div 和一个最大 250 最小 0 的范围输入。 我正在使用 css 变换缩放 div:scale(1)，其中 1 是当 div 实际显示为 794px 时。

但是，当浏览器窗口的宽度大于该宽度时，我希望能够进一步放大，以便当窗口为 1588 像素时，div 的值应为 scale(2)。当浏览器窗口小于 794px 时，最大值 (250) 应该代表窗口的宽度。

我已经为此尝试了几种不同的解决方案，我只发布最后一个，这样我就不会混淆任何人。

Javascript:

const baseWidth = 794;
const maxWidth = (baseWidth * 2) + 50;
const workspace = document.getElementById('workspace');
const oWidth = workspace.offsetWidth;
const rangeValue = zoomElement.target.value;
const rangeStepSizeByPixels = (oWidth - 0) / 250;
const rangeStepSizeByPercent = (rangeStepSizeByPixels / oWidth) * 100;
const trueZoom = rangeValue * this.state.rangeStepSize;

this.setState({
    ...this.state,
    actualZoom: trueZoom,
    height: (700 * trueZoom) / 100,
    width: (550 * trueZoom) / 100,
});

HTML:

<section id="infobar" class="inner-margin">
    <input type="range" step="0.4" min="0" max="250" class="zoomslider" value="250">
</section>

<section id="workspace" class="scrollable tender-edit orange-midnight-them">

    <div class="doccontainer" style="width: 794px; height: 1123px;">
        <section class="init-scale" style="transform: scale(1);">
            <div class="doc-header">
            ...
            </div>
            <div class="doc-inner">
            ...
            </div>
            <div class="doc-footer">
            ...
            </div>
        </section>
    </div>

</section>

这导致范围值 250 与设置 scale(1) 相同的情况，这不是我想要的。

Answer 1

好吧，在得到 friend 的帮助后，事实证明答案比我想象的要简单得多。

const factor = (oWidth - 50) / baseWidth;

(-50 只是为了在父元素上设置一些填充。)

有了这个数字，我就得到了倍增因子，然后我可以用它来设置我所追求的百分比值，还可以计算我的范围输入默认应该具有的值。

const rangeValue = zoomElement.target.value;
const trueZoom = (rangeValue / 250) * 100 * this.state.factor;

这是范围输入更改时我得到的值。

下面是我根据父元素的实际宽度设置默认缩放和默认范围值的计算。

const defaultDocWidth = ((oWidth - 50) * 0.5) / 2;
const newFactor = (defaultDocWidth / (oWidth - 50));
const defaultZoom = (defaultDocWidth) * newFactor;
const defaultRangeValue = (250 / 100) * defaultZoom;