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 Регулировка ширины и высоты после вращения

ответ

Смежные вопросы