修改Adobe Animate生成的HTML5横幅响应式函数：固定宽300px，自适应高度（最小600px）

I’ve adjusted the Adobe Animate responsive function to meet your exact requirements: fixed 300px width, adaptive height with a minimum of 600px, and allowing the height to expand beyond 600px when the container has more space. Here’s the updated code:

function makeResponsive(isResp, respDim, isScale, scaleType) {
    const FIXED_WIDTH = 300;
    const MIN_HEIGHT = 600;
    let lastW = FIXED_WIDTH;
    let lastH, lastS = 1;
    
    // Get your canvas and its parent container (adjust canvas ID if yours is different)
    const canvas = document.getElementById("canvas");
    const container = canvas.parentNode;

    window.addEventListener('resize', resizeCanvas);
    resizeCanvas();

    function resizeCanvas() {
        // Lock width to our fixed 300px value
        const targetWidth = FIXED_WIDTH;
        // Set height to the larger of our minimum or the container's available height
        const targetHeight = Math.max(MIN_HEIGHT, container.clientHeight);

        if (isScale) {
            // Calculate scale factor based on height (since width is fixed)
            let scale = targetHeight / lib.properHeight;
            // Ensure we never scale below what's needed to fit the minimum height
            scale = Math.max(scale, MIN_HEIGHT / lib.properHeight);

            // Update canvas dimensions to match our target values
            canvas.width = targetWidth;
            canvas.height = targetHeight;

            // Apply scaling to the main content container (Animate's exportRoot)
            exportRoot.scaleX = exportRoot.scaleY = scale;
            // Center content horizontally (adjust to 0 if you want left-aligned)
            exportRoot.x = (canvas.width - lib.properWidth * scale) / 2;
            // Align content to the top (change to (canvas.height - lib.properHeight * scale)/2 for vertical center)
            exportRoot.y = 0;
        } else {
            // If scaling is disabled, just set canvas dimensions directly
            canvas.width = targetWidth;
            canvas.height = targetHeight;
            exportRoot.x = exportRoot.y = 0;
        }

        lastW = targetWidth;
        lastH = targetHeight;
        lastS = exportRoot.scaleX;
    }
}

Key Changes Breakdown: #

• Fixed Width Lock: The width is hardcoded to 300px and never modified during resizing, so your banner stays consistent horizontally.
• Adaptive Height Logic: Using Math.max(MIN_HEIGHT, container.clientHeight) ensures the banner is never shorter than 600px, but will automatically expand to fit taller containers.
• Scaling Adjustments: If scaling is enabled, we calculate the scale based on height (since width is fixed) to keep your content proportional. We also ensure the scale never drops below what’s needed to fit the minimum height.
• Positioning Control: The content is centered horizontally and aligned to the top by default—tweak the exportRoot.y value if you prefer vertical centering instead.

Quick Notes: #

• Double-check your canvas element’s ID (Animate uses "canvas" by default, but adjust if yours is different).
• lib.properHeight refers to your banner’s original height in Adobe Animate—this should match the value set in your project settings.

内容的提问来源于stack exchange，提问作者Veronika Bekish