방향을 가리키는 방향으로 경로를 축척하는 방법

내 데모에서. 서로 오버레이하는 몇 개의 타원을 만들 수 있습니다. 각 타원은 약간 회전하고 클릭이 바깥쪽으로 늘어나야합니다.방향을 가리키는 방향으로 경로를 축척하는 방법

그러나 지금은 .scale (x, y)를 사용하고 타원의 높이가 수직으로 증가합니다.

나는 내가 생각하는 사물의 종류의 첫번째

\t paper.install(window); 
 
\t var canvas = document.getElementById("myCanvas"); 
 

 
\t window.onload = function() { 
 
\t \t paper.setup('myCanvas'); 
 

 
\t \t var numberOfRings = 6, 
 
\t \t \t rings = [], 
 
\t \t \t size = [225,400], 
 
\t \t \t colors = ['black','green','orange','blue','yellow','grey'], 
 
\t \t \t max_frame = 50, 
 
\t \t \t negative_scale = 0.99, 
 
\t \t \t positive_scale = 1.01; 
 

 
\t \t for(var i = 0; i < numberOfRings; i++) 
 
\t \t { 
 
\t \t \t var path = new Path.Ellipse({ 
 
\t \t \t  center:view.center, 
 
\t \t \t  size: size, 
 
\t \t \t  strokeColor: colors[i], 
 
\t \t \t  strokeWidth :10 
 
\t \t \t }); 
 

 
\t \t \t var rotate = 30*i +30; 
 

 
\t \t \t path.rotate(rotate); 
 
\t \t \t path.animation = false; 
 
\t \t \t path.rotateValue = rotate; 
 

 
\t \t \t path.animationStartFrame = 0; 
 
\t \t \t path.animationScale = positive_scale; 
 
\t \t \t path.smooth(); 
 
\t \t \t path.animationIndex = i; 
 

 
\t \t \t path.onClick = function(event) { 
 
\t \t \t \t rings[this.animationIndex].animation = true; 
 
\t \t \t } 
 

 
\t \t \t rings.push(path); 
 

 
\t \t } 
 

 
\t \t view.onFrame = function(event) { 
 

 
\t \t \t for(var i = 0; i < numberOfRings; i++) 
 
\t \t \t { 
 

 
\t \t \t \t if (rings[i].animation == true){ 
 

 
\t \t \t \t \t if (rings[i].animationStartFrame == 0) 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t rings[i].animationStartFrame = event.count; 
 
\t \t \t \t \t } 
 

 
\t \t \t \t \t if (rings[i].animationStartFrame > 0 && event.count < (rings[i].animationStartFrame + max_frame)){ 
 
      
 
\t \t \t \t \t \t // TODO 
 
\t \t \t \t \t \t rings[i].scale(1,rings[i].animationScale); 
 

 
\t \t \t \t \t } else if (event.count > (rings[i].animationStartFrame + max_frame)){ 
 
\t \t \t \t \t \t rings[i].animation = false; 
 
\t \t \t \t \t \t rings[i].animationStartFrame = 0; 
 

 
\t \t \t \t \t \t if (rings[i].animationScale == negative_scale) 
 
\t \t \t \t \t \t \t rings[i].animationScale = positive_scale; 
 
\t \t \t \t \t \t else 
 
\t \t \t \t \t \t \t rings[i].animationScale = negative_scale; 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 

 
\t \t \t } 
 
\t \t } 
 

 

 

 

 
\t }

canvas{ 
 
\t width: 100%; 
 
\t height: 100%; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-full.min.js"></script> 
 
</head> 
 
<body> 
 
\t <canvas id="myCanvas" resize></canvas> 
 
</body> 
 
</html>

출처

2017-12-10 MagicCat707

* 원하는 * 효과는 무엇입니까? –

반지가 클릭되면. 링은 직각을 그리며 펼쳐져 있어야합니다. 초기 봐 - https://codepen.io/kneepham/pen/qVeJwG 최종 보면 모든 반지 가 내가 밖으로 어떻게내는 문제에 봉착 https://codepen.io/kneepham/pen/PEwLgz 클릭 - 때 높이를 늘리십시오. – MagicCat707

paper.js

DEMO를 사용하여 효과의 유형을 달성 할 방법을 잘 모르겠어요 그 applyMatrix 옵션이 false으로 설정된 paper.js/items를 사용하기가 더 쉬움 -이 방법은 변환되지 않습니다. 내가의 타원 경로를 캡슐화 Group : 전자 제품/어린이/경로뿐만 아니라 절대 방식으로 나중에 조작 얻을 수 있도록 변환 별도의 유지 및 .. 추가

이 원하는 효과를 얻기 위해 나는 트릭을 사용 그룹. 그래서 그룹 만 회전시킬 수 있습니다. 자식의 좌표계가 수정되지 않았습니다. 회전하지 않았으므로 타원 스케일링을 원래 좌표계와 같이 조작 할 수 있습니다.

저는 예제를 기반으로 몇 가지 수정을했습니다 - 주로 그래서 다양한 캔버스 크기와 다른 수의 타원으로 테스트하기 쉽습니다.

내가 먼저 at sketch.paperjs.org을 테스트/개발 했으므로 (여기에서 테스트/디버깅하기가 더 쉽다) 다음 plain js 버전에 맞게 변환되었습니다.

더 복잡한 애니메이션을 원한다면 위대한 라이브러리 animatePaper.js을 체크 아웃하십시오. 나는 그것을 많이 사용하고 그것을 사용하기를 좋아했습니다 :-) 종이 객체의 속성에 대한 간단하고 복잡한 애니메이션을 지원합니다.

paper.install(window); 
 
var canvas = document.getElementById('myCanvas'); 
 

 
window.onload = function() { 
 
    paper.setup('myCanvas'); 
 
    var numberOfRings = 5; 
 
    var rings = []; 
 
    let view_max_length = Math.min(view.size.width, view.size.height); 
 
    var ringStartSize = new Size(view_max_length * 0.4, view_max_length * 0.45); 
 
    var ringTargetLength = view_max_length * 0.9; 
 
    var scaleStepSize = 0.01; 
 

 

 
    function createRing(index) { 
 
     let path = new Path.Ellipse({ 
 
      center: view.center, 
 
      size: ringStartSize, 
 
      strokeColor: { 
 
       hue: (360/numberOfRings) * index, 
 
       saturation: 1, 
 
       brightness: 1 
 
      }, 
 
      strokeWidth: 10, 
 
      applyMatrix: false, 
 
      strokeScaling: false, 
 
     }); 
 

 
     // add custom properties 
 
     path.animate = false; 
 
     path.animationDirectionOut = true; 
 
     path.animationIndex = index; 
 

 
     path.onClick = function(event) { 
 
      //console.log(this); 
 
      this.animate = true; 
 
     }; 
 

 
     let rotationgroup = new Group(path); 
 
     rotationgroup.applyMatrix = false; 
 
     let offsetAngle = (360/2)/numberOfRings; 
 
     let rotate = offsetAngle * index; 
 
     rotationgroup.pivot = path.bounds.center; 
 
     rotationgroup.rotation = rotate; 
 

 
     return path; 
 
    } 
 

 
    function init() { 
 
     for (let i = 0; i < numberOfRings; i++) { 
 
      rings.push(createRing(i)); 
 
     } 
 
    } 
 

 
    function animateRing(event, ring) { 
 
     if (ring.animate) { 
 
      let tempScaleStep = scaleStepSize; 
 
      if (!ring.animationDirectionOut) { 
 
       tempScaleStep = tempScaleStep * -1; 
 
      } 
 
      ring.scaling.y += tempScaleStep; 
 

 
      // test if we have reached destination size. 
 
      if (
 
       (ring.bounds.height >= ringTargetLength) || 
 
       (ring.bounds.height <= ringStartSize.height) 
 
      ) { 
 
       ring.animate = false; 
 
       // change direction 
 
       ring.animationDirectionOut = !ring.animationDirectionOut; 
 
      } 
 
     } 
 
    } 
 

 
    view.onFrame = function(event) { 
 
     if (rings && (rings.length > 0)) { 
 
      for (var i = 0; i < numberOfRings; i++) { 
 
       animateRing(event, rings[i]); 
 
      } 
 
     } 
 
    }; 
 

 

 
    init(); 
 

 
}

canvas { 
 
    widht: 100%; 
 
    height: 100%; 
 
    background-color: rgb(0,0,50); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-full.min.js"></script> 
 
</head> 
 
<body> 
 
\t <canvas id="myCanvas" resize></canvas> 
 
</body> 
 
</html>

출처

2018-03-02 16:37:45

방향을 가리키는 방향으로 경로를 축척하는 방법

답변

관련 문제