首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    小聊聊NGUI中Panel的Clip功能(之一)

    NGUI中的Panel具有裁剪的功能,操作上便是设置一个Panel类型即可~ image.png   原理上,该裁剪功能是基于Shader来实现的,简单列一下相关的着色器代码: v2f vert...Vector4(sharpness.x, sharpness.y, Mathf.Sin(angle), Mathf.Cos(angle))); } }   暂时不管其中的ClipArgs(也就是原Shader中的..._ClipArgs0),同样我们也暂时不管其中的index索引,其是NGUI用于实现多层Panel嵌套裁剪用的,此篇文章中我们不予讨论,但就ClipRange来看,其会被设置成:   Vector4(-...,就是将点坐标转换到Panel的局部坐标系下,并执行一个“归一化”操作,操作上就是首先执行一个位移操作,然后依据Panel的大小执行一个缩放,即:   假设顶点坐标为 vx, vy, Panel的中心位置为...裁剪效果: image.png   未设置Soft的Panel裁剪效果: image.png 假设顶点(以Panel坐标系下定义,此时Panel的中心位置即为(0,0))的坐标为(vx, vy

    1.3K20

    小聊聊NGUI中Panel的Clip功能(之二)

    上篇简单聊了一下NGUI中Panel裁剪的实现原理,总结来看其实比较简单,就是通过Shader计算fragment关于Panel裁剪区域的相对位置,然后通过调整alpha值来实现裁剪效果~   那么依样画瓢...,为了实现粒子在NGUI Panel中的裁剪,我们仅需要以Viewport坐标系为桥梁,同样利用Shader来判断粒子顶点是否在Panel的裁剪范围之内,并仍然通过调整alpha值来实现真正的裁剪效果~...) { UpdateClip(m_panel); m_panel.onClipMove += UpdateClip; }...} void UpdateClip(UIPanel panel) { if (panel && panel.hasClipping) {...ModelViewProjection变换后的xy分量除以w分量,可以将顶点变换至NormalizedDeviceCoordinates(NDC)空间,该空间下,xy的取值范围为[-1, 1],据此我们重新将其映射至[0, 1]范围中(

    1.2K20

    Grafana 7 Table panel (四)

    转换多用于可视化表中。转换类型如下: Reduce 减少 使用max,min,mean或last等函数将所有行或数据点减少为单个值。...用于显示表格中可视化的多个时间序列。 Add field from calculation 从计算添加字段 使用行值来计算新字段。...对于在表格中显示带有标签的时间序列很有用,其中每个标签键都变成一个单独的列。 Merge 合并 合并许多系列/表,并返回一个表,其中可合并的值将合并到同一行中。...用于显示一个表格中可视化的多个系列,表格或两者的组合。...选项参数 Panel:面板选项 Field :整个图表的全局属性 如长度、宽度、阀值、字符大小、单位、映射等等, Overrides :覆盖全局图表属性,它可以独立生成对于某列的额外属性,以便自定义脱离全局属性

    8.7K20

    New UWP Community Toolkit - Staggered panel

    概述 前面 New UWP Community Toolkit 文章中,我们对 2.2.0 版本的重要更新做了简单回顾,其中简单介绍了 Staggered panel,本篇我们结合代码详细讲解  Staggered...Staggered panel 是一种交错排列的面板控件,允许面板中的 item 以非整齐排列的方式排列,每个 item 会被添加到当前占用空间最小的列。...遍历 panel 中的 children,根据 GetColumnIndex(columnHeights) 方法传回指定 child 的列索引,计算原则是找到 columnHeights 数组中最小值,...在 columnHeights 数组中 ,找到最大值,返回新的尺寸:宽度为可用尺寸的宽度,高度为列数组的最大值;可以看出,这个尺寸就是根据子元素计算出的 panel 需要的空间大小; protected...大家也可以看到,StaggeredPanel 中 child 的排列规则,确实是按照每个列高度最小的列来排列;而在 panel 宽度变化时,也对应作了重新的计算和排列。

    1.1K60
    领券