PaperJs旋转后调整宽度和高度答案

【问题标题】：PaperJs Adjusting width and height after rotationPaperJs旋转后调整宽度和高度
【发布时间】：2014-12-31 20:43:54
【问题描述】：

我有一个旋转的项目，我想在不旋转的基础上更改宽度和高度。

当我旋转项目时，宽度和高度会完全改变，重新调整大小的方向仍然是南北。

如何确保根据新的旋转来更新宽度

他们的设置是我需要更改还是有人知道我可以用来根据旋转计算新尺寸的数学公式。

非常感谢您的帮助或参考。

【问题讨论】：

标签： javascript math html5-canvas paperjs

【解决方案1】：

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>

【讨论】：