PaperJs旋轉後調整寬度和高度

我有一個旋轉的項目，我想在沒有旋轉的情況下更改寬度和高度。PaperJs旋轉後調整寬度和高度

當我旋轉項目的寬度和高度完全改變，重新大小的方向保持南北。 a busy cat http://i58.tinypic.com/2zpqxid.png

如何做到這一點確保寬度更新基礎上的新的旋轉 a busy cat http://i57.tinypic.com/21niqf6.png

是他們的，我需要改變或任何人都知道一個數學公式，我可以用它來計算的新的大小基地的設置迴轉。

非常感謝您的幫助或引用，非常感謝。

2014-11-04 user747344

即使旋轉，path.bounds屬性也將包含對象的邊界。這使得它可以直接實現你所繪製的內容。看我下面的例子。

// Create an empty project and a view for the canvas: 
 
paper.setup(document.getElementById('myCanvas')); 
 
// Make the paper scope global, by injecting it into window: 
 
paper.install(window); 
 

 
// Create the original rectagle 
 
var point = new Point(20, 20); 
 
var size = new Size(60, 60); 
 
var rect = new Path.Rectangle(point, size); 
 
rect.fillColor = new paper.Color(1, 0, 0) 
 
rect.rotation = 15; 
 

 
// Create the bounds rectangle 
 
var boundsPath = new Path.Rectangle(rect.bounds); 
 
boundsPath.strokeColor = new Color(0, 0, 0); 
 

 

 
// Make a nice little animation: 
 
function onFrame(event) { 
 
    // Every frame, rotate the path by 2 degrees 
 
    rect.rotate(2); 
 

 
    // Recreate the bounds rectangle 
 
    boundsPath.remove(); 
 
    boundsPath = new Path.Rectangle(rect.bounds); 
 
    boundsPath.strokeColor = new Color(0, 0, 0); 
 
} 
 

 
view.draw(); 
 
view.onFrame = onFrame;

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.22/paper-full.min.js"></script> 
 

 
</head> 
 

 
<body> 
 
    <canvas id="myCanvas" resize></canvas> 
 
</body> 
 

 
</html>

來源

2015-04-05 22:55:35

PaperJs旋轉後調整寬度和高度

回答

相關問題