美文网首页
【译】Fuse入门(七)

【译】Fuse入门(七)

作者: 赵赵811 | 来源:发表于2015-12-26 02:23 被阅读0次

本节结束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通道的纯白图片,RGBAAlpha是一个结果。

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

相关文章

网友评论

      本文标题:【译】Fuse入门(七)

      本文链接:https://www.haomeiwen.com/subject/itcbhttx.html