Wie macht Canvas responsive mit der Methode pathData in PaperJs?

Question

Methode A: - Ich habe ein SVG Objekt in einem Dokument importiert, wenn wir das Fenster neu skalieren, wird die SVG Größe [Check the demo].

Methode B: - Aber das gleiche Objekt, das ich als PathData Methode importiert habe in paperJs und die Größe neu bestimmen das Fenster der Leinwand Objekt nicht die Größe neu gleiche wie in Methode A[Check demo].

Ich habe die Leinwand Größe ist die volle Breite des Fensters mit Hilfe von CSS, aber in der Leinwand Objekt konnte nicht ansprechen.

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

Was soll ich tun, um das Canvas-Objekt als reaktionsfähig zu gestalten? Helfen würde geschätzt werden, Danke im Voraus.

Answer 1

Endlich fand ich die Lösung.

Ich habe ihre eigene Option verwendet fitBounds, es ist eine der besten Option, die ich in PaperJs liebte. Und ich teile meine andere Lösung auch hier. Ich hoffe, es wird dir helfen :).

Lösung 1: Verwendung mit fitBounds Option

window.addEventListener("resize", myFunction); 
myFunction(); 

function myFunction() {  
    path.fitBounds(view.bounds); 
} 

FIDDLE

Lösung 2: mit Größenberechnung Mit

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