UE4 Slate 环形图学习笔记

最新推荐文章于 2024-05-14 09:42:06 发布
最新推荐文章于 2024-05-14 09:42:06 发布
阅读量568 收藏 2
点赞数
文章标签： ue4 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qqQQqsadfj/article/details/128898581
版权 
// Fill out your copyright notice in the Description page of Project Settings.

#include "CircleWidget.h"

int32 UCircleWidget::NativePaint(const FPaintArgs& Args,
	const FGeometry& AllottedGeometry,
	const FSlateRect& MyCullingRect,
	FSlateWindowElementList& OutDrawElement,
	int32 LayerId,
	const FWidgetStyle& InWidgetStyle,
	bool bParentEnable)	const
{
	DrawCirclePart(
		OutDrawElement,
		AllottedGeometry,
		LayerId,
		InnerR,
		OuterR,
		StartAngle,
		EndAngle,
		CircleColor
	);
	
	return LayerId++;
}

void UCircleWidget::DrawCirclePart(
	FSlateWindowElementList& OutDrawElement,
	const FGeometry& AllottedGeometry,
	int LayerId, float IR, float OR,
	int32 InBeginAngle, int32 InEndAngle,
	const FColor& InColor) const
{
	if(InEndAngle <= InBeginAngle)	return ;//如果开始角都小于结束角则退出

	FVector2D CenterPosition = FVector2D(OuterR, OuterR);	

	TArray<FSlateVertex> SlateVertexes;//创建一个顶点数组，用于存放绘制的顶点
	TArray<SlateIndex> SlateIndexes;//创建一个下标数组

	for(int32 Angle = InBeginAngle; Angle <= InEndAngle; Angle++)//每过一个角度进行一次，角度四个顶点的运算
	{
		//声明内弧与外弧的四个顶点
		FSlateVertex CurrentOVertex;
		FSlateVertex NextOVextex;
		FSlateVertex CurrentIVertex;
		FSlateVertex NextIVertex;

		//为四个顶点着色
		CurrentOVertex.Color = InColor;
		NextOVextex.Color = InColor;
		CurrentIVertex.Color = InColor;
		NextIVertex.Color = InColor;

		//计算内弧、外弧四个顶点的位置
		FVector2D CurrentIVPosition = FVector2D(
			CenterPosition.X + IR * FMath::Cos(FMath::DegreesToRadians(Angle)),
			CenterPosition.Y - IR * FMath::Sin(FMath::DegreesToRadians(Angle))
		);

		FVector2D NextIVPosition = FVector2D(
			CenterPosition.X + IR * FMath::Cos(FMath::DegreesToRadians(Angle + 1)),
			CenterPosition.Y - IR * FMath::Sin(FMath::DegreesToRadians(Angle + 1))
		);

		FVector2D CurrentOVPosition = FVector2D(
			CenterPosition.X + OR * FMath::Cos(FMath::DegreesToRadians(Angle)),
			CenterPosition.Y - OR * FMath::Sin(FMath::DegreesToRadians(Angle))
		);

		FVector2D NextOVPosition = FVector2D(
			CenterPosition.X + OR * FMath::Cos(FMath::DegreesToRadians(Angle + 1)),
			CenterPosition.Y - OR * FMath::Sin(FMath::DegreesToRadians(Angle + 1))
		);

		//从本地空间变换到渲染空间
		const FSlateRenderTransform& SlateRenderTransform = AllottedGeometry.ToPaintGeometry().GetAccumulatedRenderTransform();
		CurrentOVPosition = SlateRenderTransform.TransformPoint(CurrentOVPosition);
		NextOVPosition = SlateRenderTransform.TransformPoint(NextOVPosition);
		CurrentIVPosition = SlateRenderTransform.TransformPoint(CurrentIVPosition);
		NextIVPosition = SlateRenderTransform.TransformPoint(NextIVPosition);

		//给四个顶点的位置赋值（渲染空间的值）
		CurrentOVertex.Position = CurrentOVPosition;
		NextOVextex.Position = NextOVPosition;
		CurrentIVertex.Position = CurrentIVPosition;
		NextIVertex.Position = NextIVPosition;

		//将顶点信息放入数组并将其索引给到对应值
		int32 IndexOfCurrentOV = SlateVertexes.Add(CurrentOVertex);
		int32 IndexOfNextOV = SlateVertexes.Add(NextOVextex);
		int32 IndexOfCurrentIV = SlateVertexes.Add(CurrentIVertex);
		int32 IndexOfNextIV = SlateVertexes.Add(NextIVertex);

		//利用索引画出对应两个三角形，放入索引数组，第一个三角形
		SlateIndexes.Add(IndexOfCurrentOV);
		SlateIndexes.Add(IndexOfNextOV);
		SlateIndexes.Add(IndexOfCurrentIV);

		//第二个三角形
		SlateIndexes.Add(IndexOfCurrentIV);
		SlateIndexes.Add(IndexOfNextIV);
		SlateIndexes.Add(IndexOfNextOV);
	}

	//设置uv值
	for(FSlateVertex& SlateVertex : SlateVertexes)
	{
		SlateVertex.TexCoords[0] = 0.f;
		SlateVertex.TexCoords[1] = 0.f;
	}

	//开始获取各个顶点进行图形绘制
	const FSlateBrush* Brush = FCoreStyle::Get().GetBrush("ColorSpectrum.Specturm");
	FSlateResourceHandle ResourcedHandle = FSlateApplication::Get().GetRenderer()->GetResourceHandle(*Brush);
	FSlateDrawElement::MakeCustomVerts(
		OutDrawElement,
		LayerId,
		ResourcedHandle,
		SlateVertexes,
		SlateIndexes,
		nullptr,
		0,
		0
	);
}

// Fill out your copyright notice in the Description page of Project Settings.

#pragma once

#include "CoreMinimal.h"
#include "Blueprint/UserWidget.h"
#include "CircleWidget.generated.h"

/**
 * 
 */
UCLASS()
class MYPROJECT_API UCircleWidget : public UUserWidget
{
	GENERATED_BODY()

protected:
	virtual int32 NativePaint(
		const FPaintArgs& Args,
		const FGeometry& AllottedGeometry,
		const FSlateRect& MyCullingRect,
		FSlateWindowElementList& OutDrawElement,
		int32 LayerId,
		const FWidgetStyle& InWidgetStyle,
		bool bParentEnable) const override;

	UPROPERTY(EditAnywhere, BlueprintReadWrite, meta = (ClampMin = 0, ClampMax = 360))
	float EndAngle;

	UPROPERTY(EditAnywhere, BlueprintReadWrite, meta = (ClampMin = 0, ClampMax = 360))
	float StartAngle;

	UPROPERTY(EditAnywhere, BlueprintReadWrite, meta = (ClampMin = 0, ClampMax = 960))
	float InnerR;

	UPROPERTY(EditAnywhere, BlueprintReadWrite, meta = (ClampMin = 0, ClampMax = 960))
	float OuterR;

	UPROPERTY(EditAnywhere, BlueprintReadWrite)
	FColor CircleColor;
	
private:
	void DrawCirclePart(FSlateWindowElementList& OutDrawElement,
		const FGeometry& AllottedGeometry,
		int LayerId, float IR, float OR,
		int32 InBeginAngle, int32 InEndAngle,
		const FColor& InColor) const;
};

可以用于吃鸡回血的这个动画：

// Fill out your copyright notice in the Description page of Project Settings.

#include "CircleWidget.h"

#include <vehicle/PxVehicleSDK.h>

int32 UCircleWidget::NativePaint(const FPaintArgs& Args,
                                 const FGeometry& AllottedGeometry,
                                 const FSlateRect& MyCullingRect,
                                 FSlateWindowElementList& OutDrawElement,
                                 int32 LayerId,
                                 const FWidgetStyle& InWidgetStyle,
                                 bool bParentEnable)	const
{
	float TotalValue = 0.f;
	for(int32 Index = 0; Index < Angles.Num(); Index++)	TotalValue += Angles[Index];
	TArray<float> CircleAngles;
	for(int32 Index = 0; Index < Angles.Num(); Index++)
	{
		int32 Angle = (Angles[Index] / TotalValue) * 360;
		CircleAngles.Add(Angle);
	}
	int32 AddAngle = 0;
	int LoopSize = FMath::Min(Angles.Num(), CircleColor.Num());
	for(int32 Index = 0; Index < LoopSize; Index++)
	{
		DrawCirclePart(
			OutDrawElement,
			AllottedGeometry,
			LayerId,
			InnerR,
			OuterR,
			AddAngle,
			AddAngle + CircleAngles[Index],
			CircleColor[Index]
		);
		AddAngle += CircleAngles[Index];
	}
	
	return LayerId++;
}

void UCircleWidget::DrawCirclePart(
	FSlateWindowElementList& OutDrawElement,
	const FGeometry& AllottedGeometry,
	int LayerId, float IR, float OR,
	int32 InBeginAngle, int32 InEndAngle,
	const FColor& InColor) const
{
	if(InEndAngle <= InBeginAngle)	return ;//如果开始角都小于结束角则退出

	FVector2D CenterPosition = FVector2D(OuterR, OuterR);	

	TArray<FSlateVertex> SlateVertexes;//创建一个顶点数组，用于存放绘制的顶点
	TArray<SlateIndex> SlateIndexes;//创建一个下标数组

	for(int32 Angle = InBeginAngle; Angle <= InEndAngle; Angle++)//每过一个角度进行一次，角度四个顶点的运算
	{
		//声明内弧与外弧的四个顶点
		FSlateVertex CurrentOVertex;
		FSlateVertex NextOVextex;
		FSlateVertex CurrentIVertex;
		FSlateVertex NextIVertex;

		//为四个顶点着色
		CurrentOVertex.Color = InColor;
		NextOVextex.Color = InColor;
		CurrentIVertex.Color = InColor;
		NextIVertex.Color = InColor;

		//计算内弧、外弧四个顶点的位置
		FVector2D CurrentIVPosition = FVector2D(
			CenterPosition.X + IR * FMath::Cos(FMath::DegreesToRadians(Angle)),
			CenterPosition.Y - IR * FMath::Sin(FMath::DegreesToRadians(Angle))
		);

		FVector2D NextIVPosition = FVector2D(
			CenterPosition.X + IR * FMath::Cos(FMath::DegreesToRadians(Angle + 1)),
			CenterPosition.Y - IR * FMath::Sin(FMath::DegreesToRadians(Angle + 1))
		);

		FVector2D CurrentOVPosition = FVector2D(
			CenterPosition.X + OR * FMath::Cos(FMath::DegreesToRadians(Angle)),
			CenterPosition.Y - OR * FMath::Sin(FMath::DegreesToRadians(Angle))
		);

		FVector2D NextOVPosition = FVector2D(
			CenterPosition.X + OR * FMath::Cos(FMath::DegreesToRadians(Angle + 1)),
			CenterPosition.Y - OR * FMath::Sin(FMath::DegreesToRadians(Angle + 1))
		);

		//从本地空间变换到渲染空间
		const FSlateRenderTransform& SlateRenderTransform = AllottedGeometry.ToPaintGeometry().GetAccumulatedRenderTransform();
		CurrentOVPosition = SlateRenderTransform.TransformPoint(CurrentOVPosition);
		NextOVPosition = SlateRenderTransform.TransformPoint(NextOVPosition);
		CurrentIVPosition = SlateRenderTransform.TransformPoint(CurrentIVPosition);
		NextIVPosition = SlateRenderTransform.TransformPoint(NextIVPosition);

		//给四个顶点的位置赋值（渲染空间的值）
		CurrentOVertex.Position = CurrentOVPosition;
		NextOVextex.Position = NextOVPosition;
		CurrentIVertex.Position = CurrentIVPosition;
		NextIVertex.Position = NextIVPosition;

		//将顶点信息放入数组并将其索引给到对应值
		int32 IndexOfCurrentOV = SlateVertexes.Add(CurrentOVertex);
		int32 IndexOfNextOV = SlateVertexes.Add(NextOVextex);
		int32 IndexOfCurrentIV = SlateVertexes.Add(CurrentIVertex);
		int32 IndexOfNextIV = SlateVertexes.Add(NextIVertex);

		//利用索引画出对应两个三角形，放入索引数组，第一个三角形
		SlateIndexes.Add(IndexOfCurrentOV);
		SlateIndexes.Add(IndexOfNextOV);
		SlateIndexes.Add(IndexOfCurrentIV);

		//第二个三角形
		SlateIndexes.Add(IndexOfCurrentIV);
		SlateIndexes.Add(IndexOfNextIV);
		SlateIndexes.Add(IndexOfNextOV);
	}

	//设置uv值
	for(FSlateVertex& SlateVertex : SlateVertexes)
	{
		SlateVertex.TexCoords[0] = 0.f;
		SlateVertex.TexCoords[1] = 0.f;
	}

	//开始获取各个顶点进行图形绘制
	const FSlateBrush* Brush = FCoreStyle::Get().GetBrush("ColorSpectrum.Specturm");
	FSlateResourceHandle ResourcedHandle = FSlateApplication::Get().GetRenderer()->GetResourceHandle(*Brush);
	FSlateDrawElement::MakeCustomVerts(
		OutDrawElement,
		LayerId,
		ResourcedHandle,
		SlateVertexes,
		SlateIndexes,
		nullptr,
		0,
		0
	);
}

void UCircleWidget::SetValues(TArray<float> InValues, TArray<FColor> Colors)
{
	if(InValues.Num() < 1)	return ;

	Angles.Empty();

	CircleColor = Colors;
	
	float Total = 0;
	for(int32 Index = 0; Index < InValues.Num(); Index++)
	{
		Total += InValues[Index];
	}

	float CurrentTotal = 0;
	for(int32 Index = 0; Index < InValues.Num(); Index++)
	{
		CurrentTotal = InValues[Index];

		int Angle = (CurrentTotal / Total) * 360;
		Angles.Add(Angle);
	}
}

// Fill out your copyright notice in the Description page of Project Settings.

#pragma once

#include "CoreMinimal.h"
#include "Blueprint/UserWidget.h"
#include "CircleWidget.generated.h"

/**
 * 
 */
UCLASS()
class MYPROJECT_API UCircleWidget : public UUserWidget
{
	GENERATED_BODY()

public:
	UFUNCTION(BlueprintCallable)
	void SetValues(TArray<float> InValues, TArray<FColor> Colors);
	
protected:
	virtual int32 NativePaint(
		const FPaintArgs& Args,
		const FGeometry& AllottedGeometry,
		const FSlateRect& MyCullingRect,
		FSlateWindowElementList& OutDrawElement,
		int32 LayerId,
		const FWidgetStyle& InWidgetStyle,
		bool bParentEnable) const override;

	// UPROPERTY(EditAnywhere, BlueprintReadWrite, meta = (ClampMin = 0, ClampMax = 360))
	// float EndAngle;
	//
	// UPROPERTY(EditAnywhere, BlueprintReadWrite, meta = (ClampMin = 0, ClampMax = 360))
	// float StartAngle;

	UPROPERTY(EditAnywhere, BlueprintReadWrite, meta = (ClampMin = 0, ClampMax = 960))
	float InnerR;

	UPROPERTY(EditAnywhere, BlueprintReadWrite, meta = (ClampMin = 0, ClampMax = 960))
	float OuterR;

	UPROPERTY(EditAnywhere, BlueprintReadWrite)
	TArray<FColor> CircleColor;

	UPROPERTY(EditAnywhere, BlueprintReadWrite)
	TArray<float> Angles;
	
private:
	void DrawCirclePart(FSlateWindowElementList& OutDrawElement,
		const FGeometry& AllottedGeometry,
		int LayerId, float IR, float OR,
		int32 InBeginAngle, int32 InEndAngle,
		const FColor& InColor) const;
	
};

同样也能进行动态设置，该类是按照比例来画环形图

远离UE4
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ue4 SlateUI讲解
10-25
ue4 SlateUI讲解。中文教程，内容详细。（凑字数字数）
UE4 & C++ 笔记
jkchen's Haven
02-25 4638
创建名为Name的USceneComponent组件对象 USceneComponent* P = CreateDefaultSubobject<USceneComponent>(TEXT("Name")); 开启Tick PrimaryActorTick.bCanEverTick = true; 资源查找器 static ConstructorHelpers::FObjectFinder<资源类别> CubeVisualAsset(TEXT("资源路径")); if..
SuperluminalPlugin：用于Superluminal Profiler的UE4插件
02-06
使用说明 启用插件并传递此标志： -Superluminal 重要提示：如果您已打开FRAMEPRO_ENABLED，则将排除所有外部分析器 UE4为一堆统计信息命名的事件创建了几个唯一的名称（例如Slate小部件，“ Frame N”等）。 为了最大程度地减少对探查器的影响（恕我直言，唯一名称过大），请执行以下任一操作： YourGame.Target.cs： BuildEnvironment = TargetBuildEnvironment . Unique ; GlobalDefinitions . Add ( " PLATFORM_LIMIT_PROFILER_UNIQUE_NA
extjs4-slate 主题
12-02
extjs4-slate 主题 extjs4.0.7
slate-master_slate输入框_
09-30
自定义输入框
UE4 C++ Slate
qq_43021038的博客
10-12 1760
UE4的大部分编辑器界面都是Slate构建的，包括一些插件也是由Slate构建。Slate是一个分辨率自适应的相对布局界面系统，为了完成这样的目的，slate实际上采用了一个两次排布的“思路”。(一)、首先是递归计算每个控件的大小，父控件会根据子控件来计算自己的大小。(二)、根据控件大小，计算出每个控件的绘制位置。
UE4 Slate 柱状图
qqQQqsadfj的博客
02-08 261
【代码】UE4 Slate 柱状图。
虚幻引擎UI组件开发快速入门【UMG/Slate】
新缸中之脑
02-13 3483
Unreal 的 UMG 提供了相当多的UI Widget，并允许你在蓝图中做很多事情。但是，有时可能仍需要创建自定义Widget来填补空白。这篇文章中将介绍使用自定义渲染创建Slate Widget的基础知识。 UMG Widget涉及两个类： 一个 UWidget 派生类，可以在编辑器中与之交互 一个 SCompoundWidget 类，处理低级功能和渲染 让我们看一个展示切片的简单UMG Widget，它具有给定的起始角度和圆弧大小。我们可以控制颜色和不透明度，并且可以选择使用图像来渲染它：
UE5 建模（一）Shapes
WTF_____的博客
04-06 4462
Shapes
UE进阶实例41（制作静态环形技能范围指示器）
Unity3d 攻城师一枚
02-04 1570
环形技能指示器，纯材质编写
实现圆环进度条的三种方式 div svg canvas
05-02
实现圆环进度条的三种方式 div svg canvas 可加qq群：179916551 免积分获取，沟通交流
KantanCharts:UE4 插件提供简单的 UMGSlate 图表绘制
05-30
Kantan图表 @注意：由于我个人构建脚本的特定更改，如果要使用此存储库，则现在可以使用“ develop”分支而不是“ master”分支。
自定义圆环进度条
mo1126的博客
09-03 270
自定义View, 慢慢研究 public class AnswerChartView extends View{ // 圆画笔 private Paint mCirclePaint; // 圆环画笔 private Paint mRingPaint; private Paint mRingPaint1; private Paint mRingP...
【虚幻引擎UE】UE5 简单实现范围计算并绘制圆圈
灵境引路人
11-16 2137
UE5 简单实现范围计算圆圈绘制，根据输入值及公式计算圆圈半径并绘制。
UE4 Onpaint画自定义顶点的三角形
qq_40756668的博客
12-11 2271
前言： 如何使用虚幻自带的绘画自定义顶点的函数FSlateDrawElement::MakeCustomVerts（）。 直接上代码演示: void SDrawWidget::TestCustomVerts(FSlateWindowElementList& outDrawElements, const FPaintGeometry& PaintGeometry, int32 LayerId) const { //获得一个笔刷 const FSlateBrush* MyBrush = F
UE4C++饼状图绘制（EChart）
c++、UE
04-20 2878
UE4C++实现饼状图
【UE·材质篇】用材质编辑器制作环形进度条
水鸡的游戏开发学习笔记
08-04 3163
环形进度条是在UI开发中非常常见的功能。用材质编辑器来制作环形进度条的教程网上也有不少，然而这些教程大都讲的不清不楚，有些甚至只是把材质编辑器的连线截图贴了上来，对于其中的节点功能、为什么这么连线都没有讲明白。我作为一个新人看这些教程时觉得很困惑。经过一段时间研究后才弄懂了其中的全部细节。本文就是把我在这过程中学到的内容分享。我会尽量讲清楚每一个细节点，包含CustomRotator、VectorToRadialValue、RadialGradientExponential节点、极坐标变换等。如果只是想知道
UE4 折线图学习笔记
qqQQqsadfj的博客
02-07 534
【代码】UE4 折线图学习笔记。
Unreal Engine 4 简介
最新发布
xie__jin__cheng的博客
05-14 300
Unreal Engine 4 简介
ue4 slateui
09-06
UE4 Slate UI是虚幻引擎4（Unreal Engine 4）中的一个用户界面工具，用于创建和管理游戏或应用程序的交互界面。它提供了一个强大的可定制的框架，可以在Windows、Mac、Linux等多平台上实现高质量的用户界面。 UE4 Slate UI采用一种可编程的方式来构建用户界面，而不是使用传统的拖放式设计工具。这样，开发者可以通过编写C++或蓝图脚本来创建和布局UI元素，以及实现与其交互的代码逻辑。这种方式给了开发者更大的自由度和灵活性，可以实现更复杂和个性化的UI设计。 Slate UI提供了丰富的UI元素库，包括按钮、文本框、滚动器、进度条等等，开发者可以根据自己的需求自由组合和定制这些元素。同时，Slate UI还支持多种样式和主题，可以轻松实现不同风格的界面设计。 除了基本的UI元素，UE4 Slate UI还提供了一些高级功能，如动画效果、交互效果和布局管理器等。这些功能可以帮助开发者实现更生动和吸引人的用户界面，提升用户体验。 总体而言，UE4 Slate UI是一个功能强大、灵活且可定制性高的用户界面工具，为开发者提供了创建和管理游戏或应用程序界面的一站式解决方案。无论是开发2D还是3D应用，UE4 Slate UI都能满足开发者的需求，并帮助他们实现精美和交互性强的用户界面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值