尊敬的各位意派Epub360用户，价值万元的DIY图片交互功能强势来袭！支持手势旋转、缩放、复制、删除、置顶/置底、竖直/水平翻转等强大功能！设计师、运营人都能做，不懂代码也能做！快来看看如何制作吧！
DIY图片组件功能简介（专业版可用）
该组件从无到有经历了一段异常复杂琐碎的策划、开发、优化过程，现正式要跟大家见面了。
其主要功能为：
用户在进入H5后，可以拖动DIY图片元素【简称DIY元素】，按住DIY元素周边的图标，可进行单指缩放、旋转、置顶/置底、水平/垂直翻转、复制、删除等多项操作，并且可以将DIY图片元素和其他元素一起截屏。
期待各位派友们解锁更多玩法。
案例演示网址：
https://www.epub360.com/manage/book/pmlh0a/present/
功能介绍
（一）打开编辑器界面，在图片组件中找到DIY图片组件，点击添加。
（二）在弹出的素材窗口中，我们将想要作为DIY图片元素的图片插入到编辑器中。
（三）点击DIY图片组件，右侧属性面板显示组件的DIY功能图标设置。
DIY组件的功能包括“按住拖动”、“旋转”、“缩放"、“删除”和其他的操作。我们将其分为四个图标，可以根据用户的需求来决定显示哪个图标。
启用拖动限制：为了避免用户在播放器中将DIY元素组件拖出画面外无法拖回，我们可以启用拖动限制。如图所示，当DIY元素组件向左拖拽到距离屏幕-30px时，（即拖出屏幕外30px）此时便无法再继续向左拖动。
设置缩放极限：为了避免用户将DIY元素组件放大到太大导致难以操作，或者缩小到看不到的情况发生，需要设置缩放的极限值，当超过这个极限值后便无法继续缩放。
编辑器中勾选上缩放限制后，默认的最大宽度是375px，即内框的宽度，默认最小宽度为74px，可 以保证手指可以精准选择DIY组件上面的图标按钮。
（四）如何替换DIY图片
我们可以在右侧属性面板的素材资源中，点击“更换”进行DIY组件的更换。DIY组件的显示比例会按照原图比例的50%进行显示，所以不用担心替换图片后会发生变形问题。
（五）在页面中添加DIY图片复制触发器
在演示案例中，DIY元素依靠点击菜单栏中的对应小图来触发复制，这时我们就要用到“复制DIY元素”触发器，步骤如下：
首先要先在编辑器中添加一个DIY元素，以供后续复制；
添加一个按钮，在点击这个按钮时触发“复制DIY元素”；
在“复制DIY元素”触发器中勾选上想要复制的DIY图片元素。
在播放器中，复制出来的DIY元素会继承其复制对象的按钮显示情况、缩放与拖动限制。
（六）如何参与截屏
DIY图片组件和其他组件略有不同，在参与截屏时，我们需要勾选一下截屏组件中的“包含所有克隆组件”，此时通过触发器复制出来的DIY元素也就可以一起参与截屏了。
目前截屏组件默认勾选该选项，我们不要做更改就可以了。
DIY元素的功能讲解到此结束啦，请各位派友尽情发散思维，创作更多的优秀H5作品吧！
演示案例制作流程
（一）在编辑器界面添加众多DIY图片组件作为后续触发的母版，将这些元素设置好属性后移到画面外。
（二）切换到layer页面中制作菜单。案例中制作了五大类的DIY元素layer
以及在他们之间切换的菜单栏tab。
（三）切换到页面中，将制作好的几个菜单栏添加到页面中，设置统一的高度164。这样layer便可以在页面中上下滑动了。勾选上相对于底部固定。
（四）点击layer容器，在右侧素材资源面板中，鼠标悬停在上面显示一个加号，点击加号进行layer的子元素的触发设置。
（五）在页面添加一个保存按钮，点击保存按钮进行截屏。截屏记得勾选“包含所有克隆组件”。截屏成功时跳转到下一页。
注：生成文件的勾选是因为需要参与下一页的截屏，若不需要参与二次截屏，一般无需勾选。
（六）跳转下一页后，在页面触发器中执行替换资源文件的操作，并且在之后将替换过的DIY图片和一些其他的说明文字二次截屏。最终效果完成。
注意：由于DIY元素参与截屏需要服务器返回数据的时间，所以此时第二次截屏推荐用倒计时触发截屏，如倒计时5s后截屏。使上一步的替换资源文件可以确保完成，服务器返回数据后再进行第二次的截屏。
2022.01更新：DIY组件，支持被“替换资源文件”触发器触发。
从此可以调整上传照片的大小、位置和角度了。
注意事项
（一）DIY图片尺寸制作规范
为了避免DIY图片放大后会有毛边，请在设计软件中将DIY元素放大数倍进行设计。之后在Epub360编辑器中缩小显示。这样可以在一定程度上避免放大DIY元素会产生的毛边。
（二）DIY图片置顶/置底规则
在使用复制DIY图片的触发器后，新复制出来的DIY图片会默认显示在页面的最顶层。此时其可能会遮盖到我们的一些页面元素，如菜单栏或保存按钮等。如图所示：
如果我们不想这些按钮被复制出来的DIY元素遮盖的话，解决办法有二：
给DIY元素添加拖动范围限制，让其拖动到“菜单栏”的位置处后就不能继续拖动。
不采用“复制DIY图片”触发器，提前准备多个DIY图片放到编辑器中初始隐藏，在播放器中点击按钮触发显示DIY元素。
（三）此外，DIY元素的置顶/置底还有一些规则，说明如下：
若DIY元素为母版，将DIY元素置于底层时，是将该元素置于所有DIY元素的最底层；置于顶层时，是将该元素置于所有的DIY元素的最顶层；
但由于我们在编辑器中会克隆出多个DIY元素，这些克隆出的元素处于图层的最顶层，将有可能会盖住原处于页面中最顶层的元素。
图标组件功能简介（体验版可用）
功能介绍
编辑器新增图标组件功能，可以对图标组件进行修改。
详细说明：
（一）点击图标组件，在编辑器组件中载入一个图标组件。在右侧点击不同的图标进行切换。
（二）如何修改图标组件的颜色与大小：当选中图标组件时，可以通过上方菜单栏的字号大小调整图标组件的大小，也可以通过上方的颜色框来修改图标组件的颜色。
（三）此外，图标组件也支持动效/动画、触发器等操作，让我们来试试吧！
艺术字赋值（企业版可用）
之前只有段落组件支持赋值，现在艺术字也可以赋值啦！
艺术字赋值需要用到触发器“艺术字赋值”，可以在触发器面板中找到，快用它试试更多精美的效果吧！
手机测试效果
设置截图
在哪里：