FabricJS를 사용하여 마우스가 개체 위에 있을 때 개체를 강조 표시하는 방법은 무엇입니까?

fabric.Polygon 인스턴스를 생성하여 다각형 개체를 생성할 수 있습니다. 다각형 객체는 일련의 연결된 직선 세그먼트로 구성된 닫힌 모양으로 특성화될 수 있습니다. FabricJS의 기본 요소 중 하나이므로 각도, 불투명도 등의 속성을 적용하여 쉽게 사용자 정의할 수도 있습니다. FabricJS는 다양한 효과를 만드는 데 사용할 수 있는 광범위한 이벤트 세트를 제공합니다.

마우스 오버 시 변경 사항이 발생하도록 하므로 마우스가 움직일 때 실행되는 mouse:move 이벤트를 사용하겠습니다. 두 번째 요구 사항은 개체를 강조 표시하는 것입니다. 이는 opacity 속성을 사용하여 달성할 수 있습니다. 그러나 캔버스에 개체가 많고 그 위에 마우스를 올려 놓은 개체를 강조 표시하려면 forEachObject를 사용해야 합니다. 방법. 이 메소드는 주어진 함수에 대해 for-each 루프를 실행하여 각 객체에 대해 실행합니다.

문법

으아아아

매개변수

• callback - 이 속성은 현재 개체를 첫 번째 인수로, 인덱스를 두 번째 인수로, 모든 개체의 배열을 세 번째 인수로 사용하는 function을 허용합니다.

• context - 이 속성은 콜백 함수가 호출되는 컨텍스트를 나타내는 Object를 허용합니다.

예시 1: 하나의 개체만으로 하이라이트 효과 표시

캔버스에 개체가 하나만 있을 때 하이라이트 효과를 추가하는 방법을 코드 예제를 통해 살펴보겠습니다. mouseover 및 mouseout 이벤트를 다각형 개체(이 경우 삼각형)에 연결했습니다. mouseover는 마우스가 객체 위로 이동할 때 실행되고, mouseout은 마우스가 객체 외부에 있을 때 실행됩니다. 요소 위로 커서를 이동하자마자 불투명도가 0.5에서 1로 변경되고 그 반대로 변경됩니다.

으아아아

예 2: 여러 개체의 하이라이트 효과 표시

이 예에서는 마우스를 개체 위로 가져갈 때 개체를 강조 표시하는 방법을 살펴보겠습니다. 마우스가 움직일 때마다 mouse:move 이벤트가 트리거됩니다. 여기서는 수학적 거리 공식을 사용하여 마우스 포인터의 "x" 및 "y" 위치를 통해 좌표 평면의 두 점 사이의 거리를 계산합니다. 그런 다음 이 거리를 50으로 나눕니다. 이는 (dist/50) 분수를 더 작게 만드는 임의의 숫자입니다(분모가 커질수록 분수도 작아진다는 것을 알고 있습니다). 따라서 이를 1로 나누면 다음을 얻습니다. a 값이 커지고 불투명도가 높아집니다.

으아아아

결론

이 튜토리얼에서는 두 가지 간단한 예를 사용하여 FabricJS를 사용하여 마우스 오버 시 개체를 강조 표시하는 방법을 보여줍니다.

위 내용은 FabricJS를 사용하여 마우스가 개체 위에 있을 때 개체를 강조 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!