Question

方法A： - 我在文档中导入了SVG个对象，当我们重新调整窗口大小时SVG将重新调整大小 [Check the demo]

方法B： - 但是我在paperJs中作为pathData方法导入的同一个对象并重新调整窗口大小，画布对象的大小与方法A [Check demo]。

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

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

如何使canvas对象具有响应性？我们将不胜感激，谢谢。

Answer 1

最后我找到了解决方案。

我使用了他们自己的选项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

canvas如何使用paperJs中的pathData方法进行响应？

1 个答案: