PaperJs 회전 후 너비와 높이 조절

회전 한 항목이 있고 회전하지 않고 너비와 높이의 기본을 변경하려고합니다.PaperJs 회전 후 너비와 높이 조절

항목을 회전하면 너비와 높이가 완전히 변경되고 다시 크기 방향이 남과 북으로 유지됩니다. 이 새로운 회전 a busy cat http://i57.tinypic.com/21niqf6.png

에 확인 폭이 업데이트되는 기본을 어떻게 a busy cat http://i58.tinypic.com/2zpqxid.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 회전 후 너비와 높이 조절

답변

관련 문제