FabricJS를 사용하여 애니메이션으로 이미지를 직선화하는 방법은 무엇입니까?

이 튜토리얼에서는 애니메이션을 사용하여 이미지를 직선화하는 방법을 배웁니다. FabricJS. fabric.Image 인스턴스를 생성하여 Image 객체를 생성할 수 있습니다. ~부터 FabricJS의 기본 요소 중 하나이며 애플리케이션을 통해 쉽게 사용자 정의할 수도 있습니다. 각도, 불투명도 및 기타 속성. 우리가 사용하는 애니메이션으로 이미지를 직선화하기 위해 fxStraighten 방법.

문법

매개변수

• callbacks - 이 매개변수는 사용할 수 있는 콜백 함수가 포함된 개체입니다. 애니메이션과 관련된 특정 속성을 변경합니다.

사용 직선화방법

예

코드 예제를 통해 straighten 메서드를 사용할 때 Image 객체가 어떻게 표시되는지 살펴보겠습니다. fxstraighten 대신 사용됩니다. 이것은 우리가 그들 사이의 차이점을 깨닫는 데 도움이 될 것입니다. straighten 방법은 단지 straighten 개체를 현재 각도에서 0, 90,180, 270 등 어느 것이 더 가까운지에 따라 다릅니다. 그러나 fxstraighten은 다음에서 작동합니다. 같은 방식이지만 애니메이션이 있습니다.

fxstraightenmethod

예

이 예에서는 fxstraighten 메서드를 사용하여 이미지 객체를 straighten 간단한 애니메이션을 표시합니다. 이미지 객체의 각도는 45도입니다. 직선화 0도로 다시 회전하여. 그 외에도 onChange 함수는 다음과 같습니다. 애니메이션의 모든 단계에서 호출되며 onComplete 함수는 다음 단계에서만 호출됩니다. 애니메이션이 완료되었으므로 이미지 객체의 크기가 조정됩니다. 수평으로 1.5배 이동하고 값을 130만큼 왼쪽으로 이동합니다.

위 내용은 FabricJS를 사용하여 애니메이션으로 이미지를 직선화하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!