.

DIY图片组件与图标组件上线、艺术字赋值功能实现

老赵发表于:2021年05月10日 10:18:40更新于:2021年08月18日 16:28:32

尊敬的各位意派Epub360用户,价值万元的DIY图片交互功能强势来袭!支持手势旋转、缩放、复制、删除、置顶/置底、竖直/水平翻转等强大功能!设计师、运营人都能做,不懂代码也能做!快来看看如何制作吧!

DIY图片组件功能简介(专业版可用)

该组件从无到有经历了一段异常复杂琐碎的策划、开发、优化过程,现正式要跟大家见面了。

其主要功能为:

用户在进入H5后,可以拖动DIY图片元素【简称DIY元素】,按住DIY元素周边的图标,可进行单指缩放、旋转、置顶/置底、水平/垂直翻转、复制、删除等多项操作,并且可以将DIY图片元素和其他元素一起截屏。

期待各位派友们解锁更多玩法。

案例演示网址:

https://wmd5we.epub360.com.cn/v2/manage/book/421vv0/

image.png

https://www.epub360.com/manage/book/pmlh0a/present/

image.png

功能介绍

(一)打开编辑器界面,在图片组件中找到DIY图片组件,点击添加。

image.png


(二)在弹出的素材窗口中,我们将想要作为DIY图片元素的图片插入到编辑器中。

image.png

(三)点击DIY图片组件,右侧属性面板显示组件的DIY功能图标设置。

image.png

  1. DIY组件的功能包括“按住拖动”、“旋转”、“缩放"、“删除”和其他的操作。我们将其分为四个图标,可以根据用户的需求来决定显示哪个图标。

image.png

  1. 启用拖动限制:为了避免用户在播放器中将DIY元素组件拖出画面外无法拖回,我们可以启用拖动限制。如图所示,当DIY元素组件向左拖拽到距离屏幕-30px时,(即拖出屏幕外30px)此时便无法再继续向左拖动。

image.png

  1. 设置缩放极限:为了避免用户将DIY元素组件放大到太大导致难以操作,或者缩小到看不到的情况发生,需要设置缩放的极限值,当超过这个极限值后便无法继续缩放。

        编辑器中勾选上缩放限制后,默认的最大宽度是375px,即内框的宽度,默认最小宽度为74px,可            以保证手指可以精准选择DIY组件上面的图标按钮。

image.png

(四)如何替换DIY图片

我们可以在右侧属性面板的素材资源中,点击“更换”进行DIY组件的更换。DIY组件的显示比例会按照原图比例的50%进行显示,所以不用担心替换图片后会发生变形问题。

image.png

(五)在页面中添加DIY图片复制触发器

在演示案例中,DIY元素依靠点击菜单栏中的对应小图来触发复制,这时我们就要用到“复制DIY元素”触发器,步骤如下:

首先要先在编辑器中添加一个DIY元素,以供后续复制;

添加一个按钮,在点击这个按钮时触发“复制DIY元素”;

在“复制DIY元素”触发器中勾选上想要复制的DIY图片元素。

在播放器中,复制出来的DIY元素会继承其复制对象的按钮显示情况、缩放与拖动限制。

image.png

(六)如何参与截屏

DIY图片组件和其他组件略有不同,在参与截屏时,我们需要勾选一下截屏组件中的“包含所有克隆组件”,此时通过触发器复制出来的DIY元素也就可以一起参与截屏了。

目前截屏组件默认勾选该选项,我们不要做更改就可以了。

image.png

DIY元素的功能讲解到此结束啦,请各位派友尽情发散思维,创作更多的优秀H5作品吧!

 

演示案例制作流程

(一)在编辑器界面添加众多DIY图片组件作为后续触发的母版,将这些元素设置好属性后移到画面外。

image.png

(二)切换到layer页面中制作菜单。案例中制作了五大类的DIY元素layer

image.png

以及在他们之间切换的菜单栏tab。

image.png

 

 

 

(三)切换到页面中,将制作好的几个菜单栏添加到页面中,设置统一的高度164。这样layer便可以在页面中上下滑动了。勾选上相对于底部固定。

 

(四)点击layer容器,在右侧素材资源面板中,鼠标悬停在上面显示一个加号,点击加号进行layer的子元素的触发设置。

image.png

(五)在页面添加一个保存按钮,点击保存按钮进行截屏。截屏记得勾选“包含所有克隆组件”。截屏成功时跳转到下一页。

注:生成文件的勾选是因为需要参与下一页的截屏,若不需要参与二次截屏,一般无需勾选。

image.png

(六)跳转下一页后,在页面触发器中执行替换资源文件的操作,并且在之后将替换过的DIY图片和一些其他的说明文字二次截屏。最终效果完成。

  • 注意:由于DIY元素参与截屏需要服务器返回数据的时间,所以此时第二次截屏推荐用倒计时触发截屏,如倒计时5s后截屏。使上一步的替换资源文件可以确保完成,服务器返回数据后再进行第二次的截屏。

image.png

注意事项

(一)DIY图片尺寸制作规范

为了避免DIY图片放大后会有毛边,请在设计软件中将DIY元素放大数倍进行设计。之后在Epub360编辑器中缩小显示。这样可以在一定程度上避免放大DIY元素会产生的毛边。

(二)DIY图片置顶/置底规则

在使用复制DIY图片的触发器后,新复制出来的DIY图片会默认显示在页面的最顶层。此时其可能会遮盖到我们的一些页面元素,如菜单栏或保存按钮等。如图所示:

image.png

如果我们不想这些按钮被复制出来的DIY元素遮盖的话,解决办法有三:

  1. 在“page页面”中设计DIY页面,将保存按钮等放到“masterpage页”;此时处于“page页面”中的元素复制出来后也不会遮盖到“masterpage页”的元素。

  2. 给DIY元素添加拖动范围限制,让其拖动到“菜单栏”的位置处后就不能继续拖动。

  3. 不采用“复制DIY图片”触发器,提前准备多个DIY图片放到编辑器中初始隐藏,在播放器中点击按钮触发显示DIY元素。

(三)此外,DIY元素的置顶/置底还有一些规则,说明如下:

若DIY元素为母版,将DIY元素置于底层时,是将该元素置于所有DIY元素的最底层;置于顶层时,是将该元素置于所有的DIY元素的最顶层;

但由于我们在编辑器中会克隆出多个DIY元素,这些克隆出的元素处于图层的最顶层,将有可能会盖住原处于页面中最顶层的元素。

 

 

图标组件功能简介(体验版可用)

功能介绍

编辑器新增图标组件功能,可以对图标组件进行修改。

image.png

详细说明:

(一)点击图标组件,在编辑器组件中载入一个图标组件。在右侧点击不同的图标进行切换。

(二)如何修改图标组件的颜色与大小:当选中图标组件时,可以通过上方菜单栏的字号大小调整图标组件的大小,也可以通过上方的颜色框来修改图标组件的颜色。

image.png

(三)此外,图标组件也支持动效/动画、触发器等操作,让我们来试试吧!

image.png

 

艺术字赋值(企业版可用)

之前只有段落组件支持赋值,现在艺术字也可以赋值啦!

艺术字赋值需要用到触发器“艺术字赋值”,可以在触发器面板中找到,快用它试试更多精美的效果吧!

 

手机测试效果

image.png

设置截图

image.png

在哪里:


image.png

--------- 不了解设计的程序员不是好客服 ---------------