基础组件

矩形设置圆角

选中矩形后,可以在编辑区右侧的外观设置面板中为它设置圆角(四个圆角可以单独设置)。

001617b6d307b5d85d3fc0c22737704

快速圆角

快速圆角功能可以帮助我们快速修改矩形的圆角,使其边框改变形状。

  • 使用快捷键R或点击顶部工具栏选择矩形在画布内创建一个矩形;

  • 将鼠标悬停在矩形上时,四周会出现四个圆点,选中任一圆点并拖拽即可快速对矩形进行圆角设置。

00161b85d78009aea04520206e0c793

修改批注颜色

选中批注组件后,在编辑区右侧的外观设置面板中可以修改它的颜色。

image.png

修改文字外观

选中文字组件后,可以在编辑区右侧的外观设置面板中点为它设置字号、颜色、字体。 

image.png

注:目前除已提供字体外,不支持上传自己下载的字体使用。

插入图片

从内置组件中拖入一个图片组件,即可在右侧的外观设置面板中为图片组件插入图片。

001617b6e9fe21b0b8176dcf81fe5a6

注:目前插入图片支持JPG/PNG/GIFSVG格式,上传大小上限均为5M。

图片裁切

1.本地/素材库上传图片或者将本地图片直接拖入页面

001617b6e9fe21b0b8176dcf81fe5a6

2.双击图片即可矩形裁切,也可点击右侧圆形裁切

001617b79da7ae0ccc9c4cde49a966b

等比缩放:选中图片组件右侧锁定比例,图片即可等比放大/缩小

001617b6ff4a38f8048a6358032b200

拉伸图片:上传图片后双击裁切图片,裁切后再进行拉伸图片即可。

001617b70a88bd8f095c9db19475407

下载图片

墨刀原型内图片支持下载,下载格式为png。具体操作如下:

页面编辑区下载图片:

选中需要下载的图片组件,点击右下角的「导出」即可保存图片到本地。

如需批量下载页面内图片,可按住shift,鼠标左键点选,多选完成后,点击「导出」即可。

image.png

标注模式下载图片:

在项目运行预览区或通过分享链接查看,点击顶栏「标注」模式,选中需要下载的图片,点击「导出」即可保存图片到本地。

image.png

添加链接区域(热区)

链接区域(热区)可以为页面画布中的某个特定区域添加跳转(比如一张图片的局部), 链接区域组件在素材-基础组件当中,添加到页面画布后可以调整区域大小。

001619da2abb58ade3514b616734e73

快速添加链接区域(热区)

快速添加链接区域的快捷键:H+鼠标拖动   H = Hot Zone 热区

批量修改/替换文字

批量修改元素(文字)可以使用母版功能来实现,具体您可以查看母版的教程: 使用母版批量修改组件

聊天气泡

聊天气泡组件在素材-基础组件当中。

001619da2c6add5e025e82ec0b703b2

添加到页面画布后可以在外观设置面板中改变气泡指向的方向。

001619da2e2866bd92ed4ba9137eaf0

基础组件

点击「素材」,选择「基础」,即可使用墨刀的基础组件。

00161b85db198a78837cd1b6a41b026

素材库

点击状态栏内的「素材」选择 「发现」即可进入素材库,在素材库内你可以搜索自己想要的组件、页面、图标。

00161b85dd28439071863c3d617a1cb

素材库多种搜索方式可以满足你的多种需求,在搜索框点击小三角可以精准选择想要搜索的内容。

00161b85df5816fedc9319d42c82272

也可以在鼠标移动到素材库,就会出现弹窗,不仅可以选择相应的素材,并且还提供了使用较多的类型供用户使用。

image.png

素材库包含了所有的墨刀官方自制的素材,通过搜索关键字即可展现出所有的相关内容。另外还可以进入素材广场查找更多素材。

00161b85e091f77314c2f19963aa2a5

如何引用素材库

在你选择相应的素材后,在素材页面内可以直接点击引用按钮,点击后即可直接嵌入页面内。

00161b85e1f4d33946483aa44d75014

也可以进入元素详情页,点击右下角引用即可。

00161b85e3184ae93596cc20e9586e9

引用后,下次编辑项目不用在素材库内查找,可以直接在我的素材内的引用使用。

箭头组件

墨刀中新增了箭头组件,prd模式下的利器~(关于prd模式,点击查看

在基础组件中,将箭头组件拖拽到页面就可以使用,右侧设置面板还可以进行箭头外观的设置。

001617b7903f060a274c13f71e8f1fa