FabricJS를 사용하여 이미지의 불투명도를 설정하는 방법은 무엇입니까?

이 튜토리얼에서는 FabricJS를 사용하여 이미지의 불투명도를 설정하는 방법을 알아봅니다. 우리를 fabric.Image 인스턴스를 생성하여 이미지 개체를 생성할 수 있습니다. 중 하나이기 때문에 FabricJS의 기본 요소로, 속성을 적용하여 쉽게 사용자 정의할 수도 있습니다. 각도, 불투명도 등 이미지의 불투명도를 설정하려면 opacity 속성을 사용합니다.

문법

으아악

매개변수

• element - 이 매개변수는 HTMLImageElement, HTMLCanvasElement, HTMLVideoElement 또는 이미지 요소를 나타내는 문자열을 허용합니다. 문자열은 URL이어야 하며 이미지로 로드됩니다.

• Options(선택 사항) - 이 매개변수는 개체에 대한 추가 사용자 정의를 제공하는 object입니다. 이 매개변수를 사용하면 불투명도가 속성인 이미지 객체와 관련된 원점, 획 너비 및 기타 여러 속성을 변경할 수 있습니다.

• 콜백 (선택) - 이 매개변수는 최종 필터가 적용된 후 호출되는 함수 입니다..

옵션 키

• opacity - 이 속성은 우리가 제어할 수 있는 Number를 허용합니다. 한 가지. opacity 속성의 기본값은 1입니다.

이미지 개체의 기본 모양

예

코드 예제를 통해 이미지 객체가 기본값으로 어떻게 보이는지 살펴보겠습니다. 불투명도 속성. 이 예에서는 아래와 같이 불투명 키를 전달하지 않습니다. -

으아악

opacity 속성을 키로 전달

예

이 예에서는 opacity 속성에 값을 할당하면 어떻게 변경되는지 살펴보겠습니다. 캔버스에 있는 이미지 객체의 불투명도입니다. 여기서는 불투명도로 0.3을 사용하므로 이미지 객체를 완전히 불투명한 것이 아니라 반투명하게 보이게 만듭니다.

new fabric.Image( element: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | String, { opacity: Number }: Object, callback: function)

위 내용은 FabricJS를 사용하여 이미지의 불투명도를 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!