小程序动态

15502933391

咨询热线

韩化英app合作开发(5)--Vision模块

Image模块

智能手机App或许绚丽,总之原因在于相片多样了他们App的可视化外貌。能说,现阶段智能手机上的大部份App基本上都有赖于相片的采用。

而在韩化英上表明相片的模块为:Image模块。那时,他们就专门针对如是说Image模块的采用形式。

读取相片

具体来说,他们就行了找一个龙虾的相片,重新命名为image.png置放在media配置文件中。实例标识符如下表所示:

<Image
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:layout_alignment="horizontal_center"
    ohos:alpha="0.5"
    ohos:image_src="$media:image"/>

这儿,他们除将相片置放在水准的尾端以外,还增设了其有效性为0.5,表明效用如下表所示:

 韩化英app合作开发(5)--Vision模块 小程序动态 韩化英app合作开发(5)--Vision模块 小程序动态 韩化英app合作开发(5)--Vision模块 小程序动态 韩化英app合作开发(5)--Vision模块 小程序动态 韩化英app合作开发(5)--Vision模块 小程序动态

翻转商业模式

在前述的合作开发中,他们相片的边线可能将并没有像下面那样的充裕。有时给相片的地方性可能将极小,怎样将相片等比率翻转为一般来说的大小不一呢?

这个时候,他们就需要采用其提供更多的翻转商业模式特性:scale_mode。先给我们看呵呵,图稿的龙虾标识符:

<Image
    ohos:id="$+id:test_image"
    ohos:height="50vp"
    ohos:width="match_content"
    ohos:layout_alignment="horizontal_center"
    ohos:alpha="0.5"
    ohos:image_src="$media:image"/>

运转后,效用如下表所示:

 韩化英app合作开发(5)--Vision模块 小程序动态 韩化英app合作开发(5)--Vision模块 小程序动态 韩化英app合作开发(5)--Vision模块 小程序动态 韩化英app合作开发(5)--Vision模块 小程序动态 韩化英app合作开发(5)--Vision模块 小程序动态

这儿,因为增设了一般来说的度,引致龙虾的上半身少了一点儿。下面,他们逐一增设其翻转商业模式看一看每一翻转商业模式具体内容的效用怎样:

 韩化英app合作开发(5)--Vision模块 小程序动态 韩化英app合作开发(5)--Vision模块 小程序动态 韩化英app合作开发(5)--Vision模块 小程序动态 韩化英app合作开发(5)--Vision模块 小程序动态 韩化英app合作开发(5)--Vision模块 小程序动态

能看见,zoom结尾的都是完备的龙虾相片,所以都是等比率增大,而已表明边线相同,比如说zoon_center等比率增大表明在尾端,而start表明在右边,end表明在右边。

而inside为维持双蝴比翻转相片与zoom_center效用那样。

stretch假如相片小于表明边线,所以相片会被非等比率增大至整座地区,假如长度大,所以看上去扁,假如度大,的确是变长效用。

再者center与clip_center就是间接裁剪相片,而已将相片德博瓦桑县表明。

scale_x与scale_y

总之,他们还有更间接的翻转特性:scale_x与scale_y。

实例如下表所示:

<Image
    ohos:id="$+id:test_image"
    ohos:height="50vp"
    ohos:width="match_content"
    ohos:layout_alignment="horizontal_center"
    ohos:alpha="0.5"
    ohos:image_src="$media:image"
    ohos:scale_x="0.5"
    ohos:scale_y="0.5"/>

运转后,效用如下表所示:

 韩化英app合作开发(5)--Vision模块 小程序动态 韩化英app合作开发(5)--Vision模块 小程序动态 韩化英app合作开发(5)--Vision模块 小程序动态 韩化英app合作开发(5)--Vision模块 小程序动态 韩化英app合作开发(5)--Vision模块 小程序动态

能看见,scale_x与scale_y是翻转的Image模块,并不是翻转的里面的相片。这儿的翻转与下面的翻转商业模式有明显的区别,需要格外注意。

相片裁剪

当Image模块小于相片大小不一时,他们有时期望对相片进行裁剪,毕竟不是每一相片压缩起来都很好看的。

实例标识符如下表所示:

<Image
    ohos:id="$+id:test_image"
    ohos:height="50vp"
    ohos:width="match_content"
    ohos:layout_alignment="horizontal_center"
    ohos:clip_alignment="bottom"
    ohos:alpha="0.5"
    ohos:image_src="$media:image"/>

这儿,他们选择保留底部信息,多余的部分裁剪下面。效用如下表所示:

 韩化英app合作开发(5)--Vision模块 小程序动态 韩化英app合作开发(5)--Vision模块 小程序动态 韩化英app合作开发(5)--Vision模块 小程序动态 韩化英app合作开发(5)--Vision模块 小程序动态 韩化英app合作开发(5)--Vision模块 小程序动态

去掉clip_alignment特性,图稿还是下面的翻转图稿,能看见默认情况下。相片时自动从左往右从上往下表明,小于Image就裁剪右边或者下边。

而这儿,他们增设clip_alignment为bottom,假如Image度小于相片度,所以默认裁剪掉上部分,保留下部分。

动态读取相片

下面的他们给Image增设相片,统统都是在XML布局文件中操作的。假如你想在标识符中间接操作,能采用如下表所示标识符:

public class MainAbilitySlice extends AbilitySlice{
    private Image image;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        this.image=(Image)findComponentById(ResourceTable.Id_test_image);
        this.image.setPixelMap(ResourceTable.Media_image);
    }
}

效用就不展示了,与首图那样。而已其配置文件的Image没有增设image_src这一点儿区别。

假如想实现圆形头像那种效用,和Button模块那篇那样,增设其background_element特性的shape为oval,且其自身宽高相等即可。

相关文章

网友留言

发表评论

◎欢迎参与讨论