Question

我有一个旋转的项目，我想在没有旋转的情况下更改宽度和高度。

当我旋转物品时，宽度和高度完全改变，重新尺寸方向保持北和南。 a busy cat http://i58.tinypic.com/2zpqxid.png

如何根据新的旋转确保宽度更新 a busy cat http://i57.tinypic.com/21niqf6.png

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

非常感谢任何帮助或参考。

Answer 1

即使在旋转时，path.bounds属性也将包含对象的边界。这使得它可以直接实现您绘制的内容。请参阅下面的示例。

＆＃13;

// 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;

＆＃13;

<!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>

＆＃13;

PaperJs旋转后调整宽度和高度

1 个答案: