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

    小聊聊NGUIPanel的Clip功能(之一)

    NGUIPanel具有裁剪的功能,操作上便是设置一个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.2K20

    小聊聊NGUIPanel的Clip功能(之二)

    上篇简单聊了一下NGUIPanel裁剪的实现原理,总结来看其实比较简单,就是通过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.6K20

    零基础入门 22: UGUI Panel

    然后在看一下Panel的组件内容 ? 咦?大家可能会说,这不就是一个Image组件么?可以说Panel是一个Image,但是不能说Image是一个Panel。...而panel是一个有默认BackGround的Image,并且RectTransform也是和默认的image有所区别。 我们再到Scene视图看一下俩者区别。...可以下图看出,Panel是默认全屏大小,而Image也是默认的100 100大小,经过我们的拖拽可以看出俩者明显的区别。 ? 再说下俩者在Image组件的区别。...最后,我们再来演示下如何把Image变成一个Panel。 ? 然后在Scene视图看下俩者的对比 ? 从上图可以看出来,经过我们的修改,已经把一个默认的image变成了Panel。...其实Panel的作用是省去了我们手动的这2步,大家可以自己取舍使用哪一个 好了,今天的Panel分享到这里就结束了。 下一期,是我们近期UGUI主题分享的最后一个组件,ScrollView。

    2.9K30
    领券