关于TileBrush中Viewbox,Viewport以及Stretch,AlignmentX/Y的详细研究

我们知道TileBrush是WPF中一个战斗力爆表的虚基类,从它派生出的DrawingBrush,ImageBrush和VisualBrush在WPF图形编程中发挥着重要作用。然而关于TileBrush的Viewbox、Viewport两大重要属性经常令人感到迷惑,Stretch、AlignmentX/Y两种对齐方式也往往让人搞混。这些知识在MSDN上讲得过于模棱两可,网上似乎也没有能够很清晰并且有条理地讲述它们之间关系的文章。于是今天下午我又牺牲了一下午的大好时光,做了一些实验来研究这个问题。

Silverlight把TileBrush的Viewbox和Viewport去掉了,于是战斗力暴减。

在讲述之前,我假设读这篇文章的你已经知道了这四个玩意的基本用法,比如什么ViewboxUnits之类的东西我就不讲了。若需要入门的话请参阅参考资料[1]和MSDN上的相关内容。本文主要分析TileBrush是如何利用Viewbox,Viewport以及Stretch,AlignmentX/Y来进行绘制的。

首先参考MSDN的一张图片(引用自参考资料[2]):

左下角表示的是我们的Brush用来绘制的原始素材(以下简称为原图,虽然它不一定来自图片文件)。左上角发亮的部分就是Viewbox区域。右边四个方框就是Viewport区域。可能有人认为右边发灰的部分是不显示的,其实不然,右边的发光部分只是为了突出Viewbox相对于Viewport的位置(默认设置AlignmentX/Y都为Center)。

Viewbox指示了一块基于原图的显示区域。请注意TileBrush并不会在原图中裁减掉Viewbox之外的内容,Viewbox只是起到提示作用,只有和另外三种属性结合到一起才能决定最终的显示效果。

Viewport指示了一块基于画布的显示区域。这里的画布就是包含了这个TileBrush的区域,如果画布开启了ClipToBounds(也在Silverlight中被砍掉了),则不管Viewport如何,超出画布区域之外的像素就都被和谐掉了,不会被绘制。

当指定了Viewbox和Viewport之后,就是Stretch、AlignmentX/Y登场了,它俩决定了Viewbox相对于Viewport的拉伸方式和相对位置。

先看Stretch,它决定了Viewbox相对于Viewport的拉伸方式。Stretch有四种取值:

1、None。取None时,就和什么都没发生一样,没有任何的伸缩调整。此时若Viewbox和Viewport的大小不同,则会根据AlignmentX/Y的取值来调整Viewbox相对于Viewport的位置。参见上图右边左上角的小图。

2、Fill。取Fill时,AlignmentX/Y失去作用,然后将Viewbox拉伸以填满Viewport,原图中Viewbox区域以外的部分将不可见。参见上图右边右上角的小图。

3、Uniform。取Uniform时,将把Viewbox拉伸,直到Viewbox的一个边抵达Viewport的边界为止。此时若Viewbox和Viewport的纵横比不同,则会根据AlignmentX/Y的取值来调整Viewbox相对于Viewport的位置。参见上图右边左下角的小图。

4、UniformToFill。取Uniform时,将把Viewbox拉伸,直到Viewbox的另一个边抵达Viewport的边界为止。此时若Viewbox和Viewport的纵横比不同,则会根据AlignmentX/Y的取值来调整Viewbox相对于Viewport的位置。原图中Viewbox区域以外的部分将不可见。参见上图右边右下角的小图。

再来看AlignmentX/Y。仅当

1、Stretch为Uniform或UniformToFill,并且Viewbox和Viewport具有不同的纵横比

2、Stretch为None并且Viewbox和Viewport具有不同的大小

这两种情况时,才会应用AlignmentX/Y来调整Viewbox相对于Viewport的位置。需要注意的是Viewbox相当于原图的一个把手,AlignmentX/Y移动Viewbox的同时也会移动原图。

这样一来,TileBrush中Viewbox,Viewport以及Stretch,AlignmentX/Y的关系就很明了了。

参考资料:

[1]DragonInSea:WPF and Silverlight 学习笔记(二十九):Brush(1)

[2]MSDN:TileBrush.Viewbox Property

[3]MSDN:TileBrush.AlignmentX Property

本文来自暗影吉他手的博客,原文地址:http://www.cnblogs.com/lhxarcher/archive/2011/02/20/1959198.html

时间: 2024-10-11 23:01:41

关于TileBrush中Viewbox,Viewport以及Stretch,AlignmentX/Y的详细研究的相关文章

Silverlight中Image控件Stretch属性的四种值比较

通过设置Image控件Stretch属性的值可以控制图片的显示形式: 包含的值:None.Fill.Uniform.UniformToFill 1 <Grid x:Name="LayoutRoot" Background="White" Height="489" Width="603"> 2 <Image Height="150" HorizontalAlignment="Lef

meta中的viewport指令

在查看bootstrap教程中,碰到 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 后,在群兄弟小胡帮助下,知道viewport含义: ViewPort <meta>标记用于指定用户是否可以缩放Web页面,如果可以,那么缩放到的最大和最小缩放比例是什么.使用 ViewPort <meta>标记还表示文档针对移动设备进行了优化.ViewP

在intellij IDEA中为web应用创建图片虚拟目录(详细截图)

在intellij IDEA中为web应用创建图片虚拟目录(详细截图) 在intellij IDEA中为web应用创建图片虚拟目录详细截图 工程配置和环境 操作步骤 在非IDE环境下配置虚拟目录 本文主要展示如何在intellij IDEA中为web应用添加虚拟目录映射,并附上步骤截图 工程配置和环境 我使用的版本为 tomcat 8.0.30 intellij 15.0.2 jdk 1.8.0_25 已经部署好了一个web应用,并且已经在IDEA中添加好了tomcat容器,现在想为这个web应

其他信息: 具有固定名称“Npgsql”的 ADO.NET 提供程序未在计算机或应用程序配置文件中注册或无法加载。有关详细信息,请参阅内部异常

其他信息: 具有固定名称“Npgsql”的 ADO.NET 提供程序未在计算机或应用程序配置文件中注册或无法加载.有关详细信息,请参阅内部异常 解决方法 在 App.config 的 configuration 中加入下面的内容  其中 红底部分是你调用的Npgsql的版本号 <system.data> <DbProviderFactories> <remove invariant="Npgsql"/> <add name="Npgs

arcgis中给属性文件加x y坐标

两种方式: 一, 1在ArcGIS 9.2桌面软件arcview级别以上软件中,加载要添加x,y坐标的数据,打开属性表,添加X.Y字段 2 右键X字段,选择calculate geometry,如果颜色显示为灰色,不能选择,把数据转换成shape格式 3出现了计算坐标的对话框,选择…….. 4最后结果,坐标加入到了属性表中.同样的方法添加y坐标. 二,ArcToolBox->Data Management Tools->Features->Add XY Coordinates工具就能自动

苹果MAC中安装并搭建Android开发环境的详细步骤

Android的开发平台搭建主要需要的工具有:Java虚拟机JDK.Eclipse.Eclipse插件ADT(Android Developer Tool)和Android开发包SDK,以下是具体的安装方法. A.JDK 在MAC中已经为我们预装了JDK并默认配置了Java系统变量,因此JDK对我们来说直接使用即可,查看MAC中的JDK版本方法是在命令行(硬盘/应用程序/实用工具/终端)中输入"java -version"并回车即可. B.Android SDK Android开发包同

Javascript 中关于if(xx)和 x==y的判断

Javascript 中关于if(xx)和 x==y的判断是非常基础但却十分重要的内容,以下是笔者学习的一些总结: 1.if(xx)的判断: 在if(xx)的判断中,括号里的内容会强制转换会布尔类型,结果为true则后面语句执行,为false则不执行.在此注意一条就可以了:对于括号里的表达式,会被强制转换为布尔类型. 如何强制转换呢?规则如下: 举几个栗子,如下代码输出什么? A: if ("hello") { console.log("hello") } 括号里的

win10电脑中彻底禁止金山毒霸手机助手启动的详细的步骤

我们在win10系统的使用中,有小伙伴在金山毒霸的使用出现了问题,我们都知道在电脑上安装金山毒霸的时候系统也会直接的安装使用金山毒霸的手机助手,这对我们咯爱说很是烦人,手机助手会一直的打开,今天小编就来跟大家分享一下win10电脑中彻底禁止金山毒霸手机助手启动的详细的步骤. 具体的方法和详细的步骤如下: 1.首先打开金山毒霸软件,界面如图,点击图中的按钮. 2.弹出一个下拉窗口,点击设置. 3.进入设置后,弹出新的窗口,在左下方点击实用工具. 4.在中间看到手机助手了,点击它就可以看到关于手机助

在SRAM、FLASH中调试代码的配置方法(附详细步骤)

因为STM32的FLASH擦写次数有限(大概为1万次),所以为了延长FLASH的使用时间,我们平时调试时可以选择在SRAM中进行硬件调试.除此之外,SRAM 存储器的写入速度比在内部 FLASH 中要快得多,所以下载程序到SRAM中的速度较快. 所以我们很有必要建立两个版本的工程配置,在SRAM中调试程序完毕后,再把代码下载到FLASH中即可.这篇笔记主要分享在keil5中配置FLASH调试与SRAM调试的详细配置方法及如何切换两种配置. 本篇笔记以STM32F103ZET6为例.其FLASH大