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旋转后调整宽度和高度

回答

相关问题