教程7:图片教程

教程7:图片教程

图片教程 教程数据 该图像控制用于插入的图像,其位置在指定源使用属性URI: 与其余控件一样,将对图像进行测量和排列,因此其大小不仅取决于原始图像的尺寸。布局属性确定图像的可用空间,而拉伸属性定义图像如何填充可用空间: 无:保留尺寸。 填充:图像将填...

图片教程

教程数据

图像控制用于插入的图像,其位置在指定使用属性URI

与其余控件一样,将对图像进行测量和排列,因此其大小不仅取决于原始图像的尺寸。布局属性确定图像的可用空间,而拉伸属性定义图像如何填充可用空间:

  • :保留尺寸。
  • 填充:图像将填充可用空间,尺寸会被修改。
  • 均匀:图像将尽可能多地填充可用空间,以保持宽高比。
  • UniformToFill:图像完全填充了可用空间,保留了宽高比,如果图像太大,则将其裁剪。

下面的示例显示图像控件的所有可能的强度模式:

ImagesTutorialImg1.jpg

图像刷

ImageBrush使用图像来绘制图形对象的区域。通常应用于面板边框的“ 背景”属性或填充形状。该ImageSource的财产是为了保持该位图的内容。

ImageBrush源自TileBrush。使用TileBrush绘制区域时,您可以控制三个元素:contenttile输出区域。

ImagesTutorialImg6.jpg

TileBrush定义了一些有趣的属性,这些属性配置了如何将图块放置在输出区域中。

伸展

此属性指定内容如何拉伸以适合其图块。在以下示例中,所有拉伸模式都应用于Rectangle元素:

ImagesTutorialImg2.jpg

注意

如您在前面的屏幕快照中所见,当图块不完全适合输出区域时,它们居中。这是默认行为,尽管您可以使用“ 视图框”和“ 视口”属性(如下所述)进行更改。

视图框(Viewbox)

此属性指定定义图块的内容的子图像。所述ViewboxUnits属性用于指示是否Viewbox控件值被解释为相对,默认值,或绝对值。

下面的示例示出了不同的效果拉伸模式上的TileBrush具有Viewbox控件比所述输出面积小。请注意,TileBrush的内容永远不会剪切到Viewbox(在Viewbox之外的图像部分会被着色以使其清晰可见)。

ImagesTutorialImg3.jpg

视口

此属性指定输出区域中图块的位置和尺寸。默认情况下,TileBrush具有覆盖整个输出区域的单个图块。

ViewportUnits属性用于指定是否视口使用绝对或相对坐标。相对时(默认模式),坐标相对于输出区域的大小。点(0,0)代表输出区域的左上角,而(1,1)代表输出区域的右下角。

瓷砖模式

TILEMODE属性允许你指定一个怎样的内容的TileBrush重复填写输出区域。要创建属性的模式TILEMODE设置为平铺FlipXFlipYFlipXY视口的的的TileBrush设置,使其比你画的面积; 否则,无论您使用哪种TileMode设置,都只会生成单个图块。

以下示例显示了不同的切片模式:

ImagesTutorialImg4.jpg

调整尺寸

默认情况下,noesisGUI使用在GPU中实现的高质量重采样算法缩放图像。尽管大多数时候质量都很好,但是该算法往往会模糊结果以减少混叠。可以通过在任何UIElement后代上使用BitmapScalingMode附加属性来更改默认算法。

ImagesTutorialImg41.jpg

纹理图集

纹理图集是由许多单独的纹理组成的大型纹理,以提高性能。传统上,它是一种在屏幕上制作精灵动画的方法。

尽管您可以使用所需的工具,但我们提供了TexturePacker插件,可直接生成有效的XAML,可用作NoesisGui中的地图集。该插件可以在我们的github中找到。以下是使用该工具生成的地图集:


下面的示例演示如何引用该词典以在XAML文件中使用Sprite:

VisibleHiddenHiddenVisibleHiddenHiddenVisibleHiddenHiddenVisibleHiddenHiddenVisibleHiddenHiddenVisibleHiddenHiddenVisibleHiddenHiddenVisibleHiddenHiddenVisibleHiddenHiddenVisibleHiddenHiddenVisibleHiddenHiddenVisibleHidden
ImagesTutorialImg5.jpg

9切片缩放

9切片缩放是一种不错的方式,可以用来缩放符号而不会扭曲它们。这在创建标志,气泡等时特别有用。该符号分为9个部分,并且仅中间部分被拉伸。拐角会用符号变换,但不会变形。

ImagesTutorialImg7.jpg

这种技术对于Flash设计人员来说很常见,可以通过使用网格轻松地进行仿真。

运行时映像

有时您需要生成在编译时不可用的映像。例如,当您从Internet下载图像或您的应用程序支持用户生成的图像时。对于这些情况,提供了TextureSource类。一个TextureSource被初始化的传递本地质感手柄。初始化后,必须将其设置为相应的ImageImageBrush

注意

NoesisGUI希望使用预乘格式的Alpha纹理。传递纹理手柄时,请考虑到这一点。

http://www.noesisengine.com/forums/viewtopic.php?f=3&t=194

C ++

void SetTexture(ID3D11Texture2D* d3dTexture, FrameworkElement* root)
{
    Ptr texture = D3D11Factory::WrapTexture(d3dTexture, 512, 512, 1,
      TextureFormat::BGRA8, false);
    Image* image = root->FindName("image");
    image->SetSource(MakePtr(texture));
}

NoesisGUI直接了解Unity提供的类Texture2D

C#-Unity

Grid grid = (Grid)GetComponent().Content;

Texture2D texture = (Texture2D)Resources.Load("Noesis");
TextureSource source = new TextureSource(texture);

Image image = (Image)grid.FindName("image");
image.SetSource(source);

注意

尽管在此示例中,我们使用Texture2D,但也支持RenderTexture和MovieTexture。实际上,支持所有从Texture派生的类。

文章来源于互联网:教程7:图片教程

0

评论0

鱼翔浅底,鹰击长空,驼走大漠
没有账号? 注册  忘记密码?