【译】Fuse入门（七）

2015-12-26 本文已影响0人赵赵811

本节结束UI组件一章，讲了Elements、Controls和Effects。
官网原文：https://www.fusetools.com/learn/fuse#element

元素 Element

元素类型的UI组件有一些通用的属性，这里列举一些：

点击测试模式 HitTestMode

设计交互时，有时我们需要选出可以交互的元素并知道如何交互，这一般被称为“hit testing”。在Fuse里，用户的输入与元素的交互可以用HitTestMode属性来进行设置。

看一下这段代码：

<Grid ColumnCount="2">
    <Rectangle Width="100" Height="100" Fill="#808" >
        <Clicked>
            <DebugAction Message="Clicked left" />
        </Clicked>
    </Rectangle>
    <Rectangle Width="100" Height="100" Fill="#808" HitTestMode="None" >
        <Clicked>
            <DebugAction Message="Clicked right" />
        </Clicked>
    </Rectangle>
</Grid>

左右两个矩形都设置了Clicked触发器，只有左边的矩形会在点击后做出动作，右边的矩形被明确关闭了点击测试。有时元素有相互遮盖情况，就可以设置HitTestMode只对下面的元素做测试。

HitTestMode的有效值包括：

None- 该元素不对点击测试做出反应
LocalBounds - 根据该元素的大小做点击测试
LocalVisual - 根据该元素的可视面做点击测试
LocalBoundsAndChildren - 根据元素及其子元素的大小做点击测试
LocalVisualAndChildren - 根据元素及其子元素的可视面做点击测试

ClipToBounds

正常情况时，一个元素嵌套在另一个元素内，里面的元素并不受外面的元素限制，比如下例：

<Panel Width="100" Height="100">
        <Image Margin="-100" File="Pictures/Picture1.jpg"
            StretchMode="UniformToFill" />
</Panel>

例子中的图片元素的宽和高会显示为300pt，而比图片小的Panel元素并未切剪图片来适应其范围。

如果你要特意切剪图片去适应父元素的大小，给Panel加上ClipToBounds属性即可：

<Panel Width="100" Height="100" ClipToBounds="true">
    <Image Margin="-100" File="Pictures/Picture1.jpg"
        StretchMode="UniformToFill" />
</Panel>

现在图片就不会溢出Panel的显示范围了。

不透明度 Opacity

一个对象的透明度可以用Opacity属性来设置。

<Panel Opacity="0.5"/>

Opacity为0时，元素完全透明并且不再对点击测试做出反应。当Opacity为1.0时，元素为缺省状态。

层 Layers

有时重新定义已有控件的外观是需要的。元素嵌套进容器时可以指定不同的“层”，比如你想让一个按钮多一个红色背景，只需给它嵌入一个背景层的元素即可：

<Button Text="Hello!">
    <Rectangle Fill="#931" Layer="Background" />
</Button>

这样，按钮原先的布局与行为特性不会改变，但外观变了。

Layer的有效值是：

Background
Layout
Overlay

关于控制器 About Controls

在Fuse里，一个有其语义功能的UI组件我们叫做控制器或控件（Control），它们外观上大相径庭。

举例来说，Button 按钮特有一些属性和相关事件，比如“Clicked”，但是一个按钮的外表在不同的主题或样式里却大为不同。

特效 Effects

Fuse可以渲染一套视觉效果，大部分控件里都能用得上。但是要用上这些视效，最好在Graphics mode模式下，如在原生主题下使用，会有很大的限制。

DropShadow

给一个元素加阴影：

<Rectangle Width="50" Height="50" Fill="#808">
    <DropShadow />
</Rectangle>

柔化一个阴影，角度垂直向下：

<Rectangle Width="50" Height="50" Fill="#808">
    <DropShadow Angle="90" Distance="12" Size="20" Spread="0.1"  />
</Rectangle>

还能加上些艺术效果，比如外发光：

<Panel Background="#000">
    <Circle Width="50" Height="50" Fill="#808">
        <DropShadow Distance="0" Size="50" Spread="0.2" Color="#ff06" />
    </Circle>
</Panel>

DropShadow的属性有：

角度Angle - 模拟光源来的方向
- 0 - 右
- 90 - 上
- 180 - 左
- 270 - 下
距离Distance - 元素到其阴影的距离，单位为点。
大小Size - 阴影的大小
扩散Spread - 阴影扩散的方式，数值越接近0，阴影的消散就越线性，数值最好在1.0以下，不然就容易失真。
颜色Color - 定义阴影的颜色，注意该属性支持带有Alpha通道值的色值，可以调节透明度（Alpha值是Hex色值的第四位，如#FFF0到#FFFF）。

模糊 Blur

给一个元素加模糊：

<Text Value="Hello there!">
    <Blur Radius="0.9" />
</Text>

注意像其它大部分属性一样，Radius也可以做动画效果，但是这里有可能造成大量资源消耗，所以最好用的时候在设备上测试一下。

去饱和度 Desaturate

给一个元素去饱和度, 全部或部分：

<Image File="Pictures/Picture1.jpg">
   <Desaturate Amount="0.4" />
</Image>

1.0为满值，意思是全部去饱和。

中间色 Halftone

经典的中间色特效：

<Image File="Pictures/Picture1.jpg">
    <Halftone />
</Image>

Halftone的属性有：

Spacing - 点距（浮点数，缺省值0.5）
Smoothness - 点的边缘可以从柔和到生硬（浮点数，缺省值2）
Intensity - 密度（浮点数，缺省值1）
DotTint - 着色点的数量（浮点数，缺省值0.5）
PaperTint - 纸着色的数量（浮点数，缺省值0.2)

蒙板 Mask

Fuse允许你用一个图片（或ImageSource）给一个元素设置蒙板：

<Rectangle Width="50" Height="50">
    <Mask File="Masks/Flower.png" />
</Rectangle>

Mask有如下属性：

Mode - 模式，指如何应用图片
- RGBA - 缺省值，源图的Alpha通道作为蒙板，并且源图的RGB值与元素的RGB值做“multiply”的层叠加。
- Alpha - 只用源图的Alpha通道作为蒙板，不去动元素的RGB值
- Greyscale - 用灰度蒙板的色彩组件作为要素与原始的Alpha值叠加
File - 本地项目目录里选图
Source - 非本地的图片源，比如HttpImageSource

如果用的是一张带Alpha通道的纯白图片，RGBA和Alpha是一个结果。

蒙板永远会自我拉伸到与元素同样的大小。