画布如何在paperJs中使用pathData方法做出响应

How canvas make responsive using pathData method in paperJs?

本文关键字：方法 pathData 响应 布如何 paperJs      更新时间：2023-09-26

方法A:-我在文档中导入了一个SVG对象，当我们重新调整窗口大小时，SVG将分别重新调整大小[查看演示]。

方法B:-但我在paperJs中导入了与pathData方法相同的对象，并重新调整了窗口的大小画布对象的大小与方式A[检查演示]中的大小不同。

我已经给出了画布大小是通过css使用的窗口的全宽，但在画布对象中无法应用响应。

canvas {
  width: 100%;
  height: 100%
}

我应该怎么做才能使画布对象具有响应性？如有帮助，不胜感激。

终于找到了解决方案。

我使用了他们自己的选项fitBounds，这是我喜欢的paperJs中最好的选项之一。我在这里也分享了我的另一个解决方案。我希望它能对你有所帮助：）。

解决方案1:使用fitBounds选项

window.addEventListener("resize", myFunction);
myFunction();
function myFunction() {    
    path.fitBounds(view.bounds);
}

FIDDLE

解决方案2:与尺寸计算一起使用

window.addEventListener("resize", myFunction);
myFunction();
function myFunction() {    
    redrawCanvas();
}
function redrawCanvas(){
    var linePropWidth = view.bounds.width, //2000 is actual width proportion
        lineProHeight = linePropWidth / 6.5; //100 is actual height proportion
    path.strokeWidth = lineProHeight/40; //dynamic stroke size
    path.bounds.width = linePropWidth;
    path.bounds.height = lineProHeight;
    path.bounds.x = view.bounds.x;
    path.bounds.y = view.bounds.y + lineProHeight*2;
}

FIDDLE

相关文章：