UE4 UI点击透明判断

最新推荐文章于 2023-07-06 18:02:20 发布

看见小车在下雨

最新推荐文章于 2023-07-06 18:02:20 发布

阅读量1.8k

点赞数 5

分类专栏： UE4 UMG ui点击透明判断文章标签：前端

本文链接：https://blog.csdn.net/qq_28470525/article/details/114988150

版权

UE4 同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

UMG

1 篇文章 0 订阅

订阅专栏

ui点击透明判断

1 篇文章 0 订阅

订阅专栏

目的：

如图，判定鼠标是否点击到红色和紫色圆形；

UE4做不到：

UE4点击会将整个图片的矩形区域做为判定条件，所以无法精确到透明位置不点击。

做法（两种）：

一、直接在图片上监听点击事件，通过拿图片材质的透明的判断点击是否有效。参考可见实现UMG中自定义不规则形状按钮

（缺点1、只能实现一张图片透明判断 2、做不了点击穿透）

（可另外参考编写自定义控件缺点：改源码，比较难（哈哈））

二、在外层做监听，通过换算坐标拿到图片材质相对位置的透明度来判断是否有效

（优点：能实现多张图的判断半优点：做到伪点击穿透缺点：对ui层级有要求）

以下是第二张方法的实现和大概逻辑流程说明：

先贴代码再说明

/**.h **/	

//基于imageArr判断点击的位置是否是空白(透明度小于某个值)
//ui做法需要限制，image必须在接收点击事件界面的直接子节点，否则会导致位置换算有误
//@param imageArr 用来判断空白的贴图数组
//@return true:点击空白
UFUNCTION()
static bool IsClickTheBlank(int Alpha ,const FGeometry& MyGeometry, const FPointerEvent& MouseEvent,TArray<UImage*>imageArr);

/**.cpp*/
bool ULuaCallCppFunctionLib::IsClickTheBlank(int Alpha, const FGeometry& MyGeometry, const FPointerEvent& MouseEvent, TArray<UImage*>imageArr)
{
	if (imageArr.Num() <= 0)
	{
		return true;
	}

	bool bResult = true;

	FVector2D LocalPosition = MyGeometry.AbsoluteToLocal(MouseEvent.GetScreenSpacePosition());//先对于MyGeometry所在slot的屏幕坐标

	for (int32 i = 0; i < imageArr.Num(); ++i)
	{
		UImage* image = imageArr[i];
		
		UTexture2D* AdvancedHitTexture = (UTexture2D*)image->Brush.GetResourceObject();
		if (bResult && nullptr != AdvancedHitTexture)
		{
			UCanvasPanelSlot* canvasSlot = UWidgetLayoutLibrary::SlotAsCanvasSlot(image);

			//计算出描点左上角，中心点alignment为（0，0）的相对父节点坐标
			FVector2D parentSize = MyGeometry.GetLocalSize();//ui做法需要限制，image必须在接收点击事件界面的直接子节点，否则会导致位置换算有误

			FVector2D relativeLUPos = FVector2D(0, 0);//相对父节点的左上角坐标
			FVector2D relativeRDpos = FVector2D(0, 0);//右下角坐标

			FVector2D pos = canvasSlot->GetPosition();
			FMargin offset = canvasSlot->GetOffsets();
			FVector2D size = canvasSlot->GetSize();
			FAnchors abchors = canvasSlot->GetAnchors();
			FVector2D alignment = canvasSlot->GetAlignment();
			
			//判断锚点是一个点还是一个范围
			//X Y要分开(难啊)
			if (abchors.Minimum.X == abchors.Maximum.X)
			{
				float alignmentOffsetLU = size.X * -alignment.X;//中心点导致的左上角偏移
				float alignmentOffsetRD = size.X * (1 - alignment.X);//中心点导致的右下角角偏移

				//描点偏移
				float abchorsOffset = parentSize.X * abchors.Minimum.X;
				relativeLUPos.X = pos.X + alignmentOffsetLU + abchorsOffset;
				relativeRDpos.X = pos.X + alignmentOffsetRD + abchorsOffset;
			}
			else
			{
				relativeLUPos.X = parentSize.X * abchors.Minimum.X + offset.Left;
				relativeRDpos.X = parentSize.X * abchors.Maximum.X - offset.Right;
			}
			if (abchors.Minimum.Y == abchors.Maximum.Y)
			{
				float alignmentOffsetLU = size.Y * -alignment.Y;//中心点导致的左上角偏移
				float alignmentOffsetRD = size.Y * (1 - alignment.Y);//中心点导致的右下角角偏移

				//描点偏移
				float abchorsOffset = parentSize.Y * abchors.Minimum.Y;
				relativeLUPos.Y = pos.Y + alignmentOffsetLU + abchorsOffset;
				relativeRDpos.Y = pos.Y + alignmentOffsetRD + abchorsOffset;
			}
			else
			{
				relativeLUPos.Y = parentSize.Y * abchors.Minimum.Y + offset.Top;
				relativeRDpos.Y = parentSize.Y * abchors.Maximum.Y - offset.Bottom;
			}

			FVector2D imageSize = relativeRDpos - relativeLUPos; //图片大小

			//适配旋转
			FVector2D relativeMidPos = FVector2D(LocalPosition) - (relativeLUPos + relativeRDpos)/2; //转换为图片中心点为圆心的坐标系

			float angle = image->GetRenderTransformAngle();
			float cosV = FMath::Cos(-angle / 57.2958);
			float sinV = FMath::Sin(-angle / 57.2958);
			float px2 = cosV * relativeMidPos.X - sinV * relativeMidPos.Y;
			float py2 = sinV * relativeMidPos.X + cosV * relativeMidPos.Y;
			relativeMidPos.X = px2;
			relativeMidPos.Y = py2;

			//判断是否在image内
			if (FMath::Abs(relativeMidPos.X) < imageSize.X/2 && FMath::Abs(relativeMidPos.Y) < imageSize.Y / 2)
			{
				//描点左上角，中心点alignment为（0，0）的相对父节点坐标
				FVector2D clickRelativePos = relativeMidPos + (relativeLUPos + relativeRDpos) / 2 - relativeLUPos;

				中心点旋转变换
				//float px1 = clickRelativePos.X - (size.X / 2); //alignment为（0.5，0.5）时的坐标位置，
				//float py1 = clickRelativePos.Y - (size.Y / 2);
				//float angle = image->GetRenderTransformAngle();
				//float cosV = FMath::Cos(-angle / 57.2958);
				//float sinV = FMath::Sin(-angle / 57.2958);
				//float px2 = cosV * px1 - sinV * py1;
				//float py2 = sinV * px1 + cosV * py1;

				旋转后坐标
				//clickRelativePos.X = px2 + (size.X / 2);
				//clickRelativePos.Y = py2 + (size.Y / 2);

				FVector2D mapPos = clickRelativePos / (relativeRDpos - relativeLUPos);

				float px = floor(mapPos.X * AdvancedHitTexture->PlatformData->SizeX);
				float py = floor(mapPos.Y * AdvancedHitTexture->PlatformData->SizeY);

				int BufferPosition = py * AdvancedHitTexture->PlatformData->SizeX + px;

				FColor* ImageData = (FColor*)((AdvancedHitTexture->PlatformData->Mips[0]).BulkData.Lock(LOCK_READ_ONLY));
				if (!ImageData) {

				}
				else {
					if (ImageData[BufferPosition].A > Alpha)
					{
						//非空白
						bResult = false;
					}
				}

				//绘制材质透明度
				
				/*UE_LOG(LogTemp, Log, TEXT("BufferPosition index:%d posX:%d,posY:%d ImageData[BufferPosition].A:%d Alpha:%d isBlank:%d"), i, px, py, ImageData[BufferPosition].A, Alpha, (ImageData[BufferPosition].A <= Alpha ? 1 : 0));

				for (int32 i = 0; i < AdvancedHitTexture->PlatformData->SizeY; ++i)
				{
					FString lineStr = "";
					for (int32 j = 0; j < AdvancedHitTexture->PlatformData->SizeX; j++)
					{
						int index = i * AdvancedHitTexture->PlatformData->SizeX + j;
						if (ImageData[index].A <= Alpha)
						{
							lineStr += "0";
						}
						else
						{
							lineStr += "1";
						}
					}
					UE_LOG(LogTemp, Log, TEXT("%s"), *lineStr);
				}*/

				AdvancedHitTexture->PlatformData->Mips[0].BulkData.Unlock();
			}
		}
	}
	return bResult;
}

直接提供一个静态函数用于查询点击是否空白，传入透明度阙值和UImage数组，通过换算点击点在UImage上的纹理信息，可以判断是否点击空白。

1、获取纹理信息