皮皮网

1.UE4-Slate源码学习（六）slate渲染Part2-Paint控件绘制
2.谁知道永恒之塔的移动出技能怎么改文件的？
3.konva.js 原理与源码解析

UE4-Slate源码学习（六）slate渲染Part2-Paint控件绘制

       上一篇文章介绍了绘制一个SWindow的初期步骤，即计算整个UI树的控件大小，为绘制做准备。文章随后深入探讨了绘制流程的第二步，即执行FSlateApplication::PrivateDrawWindows()后，开始调用SWidget::Paint()函数，nodejs源码在哪里每个控件随后实现其虚函数OnPaint()。

       在这一过程中，绘制参数被封装在FPaintArgs中，作为Paint和OnPaint过程中的关键引用参数。FSlateRHIRenderer与FSlateDrawBuffer是继承自FSlateRenderer的类，作为FSlateApplicationBase的全局变量，在构造时创建。在绘制过程中，通过GetDrawBuffer()函数可获取到FSlateDrawBuffer对象。

       FSlateDrawBuffer实现了Slate的绘制缓冲区，内部封装了FSlateWindowElementList数组，用于存储多个SWindow下的绘制元素列表。每个SWindow通过AddWindowElementList()返回一个元素列表。

       FSlateWindowElementList负载了SWindow内的所有图元信息，内部封装了FSlateDrawElement的数组，包含Cached和Uncached元素，以及SWindow的女性健康源码指针和用于渲染的批处理数据FSlateBatchData。

       FSlateDrawElement是构建Slate渲染界面的基本块，封装了UI树节点控件需要渲染的相关信息，如渲染变换、位置、大小、层级ID、绘制效果等，以及后续渲染阶段需要的相关数据。

       在Paint流程中，处理当前传入的SWindow和ChildWindows，首先判断窗口是否可见和是否最小化，然后从参数封装的OutDrawBuffer中获取WindowElementList。调用SWindow的PaintWindow()函数开始绘制窗口，并最终返回所有子控件计算完的最大层级。接着，子窗口递归绘制。

       PaintWindow()函数在绘制窗口时，首先调用SetHittestArea()设置点击区域，HittestGrid会判断窗口大小是否改变，若不变则仅更新窗口在屏幕中的位置。构造FPaintArgs参数后，将其封装到FSlateInvalidationContext中。打印预览出现源码

       FSlateInvalidationRoot类的PaintInvalidationRoot()函数可以作为控件树的根节点或叶子节点（SInvalidationPanel），构建快速路径避免每次绘制都计算大小和Paint函数，有利于优化。本篇文章主要分析正常慢速路径调用流程，优化相关将另文分析。

       PaintSlowPath()函数从SWindow开始调用Paint()函数，并定义LayerId从0开始作为参数，进行实际的绘制相关计算。

       Paint()函数首先处理裁剪、透明度混合、坐标转换等代码。若SWidget包含NeedsTick掩码，则调用Tick函数，我们在日常开发中通过蓝图或lua使用Tick函数时即调用到这里，通过SObjectWidget::Tick调用到UUserWidget::NativeTick供实现Tick。构造FSlateWidgetPersistentState PersistentState作为SWidget的变量，表示Paint时的状态。

       PersistentState.CachedElementHandle将当前SWidget存储到FSlateWindowElementList中的WidgetDrawStack数组中。

       更新FPaintArgs中的父节点参数和继承可点击测试参数，判断点击测试状态，然后将当前SWidget添加到点击测试中。调用虚函数OnPaint，java clone方法源码由控件自己实现。

       OnPaint()函数参数包括绘制参数引用、几何体、裁剪矩形、缓冲元素列表、层级、控件风格、父节点状态等。最后处理重绘标签、延迟绘制相关内容、UpdateWidgetProxy()根据缓存句柄更新快速路径中需要处理标记设置为Volatile不稳定状态的SWidget。

       虚函数OnPaint()由子类自己实现，本文列举了SImage、SButton、SCompoundWidget和SConstraintCanvas的OnPaint()示例代码学习。

       在SImage中，简单判断Brush是否存在以及BrushDrawType的类型，然后调用FSlateDrawElement::MakeBox将控件添加到缓冲区元素列表中。

       SButton继承自SCompoundWidget，GetBorder()根据当前按钮状态返回ui中设置的Enabled、Press、Hover、有偿任务系统源码Disabled等状态的Brush。

       SCompoundWidget作为合成节点，有且只能有一个子节点，且在Paint时强制将子节点的LayerId+1，同时SCompoundWidget可以单独设置混合颜色和透明度，影响子节点。

       SConstraintCanvas作为SWidget的基类对应UMG中常用的UCanvasPanel，通过ArrangeLayeredChildren()对孩子进行层级排序，并根据孩子的层级是否相同存储bool值在ChildLayers中。遍历所有孩子，判断是否开启新层级，递归调用Paint函数，最后返回最大层级。

       SConstraintCanvas::ArrangeLayeredChildren函数中，获取设置bExplicitChildZOrder，表示可以将同层一次渲染，有利于提高渲染器批处理。对所有孩子排序，排序规则为FSortSlotsByZOrder。遍历所有孩子，判断可见性掩码、计算偏移、锚点、位置、拉伸缩放等，封装成FArrangedWidget存储到ArrangedChildren中，用于OnPaint时有序遍历。判断每个孩子ZOrder是否相同，相同则bNewLayer为false，大于LastZOrder则将bNewLayer设置为true，最终存储到ArrangedChildLayers中，用于OnPaint函数判断是否将layerId+1。

       FSlateDrawElement::MakeBox()函数在OnPaint之后调用，将绘制控件的相关信息通过创建FSlateDrawElement绘制元素对象，添加到SWindow管理的FSlateWindowElementList元素列表中。创建Payload用于存储贴图等相关信息，根据控件Paint过程中的参数调用Element.Init初始化绘制元素，得到为该控件绘制创建的FSlateDrawElement对象。

       总结整个Slate绘制流程的第二步，我们没有分析快速处理和优化细节，而是按照正常绘制流程分析代码。通过从PaintWindow开始遍历整个控件树，处理每个空间节点的Paint、OnPaint函数，最终目的是给每个控件创建一个FSlateDrawElement对象，存储渲染线程绘制所需的相关信息，并添加到FSlateWindowElementList中。理解了整个调用流程，整个过程较为清晰，本文基于UE4版本4..2。

谁知道永恒之塔的移动出技能怎么改文件的？

       代码给你了，自己看哈。

       把解除冲击变成主动技能，移动地狱火，无目标暗袭

       有人担心是木马，现在公开源代码，帮忙顶一下

       让剑星攻击上，让守护血条上，让魔道瞬移米，，所有职业加快技能释放速度，让你有个小均衡！

       下午将放出，移动地狱火，及剑星移动粉碎，杀气;杀星主动反击，及主动旋风斩，主动短剑及标枪,移动猛兽三连，无目标暗袭

       下午或晚上也将放出！其实下载的文件都是大同小异，就是修改了魔道，或剑，或杀的技能释放条件，距离，打断===，你自己对比下，文件可以用记事本打开，可以自己修改或插入！现在公开源文件

       移动地狱火

       <id></id>

       <desc>STR_SKILL_WI_HellFire_G3</desc>

       <desc_long>STR_SKILL_WI_HellFire_DESC</desc_long>

       <desc_abnormal>STR_SKILL_WI_HellFire_Abnormal</desc_abnormal>

       <name>WI_HellFire_G3</name>

       <type>Magical<pe>

       <sub_type>Attack</sub_type>

       <skill_category>SKILLCTG_NONE</skill_category>

       <ultra_skill>0</ultra_skill>

       <ultra_transfer>0</ultra_transfer>

       <chain_category_level>3<ain_category_level>

       <chain_category_priority>WI_HellFire<ain_category_priority>

       <pvp_remain_time_ratio></pvp_remain_time_ratio>

       <pvp_damage_ratio></pvp_damage_ratio> pvp伤害惩罚比例。。

       <skillicon_name>CBT_WI_HellFire_G3</skillicon_name>

       <delay_id></delay_id>

       <activation_attribute>Active</activation_attribute>

       <cost_parameter>MP</cost_parameter>

       <cost_end_lv></cost_end_lv>

       <cost_end></cost_end> MP消耗

       <target_slot>None</target_slot>

       <target_stop>0</target_stop>

       <hostile_type>Direct</hostile_type>

       <delay_type>0</delay_type>

       <delay_time></delay_time> 延迟时间。。。

       <target_maxcount>1</target_maxcount> 最大目标数量

       <first_target>Target</first_target>

       <first_target_valid_distance></first_target_valid_distance> 目标距离。。

       <revision_distance></revision_distance>

       <target_range>OnlyOne</target_range>

       <target_species_restriction>All</target_species_restriction>

       <target_relation_restriction>Enemy</target_relation_restriction>

       <cancel_rate></cancel_rate> 被打断率

       <obstacle>4</obstacle>

       <add_wpn_range>0</add_wpn_range>

       <casting_delay></casting_delay> 吟唱时间

       <auto_attack>maintain</auto_attack>

       <peace_skill>0</peace_skill>

       <motion_name>Pointfire3</motion_name>

       <target_marker_radius>0</target_marker_radius>

       <cast_fx>FC_wi_hellfire.G1.cast</cast_fx>

       <cast_fx_bone>GB_FINGER</cast_fx_bone>

       <cast_voice>b_attack_sfire_a</cast_voice>

       <show_weapon>0</show_weapon>

       <fire_fx>FC_wi_hellfire.G1.Fire</fire_fx>

       <fire_fx_bone>GB_FINGER</fire_fx_bone>

       <pre_fx>skill_wi_hellfire.hellfire.pre</pre_fx>

       <pre_fx_delay>1.</pre_fx_delay>

       <pre_fx_bone>ground</pre_fx_bone>

       <hit_fx>FC_wi_hellfire.G1.hit</hit_fx>

       <hit_fx_bone>FX_HIT_fix</hit_fx_bone>

       <hit_fx_attacker_oriented>0</hit_fx_attacker_oriented>

       <status_fx>sts_stun.stun.status</status_fx>

       <status_fx_bone>Bboxtop</status_fx_bone>

       <status_fx_slot>3</status_fx_slot>

       <effect1_type>SpellATK_Instant</effect1_type>

       <effect1_noresist>0</effect1_noresist>

       <effect1_target_type>Target_Only</effect1_target_type>

       <effect1_reserved1></effect1_reserved1>

       <effect1_reserved2></effect1_reserved2>

       <effect1_reserved6>0</effect1_reserved6>

       <effect1_reserved>Fire</effect1_reserved>

       <effect1_reserved></effect1_reserved>

       <effect1_reserved></effect1_reserved>

       <effect1_reserved>1</effect1_reserved>

       <effect1_critical_prob_mod2></effect1_critical_prob_mod2>

       <effect1_hop_type>SkillLV</effect1_hop_type>

       <effect1_hop_a></effect1_hop_a>

       <effect1_hop_b></effect1_hop_b>

konva.js 原理与源码解析

       Konva是一个基于2D canvas的类库，适用于桌面和移动设备，提供图形组件、事件系统、变换、高性能动画、节点嵌套与分层等功能。Konva与FabricJS都是高性能2D渲染库，适合编辑器场景，各有优势。

       Konva架构基于图形树，类似DOM结构，通过add和remove操作增删节点。核心包括SceneContext和HitContext，实现绘制填充和描边。Konva通过Canvas缓存绘制图形信息，用户点击时判断击中图形。

       拾取方案中，Konva在SceneCanvas上绘制图形同时在HitCanvas上绘制，使用随机索引颜色，用户点击时根据缓存判断图形。流程包括获取交集、计算击中图形，触发交互事件。

       Konva的Node类是图形的底层封装，包含各种方法，所有Konva节点最终继承自Node。渲染流程包括添加图形、绘制、缓存和重绘。Node类的draw方法调用drawScene和drawHit，最终执行具体图形类的绘制方法。

       属性更新流程使用Factory模块绑定属性，通过getter和setter实现，统一调用Node._setAttr方法更新属性并批量重绘。Konva历史源码基于ES3定义类，Factory模块在代码中添加属性绑定逻辑。

       总体而言，Konva的结构设计、图形绘制、交互处理和属性更新机制共同构建了一个高效、灵活的2D图形渲染框架。