多媒体组件点击「组件」，选择「内置」-「多媒体」，即可使用墨刀的多媒体组件，为您的原型添加更加丰富的内容呈现形式。图片图片组件中可以在原型中上传图片。在墨刀原型工具中，可以对图片进行插入、分割、裁切、导出等操作。1、插入图片从常用组件中拖入一个图片组件，即可在右侧的外观设置面板中为图片组件插入图片。    注：目前插入图片支持GIF，GIF上传大小上限为5M。2、图片分割原型工具中支持对图片进行分割操作，便捷拆分图片。步骤如下：1.插入图片后，在右侧外观设置栏点击【图片分割】按钮，或是选中图片后单击右键选择【分割】，图片下方会出现分割窗口。2.在分割窗口中选择十字、横向或纵向的分割方式，会出现相应的分割参考线。3.选择合适的位置并单击，即可将图片拆分。4.拆分后的图片之间会出现紫色手柄，将鼠标悬停在手柄上，光标所在位置会出现一个方向箭头（上下方向调整垂直间距，左右方向调整水平间距），单击并拖动鼠标即可调整图片间距。注意：单张/多张图片都支持进行分割，选中多张图片后分割，参考线触碰的每张图片都会被分割。3、图片裁切步骤1：置入图片组件后选择本地/素材库上传图片或者将本地图片直接拖入页面步骤2：双击图片即可触发裁切，也可在右侧设置面板点击【裁切】按钮，选择矩形或圆形裁切步骤3：等比缩放：选中图片组件右侧锁定比例或按住shift键，图片即可等比放大/缩小步骤4：拉伸图片：上传图片后双击裁切图片，裁切后再进行拉伸图片即可。4、导出图片墨刀原型内图片支持导出，导出格式为png。具体操作如下：页面编辑区导出图片：选中需要导出的图片组件，点击右下角的「导出」即可保存图片到本地。如需批量导出页面内图片，可按住shift，鼠标左键点选，多选完成后，点击「导出」即可。标注模式导出图片：在文件运行预览区或通过分享链接查看，点击顶栏「标注」模式，选中需要导出的图片，点击「导出」即可保存图片到本地。轮播图使用【轮播图】组件，可以自动轮流播放图片。1、编辑轮播图中的图片从多媒体组件中拖出轮播图组件，在右侧设置面板中「轮播图图片」部分，鼠标悬浮于右下角「···」按钮，可以选择从「本地上传」或者是从「素材库中」上传图片。  添加轮播图片数量：点击「轮播图图片」设置部分，最右侧的加号即可添加图片数量。  删除轮播图片：选择想要删除的图片，点击右下角的「···」按钮，选择「删除」。  调整轮播图片顺序：直接在缩略图处拖拽图片，即可调整轮播图顺序。2、轮播图设置滚动方向：选中轮播图组件后，右侧属性面板可以设置横向和纵向两种滚动模式，指示点自动归于恰当位置。自动轮播/点击轮播：选择自动轮播，可以设置轮播的时间间隔。您也可以选择点击轮播，点击缩略图上的小闪电图标，设置为：点击轮播图，跳转到其他页面或其他状态。指示点及指示点颜色：选择是否显示指示点，及指示点的颜色。3、为轮播图图片添加交互事件选中轮播图组件，右侧外观栏内在相应图片上方点击小闪电标志添加交互事件，可以实现点击跳转页面或切换页面/组件状态网页您可以在多媒体组件中拖拽【网页组件】至画布，即可在原型中添加网页了。注意：“网页”组件只能预览 https 协议、且允许嵌入外部网站的网页。1、使用步骤：1.将网页组件拖拽进画布后，双击上方的网址输入栏，或是在右侧设置面板，输入您需要嵌入的https协议的网址。2.根据原型的布局及网页具体情况调整组件大小。  3.点击「预览」，即可在原型文件中直接浏览网页了。支持滑动查看网页并进行点击操作。2、实现效果：利用网页组件，您可以在原型中置入多样的内容。例如您在墨刀制作的流程图、思维导图等，将分享时的链接粘贴至网页组件，即可在原型文件中直接查看。还能够利用网页组件插入地图，具体操作请查看地图组件。注：部分外部网站设有安全访问机制，会导致预览失败，您可以嵌入后，预览一下看下是否正常显示。视频组件视频组件可以帮助您快速嵌入视频。目前支持输入带有https协议的视频地址，支持腾讯/优酷/哔哩哔哩/youtube/vimeo视频链接和MP4, WebM, OGG格式链接。嵌入的视频可以设置自动播放、循环播放、静音播放和隐藏控制条，此类设置在运行时生效。但需要注意的是因网站限制，各个网站视频支持功能不同。支持静音播放：youtube、vimeo。支持循环播放：youtube、vimeo。支持控制条隐藏：youtube、vimeo。支持自动播放：youtube、vimeo、腾讯视频、B站、优酷视频。  1、使用腾讯嵌入视频1.打开你所需要置入的腾讯视频（推荐使用网页版），在播放界面的下方点击【分享】-【链接】2.在墨刀内点击视频组件，右侧粘贴复制的链接2、使用优酷嵌入视频1.打开你所需要置入的优酷视频（推荐使用网页版），在播放界面的下方点击【分享】-【复制页面地址】2.在墨刀内点击视频组件，右侧粘贴复制的链接3、使用哔哩哔哩嵌入视频1.打开你所需要置入的哔哩哔哩视频，在播放界面的下方点击【分享】-【复制视频地址】2.在墨刀内点击视频组件，右侧粘贴复制的链接音频组件可以通过格式转换器等方式将音频格式更换为带有https协议的音频地址，支持 MP3、WAV、AAC、OGG 格式的链接。音频可以设置为自动播放、循环播放、换页继续播放、隐藏播放器。二维码二维码组件你可以把它当做一个二维码转换器，输入带有http/https的协议网址即可生成一个新的二维码。还可以利用这个组件实现跳转其他墨刀文件，扫描二维码即可跳转到设置的某个已有页面。二维码组件支持设置前景色和后景色，并且支持导出。地图组件目前内置的地图组件仅支持模拟地图样式，如果您有在原型中插入真实地图的需要，可以借助【网页组件】来实现效果。具体操作如下：使用“腾讯地图”来添加地图使用你的 QQ 号登录腾讯地图开放平台 ：（腾讯给每个用户分配了不同的key，所以不能直接复制本案例里或其它人给的url，需要登录自己的账号一步步按教程操作。）在官网顶栏，点击「开发文档」，选择地图组件查看详情：然后在地图组件页内会有一个「调用地址」部分会看到这样一个 URL：   [http://apis.map.qq.com/tools/poimarker?type=0&amp;marker=coord:39.96554,116.26719;title:成都;addr:北京市海淀区复兴路32号院]&lt;br其中coord指的是地址的经纬度，经度纬度之间会通过逗号隔开。将这个 URL 中的 http 替换为 https，然后将里面的地址替换为你想要展示的地址，然后进入墨刀，拖拽一个网页组件，将组件的 URL 设为上面的 URL 就可以了：  https://apis.map.qq.com/tools/poimarker?type=0&amp;marker=coord:39.9416682,116.393692;title:鼓楼;addr:北京市鼓楼东大街;&amp;key=MY_MAP_KEY&amp;referer=myapp  MY_MAP_KEY生成方法如下：1. 在腾讯地图点击右上角的控制台；2. 然后应用管理——我的应用，添加key，然后复制下自己的key，替换到上面那段代码中；  如果需要更复杂的功能，也可以根据腾讯地图文档实现更复杂的地图展示。聊天气泡聊天气泡组件在「组件-内置-多媒体组件」当中。聊天气泡组件添加到页面画布后可以在外观设置面板中改变气泡指向的方向。

多媒体组件

图标组件

图表组件

Axure导入

编辑页面

文件设置

编辑组件

添加交互事件

添加批注

使用技巧

原型制作

素材面板

常用组件

表单组件

导航组件

我的组件/图片

素材库

企业素材库

母版的使用

使用文件模板

字体商用常见问题说明

组件素材

页面交互

动态组件

固定组件

交互案例教程（视频）

交互效果

分享与协作

分享设置

添加评论

版本管理

企业协作

文件演示

预览模式

演示常见问题

演示分享

导出交付

标注模式

开发交付

导入sketch设计稿

导入异常

设计稿交互

【原型】如何确定设备尺寸

墨刀嵌入第三方预览方法

页面相关问题

文件相关问题

导出相关问题

组件使用问题

演示分享问题

能使用iPad编辑文件吗

其他问题

<h1 id="多媒体组件">多媒体组件</h1>
<p>点击「组件」，选择「内置」-「多媒体」，即可使用墨刀的多媒体组件，为您的原型添加更加丰富的内容呈现形式。</p>
<h2 id="图片">图片</h2>
<p>图片组件中可以在原型中上传图片。在墨刀原型工具中，可以对图片进行插入、分割、裁切、导出等操作。</p>
<h3 id="1、插入图片">1、插入图片</h3>
<p>从常用组件中拖入一个图片组件，即可在右侧的外观设置面板中为图片组件插入图片。  </p>
<img src="https://cdn.modao.cc/hc/templetpanel/crtp.png" style="width:800px">
  
<p>注：目前插入图片支持GIF，GIF上传大小上限为5M。</p>
<h3 id="2、图片分割">2、图片分割</h3>
<p>原型工具中支持对图片进行<strong>分割操作</strong>，便捷拆分图片。<br>步骤如下：<br>1.插入图片后，在右侧外观设置栏点击【图片分割】按钮，或是选中图片后单击右键选择【分割】，图片下方会出现分割窗口。<br>2.在分割窗口中选择十字、横向或纵向的分割方式，会出现相应的分割参考线。<br>3.选择合适的位置并单击，即可将图片拆分。<br>4.拆分后的图片之间会出现紫色手柄，将鼠标悬停在手柄上，光标所在位置会出现一个方向箭头（上下方向调整垂直间距，左右方向调整水平间距），单击并拖动鼠标即可调整图片间距。<br><strong>注意</strong>：单张/多张图片都支持进行分割，选中多张图片后分割，参考线触碰的每张图片都会被分割。</p>
<p><img src="http://cdn.modao.cc/hc/tpfg.gif" alt="drawing" width="600px"/>

<h3 id="3、图片裁切">3、图片裁切</h3>
<ul>
<li>步骤1：置入图片组件后选择本地/素材库上传图片或者将本地图片直接拖入页面</li>
</ul>
<img src="https://cdn.modao.cc//hc/zrtp.png" style="width:800px">

<br>

<ul>
<li>步骤2：双击图片即可触发裁切，也可在右侧设置面板点击【裁切】按钮，选择矩形或圆形裁切</li>
</ul>
<img src="http://cdn.modao.cc/hc%2Ftpcq1.jpg" style="width:600px">

<br>

<ul>
<li>步骤3：等比缩放：选中图片组件右侧锁定比例或按住shift键，图片即可等比放大/缩小</li>
</ul>
<img src="https://cdn.modao.cc//hc/dbsftp.png" style="width:800px">

<br>

<ul>
<li>步骤4：拉伸图片：上传图片后双击裁切图片，裁切后再进行拉伸图片即可。</li>
</ul>
<img src="https://cdn.modao.cc//hc/lstp.gif" style="width:800px">

<h3 id="4、导出图片">4、导出图片</h3>
<p>墨刀原型内图片支持导出，导出格式为png。具体操作如下：</p>
<h4 id="页面编辑区导出图片："><strong>页面编辑区导出图片</strong>：</h4>
<p>选中需要导出的图片组件，点击右下角的「导出」即可保存图片到本地。<br>如需批量导出页面内图片，可按住shift，鼠标左键点选，多选完成后，点击「导出」即可。</p>
<img src="https://cdn.modao.cc//hc/ymbjqxztp.png" style="width:800px">

<h4 id="标注模式导出图片："><strong>标注模式导出图片</strong>：</h4>
<p>在文件运行预览区或通过分享链接查看，点击顶栏「标注」模式，选中需要导出的图片，点击「导出」即可保存图片到本地。</p>
<img src="https://cdn.modao.cc//hc/bzmsxztp.png" style="width:800px">

<h2 id="轮播图">轮播图</h2>
<p>使用【轮播图】组件，可以自动轮流播放图片。</p>
<p><img src="http://cdn.modao.cc/hc%2Flunbotu.jpg" width="500"/>

<h3 id="1、编辑轮播图中的图片">1、编辑轮播图中的图片</h3>
<p>从多媒体组件中拖出轮播图组件，在右侧设置面板中「轮播图图片」部分，鼠标悬浮于右下角「···」按钮，可以选择从「本地上传」或者是从「素材库中」上传图片。  </p>
<p><img src="https://cdn.modao.cc/v7/230803-28-1.png"width="400"/>

<p><strong>添加轮播图片数量</strong>：点击「轮播图图片」设置部分，最右侧的加号即可添加图片数量。  </p>
<p><img src="https://cdn.modao.cc/v7/230803-28-2.png"width="400"/>

<p><strong>删除轮播图片</strong>：选择想要删除的图片，点击右下角的「···」按钮，选择「删除」。  </p>
<p><img src="https://cdn.modao.cc/v7/230803-28-3.png"width="400"/>

<p><strong>调整轮播图片顺序</strong>：直接在缩略图处拖拽图片，即可调整轮播图顺序。</p>
<p><img src="https://cdn.modao.cc//hc/tzlbtsx.png" width="450px"/>

<h3 id="2、轮播图设置">2、轮播图设置</h3>
<p><strong>滚动方向</strong>：选中轮播图组件后，右侧属性面板可以设置横向和纵向两种滚动模式，指示点自动归于恰当位置。</p>
<p><img src="https://cdn.modao.cc//hc/szlbtgd.png" width="450px"/>

<br>

<p><strong>自动轮播/点击轮播</strong>：选择自动轮播，可以设置轮播的时间间隔。
<br></p>
<p>您也可以选择点击轮播，点击缩略图上的小闪电图标，设置为：点击轮播图，跳转到其他页面或其他状态。<br><strong>指示点及指示点颜色</strong>：选择是否显示指示点，及指示点的颜色。</p>
<p><img src="https://cdn.modao.cc//hc/lbtzsd.png" width="400px"/>

<h3 id="3、为轮播图图片添加交互事件">3、为轮播图图片添加交互事件</h3>
<p>选中轮播图组件，右侧外观栏内在相应图片上方点击小闪电标志添加交互事件，可以实现点击跳转页面或切换页面/组件状态</p>
<p><img src="https://cdn.modao.cc//hc/lbtjh.png" width="700px"/>

<h2 id="网页">网页</h2>
<p>您可以在多媒体组件中拖拽【网页组件】至画布，即可在原型中添加网页了。<br><strong>注意：“网页”组件只能预览 https 协议、且允许嵌入外部网站的网页。</strong></p>
<br>

<h3 id="1、使用步骤：">1、使用步骤：</h3>
<ul>
<li>1.将网页组件拖拽进画布后，双击上方的网址输入栏，或是在右侧设置面板，输入您需要嵌入的https协议的网址。</li>
</ul>
<p><img src="http://cdn.modao.cc/hc%2Fwyzj1.jpg" width="700px"/>

<ul>
<li>2.根据原型的布局及网页具体情况调整组件大小。  </li>
<li>3.点击「预览」，即可在原型文件中直接浏览网页了。支持滑动查看网页并进行点击操作。</li>
</ul>
<p><img src="http://cdn.modao.cc/hc%2Fwyzj2.jpg" width="800px"/>

<br>

<h3 id="2、实现效果：">2、实现效果：</h3>
<p>利用网页组件，您可以在原型中置入多样的内容。<br>例如您在墨刀制作的流程图、思维导图等，将分享时的链接粘贴至网页组件，即可在原型文件中直接查看。</p>
<p><img src="http://cdn.modao.cc/hc%2Fwyzj3.jpg" width="800px"/>

<br>

<p>还能够利用网页组件插入地图，具体操作请查看<a href="https://modao.cc/hc/articles/28#%E5%9C%B0%E5%9B%BE%E7%BB%84%E4%BB%B6">地图组件</a>。<br><strong>注</strong>：部分外部网站设有安全访问机制，会导致预览失败，您可以嵌入后，预览一下看下是否正常显示。</p>
<h2 id="视频组件">视频组件</h2>
<p>视频组件可以帮助您快速嵌入视频。目前支持输入<strong>带有https协议</strong>的视频地址，支持腾讯/优酷/哔哩哔哩/youtube/vimeo视频链接和MP4, WebM, OGG格式链接。
<br></p>
<p>嵌入的视频可以设置<strong>自动播放、循环播放、静音播放和隐藏控制条</strong>，此类设置在运行时生效。
<br></p>
<p>但需要注意的是因网站限制，各个网站视频支持功能不同。
<br></p>
<p>支持静音播放：youtube、vimeo。
<br></p>
<p>支持循环播放：youtube、vimeo。
<br></p>
<p>支持控制条隐藏：youtube、vimeo。
<br></p>
<p>支持自动播放：youtube、vimeo、腾讯视频、B站、优酷视频。  </p>
<h3 id="1、使用腾讯嵌入视频">1、使用腾讯嵌入视频</h3>
<p>1.打开你所需要置入的腾讯视频（推荐使用网页版），在播放界面的下方点击【分享】-【链接】</p>
<p><img src="https://cdn.modao.cc//hc/qrsplj.png" width="500"/>

<br>

<p>2.在墨刀内点击视频组件，右侧粘贴复制的链接</p>
<p><img src="https://cdn.modao.cc//hc/qrsplj2.png" width="500"/>


<h3 id="2、使用优酷嵌入视频">2、使用优酷嵌入视频</h3>
<p>1.打开你所需要置入的优酷视频（推荐使用网页版），在播放界面的下方点击【分享】-【复制页面地址】</p>
<p><img src="https://cdn.modao.cc/hc%2Fyksp.jpg" width="700"/>

<br>

<p>2.在墨刀内点击视频组件，右侧粘贴复制的链接</p>
<h3 id="3、使用哔哩哔哩嵌入视频">3、使用哔哩哔哩嵌入视频</h3>
<p>1.打开你所需要置入的哔哩哔哩视频，在播放界面的下方点击【分享】-【复制视频地址】</p>
<p><img src="https://cdn.modao.cc/hc%2Fblbl.jpg" width="700"/>

<br>

<p>2.在墨刀内点击视频组件，右侧粘贴复制的链接</p>
<h2 id="音频组件">音频组件</h2>
<p>可以通过格式转换器等方式将音频格式更换为<strong>带有https协议</strong>的音频地址，支持 MP3、WAV、AAC、OGG 格式的链接。音频可以设置为自动播放、循环播放、换页继续播放、隐藏播放器。</p>
<h2 id="二维码">二维码</h2>
<p>二维码组件你可以把它当做一个<strong>二维码转换器</strong>，输入带有http/https的协议网址即可生成一个新的二维码。<br>还可以利用这个组件实现跳转其他墨刀文件，扫描二维码即可跳转到设置的某个已有页面。<br>二维码组件支持设置前景色和后景色，并且支持导出。</p>
<p><img src="https://cdn.modao.cc//hc/ewm.png" width="900"/>

<h2 id="地图组件">地图组件</h2>
<p>目前内置的地图组件仅支持模拟地图样式，如果您有在原型中插入真实地图的需要，可以借助【网页组件】来实现效果。具体操作如下：</p>
<h3 id="使用腾讯地图来添加地图">使用“腾讯地图”来添加地图</h3>
<p>使用你的 QQ 号登录<a href="http://lbs.qq.com/" target="_blank">腾讯地图开放平台</a> ：<br>（腾讯给每个用户分配了不同的key，所以不能直接复制本案例里或其它人给的url，需要登录自己的账号一步步按教程操作。）<br>在官网顶栏，点击「开发文档」，选择地图组件查看详情：</p>
<p><img src="https://cdn.modao.cc//hc/tjdt.png" width="800"/>
<br>

<p>然后在地图组件页内会有一个「调用地址」部分会看到这样一个 URL：  </p>
<blockquote>
<p> [<a href="http://apis.map.qq.com/tools/poimarker?type=0&amp;marker=coord:39.96554,116.26719;title:%E6%88%90%E9%83%BD;addr:%E5%8C%97%E4%BA%AC%E5%B8%82%E6%B5%B7%E6%B7%80%E5%8C%BA%E5%A4%8D%E5%85%B4%E8%B7%AF32%E5%8F%B7%E9%99%A2%5D">http://apis.map.qq.com/tools/poimarker?type=0&amp;marker=coord:39.96554,116.26719;title:成都;addr:北京市海淀区复兴路32号院]</a></p>
</blockquote>
<br>

<p>&lt;br
<span>其中coord指的是地址的经纬度，经度纬度之间会通过逗号隔开。</span>
<br></p>
<p>将这个 URL 中的 http 替换为 https，然后将里面的地址替换为你想要展示的地址，然后进入墨刀，拖拽一个网页组件，将组件的 URL 设为上面的 URL 就可以了：  </p>
<blockquote>
<p><a href="https://apis.map.qq.com/tools/poimarker?type=0&amp;marker=coord:39.9416682,116.393692;title:%E9%BC%93%E6%A5%BC;addr:%E5%8C%97%E4%BA%AC%E5%B8%82%E9%BC%93%E6%A5%BC%E4%B8%9C%E5%A4%A7%E8%A1%97;&amp;key=MY_MAP_KEY&amp;referer=myapp">https://apis.map.qq.com/tools/poimarker?type=0&amp;marker=coord:39.9416682,116.393692;title:鼓楼;addr:北京市鼓楼东大街;&amp;key=MY_MAP_KEY&amp;referer=myapp</a>  </p>
</blockquote>
<br>

<span>
MY_MAP_KEY生成方法如下：
1. 在腾讯地图点击右上角的控制台；
2. 然后应用管理——我的应用，添加key，然后复制下自己的key，替换到上面那段代码中；
</span>
<br>

  
<p>如果需要更复杂的功能，也可以根据<a href="http://lbs.qq.com/tool/component-marker.html" target="_blank">腾讯地图文档</a>实现更复杂的地图展示。
<br></p>
<h2 id="聊天气泡">聊天气泡</h2>
<p>聊天气泡组件在「组件-内置-多媒体组件」当中。<br>聊天气泡组件添加到页面画布后可以在外观设置面板中改变气泡指向的方向。</p>
<img src="https://cdn.modao.cc/hc/templetpanel/ltqp.png" style="width:800px">

<br>

