PaperJS无法随Canvas尺寸变化正确调整绘图大小问题咨询

问题背景 #

使用PaperJS时，给Canvas添加了resize属性，同时CSS设置width: 100%; height: 100%;，绘制了依赖画布尺寸的圆形。调整面板尺寸时，Chrome开发者工具显示Canvas显示尺寸已变化，但PaperJS不会自动更新绘图，只有刷新浏览器才会显示正确比例的图形。

根本原因 #

Canvas的**显示尺寸（CSS控制）和绘图尺寸（元素的width/height属性）**是两个独立的概念：

• CSS设置的100%宽高只是改变了Canvas在页面上的显示大小，但不会自动同步到Canvas的width/height属性
• PaperJS是基于Canvas的width/height属性值来计算绘图坐标和尺寸的，因此即使显示尺寸变了，PaperJS感知不到内部尺寸的变化，也就不会重绘

解决方案 #

手动监听窗口resize事件，同步Canvas的绘图尺寸到显示尺寸，并通知PaperJS更新视图、重新绘制内容。

完整代码示例

<canvas id="mycanvas"></canvas>

#mycanvas {
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
}

// 初始化PaperJS
paper.setup('mycanvas');

const canvas = document.getElementById('mycanvas');

// 同步尺寸并重绘的函数
function handleResize() {
    const displayWidth = canvas.offsetWidth;
    const displayHeight = canvas.offsetHeight;

    // 仅当尺寸变化时才更新，避免不必要的重绘
    if (canvas.width !== displayWidth || canvas.height !== displayHeight) {
        canvas.width = displayWidth;
        canvas.height = displayHeight;
        
        // 更新PaperJS的视图尺寸
        paper.view.viewSize = new paper.Size(displayWidth, displayHeight);
        // 重新绘制图形
        drawCircle();
    }
}

// 绘制依赖画布尺寸的圆形
function drawCircle() {
    // 清除原有内容
    paper.project.clear();
    
    const center = paper.view.center;
    const radius = Math.min(paper.view.size.width, paper.view.size.height) / 3;
    const circle = new paper.Path.Circle(center, radius);
    circle.fillColor = '#2196F3';
    
    paper.view.draw();
}

// 初始化执行一次
handleResize();
// 监听窗口 resize 事件
window.addEventListener('resize', handleResize);

关键说明 #

1. 移除Canvas的resize属性：这个属性在现代浏览器中兼容性差，且无法满足同步绘图尺寸的需求，改用JS监听resize事件更可靠
2. 同步绘图尺寸：每次resize时将Canvas的width/height属性设置为其实际显示的offsetWidth和offsetHeight，确保PaperJS的绘图坐标系与显示尺寸匹配
3. 触发重绘：更新PaperJS的viewSize后，调用自定义的绘图函数重新生成图形，确保内容适配新尺寸

内容的提问来源于stack exchange，提问作者gene b.