【懒人精灵】全分辨率脚本开发之矩形缩放转换

需求

旧的屏幕分辨率为1080×2400，矩形左顶右底为[752, 20, 943, 258]，将矩形转换为新的分辨率720×1900下的矩形。

实现

要将矩形从旧的分辨率（1080×2400）转换为新的分辨率（720×1900），我们需要进行坐标缩放。
具体来说，需要按照比例将矩形的坐标从旧分辨率转换到新分辨率。

计算步骤：

1. 矩形的左上角坐标：左上角坐标为 [x1, y1]。
2. 矩形的右下角坐标：右下角坐标为 [x2, y2]。

缩放比例：

• 宽度比例：新分辨率的宽度（720）与旧分辨率的宽度（1080）之比。

• 高度比例：新分辨率的高度（1900）与旧分辨率的高度（2400）之比。

计算过程：

• 旧分辨率的宽度：1080，新的宽度：720
• 旧分辨率的高度：2400，新的高度：1900

比例：

• 宽度比例： 720 / 1080 = 2/3 ≈ 0.6667
• 高度比例： 1900 / 2400 = 19/24 ≈ 0.7917

对于左上角和右下角坐标：

• x1 = 752，y1 = 20
• x2 = 943，y2 = 258

进行缩放并取整：

• new_x1 = Math.floor(752 * 720 / 1080) = Math.floor(752 * 0.6667) = Math.floor(501.333) = 501
• new_y1 = Math.floor(20 * 1900 / 2400) = Math.floor(20 * 0.7917) = Math.floor(15.834) = 15
• new_x2 = Math.floor(943 * 720 / 1080) = Math.floor(943 * 0.6667) = Math.floor(628.667) = 628
• new_y2 = Math.floor(258 * 1900 / 2400) = Math.floor(258 * 0.7917) = Math.floor(204.5) = 204

计算新的宽度和高度：

• new_width = 628 - 501 = 127
• new_height = 204 - 15 = 189

最终结果：

转换后的矩形为：[501, 15, 127, 189]

lua代码实例

-- 定义转换矩形函数
function convertRect(oldRect, oldWidth, oldHeight, newWidth, newHeight)
    -- 解构原始矩形坐标
    local x1, y1, x2, y2 = unpack(oldRect)

    -- 计算缩放比例
    local scaleX = newWidth / oldWidth
    local scaleY = newHeight / oldHeight

    -- 计算新的矩形坐标并取整
    local new_x1 = math.floor(x1 * scaleX)
    local new_y1 = math.floor(y1 * scaleY)
    local new_x2 = math.floor(x2 * scaleX)
    local new_y2 = math.floor(y2 * scaleY)

    -- 计算新的宽度和高度
    local new_width = new_x2 - new_x1
    local new_height = new_y2 - new_y1

    -- 返回转换后的矩形
    return new_x1, new_y1, new_x2, new_y2
end

-- 示例输入：原始矩形和分辨率
local oldRect = {752, 20, 943, 258}
local oldWidth = 1080
local oldHeight = 2400
local newWidth = 720
local newHeight = 1900

-- 调用函数进行转换
local new_x1, new_y1, new_width, new_height = convertRect(oldRect, oldWidth, oldHeight, newWidth, newHeight)

-- 输出转换后的结果
print("新矩形坐标：", new_x1, new_y1, new_width, new_height)

JavaScript代码示例：

function convertRect(oldRect, oldWidth, oldHeight, newWidth, newHeight) {
    const [x1, y1, x2, y2] = oldRect;

    const scaleX = newWidth / oldWidth;
    const scaleY = newHeight / oldHeight;

    const new_x1 = Math.floor(x1 * scaleX);
    const new_y1 = Math.floor(y1 * scaleY);
    const new_x2 = Math.floor(x2 * scaleX);
    const new_y2 = Math.floor(y2 * scaleY);

    const new_width = new_x2 - new_x1;
    const new_height = new_y2 - new_y1;

    return [new_x1, new_y1, new_x2, new_y2];
}

// 原始矩形和分辨率
const oldRect = [752, 20, 943, 258];
const oldWidth = 1080;
const oldHeight = 2400;
const newWidth = 720;
const newHeight = 1900;

const newRect = convertRect(oldRect, oldWidth, oldHeight, newWidth, newHeight);
console.log(newRect);  // 输出：[501, 15, 127, 189]

解释：

• 原矩形 [752, 20, 943, 258] 被转换为新分辨率 [720, 1900] 下的 [501, 15, 127, 189]。
• 通过缩放坐标系进行转换，保证了坐标是整数，并且矩形的形状在新分辨率下保持相对一致。