基于SVG流程

绘制及设计SVG

MG-Picker工作室从V2开始支持SVG批量导入,测试的矢量程序主要是Inscape及Adobe Illustrator, 理伦任何可以导出标准SVG图像的矢量软件都可以。

你可以在这些矢量软件里绘制基本上整个Picker, 支持导入的类型有选择按钮,命令按钮, 图形, 及面板或组的背景图。

kaylasvg

SVG绘制:米高, 绑定:Josh Sobel.

SVG绘制提示

  • SVG支持位图,但请尽量用矢量绘制而不是用位图,矢量图体积比较小,并且通常都比位图运行绘制性能要好。

  • 有些矢量软件支持的一些特殊功能,在存SVG会自动转为位图或JS脚本。这些在MG-Picker里不支持。

    • Adobe Illustrator的网络功能存SVG时会转为位图,类似功能在Inkscape存为SVG时会转为JS代码, 在导入SVG时会被忽略。

    • Adobe Illustrator的样式及符号SVG不支持。

  • SVG文本元素Qt支持得不好,会有定界框计算问题,并且各种字体难以准确手动计算, 所以MG-Picker并不支持文本元素作为单独按钮导入(可以作为其它元素的子对象)。在Picker里直接添加文本也有专门的文本工具很方便。

  • 给每个元素一个有意义的ID, 一来在导入时容易识别,二来可以直接作为选择按钮的成员(即Maya节点去掉命名空间的名称)在Inkscape你可以在 Layers and Objects面板里指定ID, 在Illustrator里则是图层面板更改图层名称及其下的元素名称。这些ID即使你在矢量软件里可以用重复的名字,在导出SVG里也会变得不同。因为SVG的元素ID应该是唯一的。

  • 关于元素的ID有一个特殊的约定,比如ID如果是[arm]abcd这样的,那[ ]里面的arm将变成按钮的名字,外面的abcd变成选择按钮的成员名称。要注意这里面不要有任何空格,因为有些软件里空格会被_替代造成生成的选择按钮的成员或名字不对。

  • MG-Picker工作室2.8及之后版本, 关于元素的ID还有一个特殊的约定,比如ID如果有(),那()里面则是按钮对象的类型提示,这个元素在导入窗口里将被导入为特定的类型,当然这个只是提示, 在导入窗口里可以手动任意指定的。目前这个类型只支持selectButton, commandButtongraphicItem, 因为其它类型目前还不支持导入。

  • Picker支持四个状态对应的四张图片,只有基本的状态是必须, 其它的可选。鼠标经过图像是当鼠标经过时使用的SVG, 鼠标按下图像是点击时使用的SVG,高亮图片是当选择按钮成员在Maya场景里被选后的高亮图片。四张图片都通过元素ID来使用,比如导入后一个按钮使用的元素ID是Body, 则鼠标经过时用来绘制的是鼠标经过图像里的body元素,其它两个状态同理。所以可以绘制基本状态,然后其它状态在同一SVG图片基础做一些修改即可。

批量导入

支持两种导入方式:

  1. 点击Picker面板右上角三角形按钮, 选择 导入SVG矢量图为多个Picker按钮.

batchimportsvg_ch

这种方式导入目标是面板,因此你在导入对话框里可以直接为该面板指定背景图片。

  1. 点击菜单栏图片菜单,选择 导入SVG矢量图为按钮.

menubarimportsvg_ch

这种方式没有导入目标,按钮会直接导入到场景而没有父对象,你可以稍后为它们指定父对象。

指定了基本的图片后,对话框将弹出:

svgimportdialog_ch

区域 1 : 右上角图像路径指定区域,可以指定四个状态的图像,都应该是SVG,可以直接拖放SVG图像到路径输入框里或点三角形按钮进行拾取。

区域 2 : SVG预览区,支持鼠标交互,比如点击选择某元素, 四个状态的图像都可以在这个区域预览,比如鼠标经过,鼠标点击, 点击一个被指定为选择按钮的元素后,则显示为高亮。

💡 导入后,每个元素都是各自的形状,但在这个预览区只显示方框以示选择。

区域 3: 显示元素的层级,点击 ignoreSVGElementBtn 按钮来忽略某元素,或其它按钮来指定元素为某类型的按钮 otherTypesButton 支持的类型为选择按钮,命令按钮及图形元素这三种。

区域 4: 导入选项:如果有目标面板,则你可以为其指定背景图片,如果没有,也可以为picker本身指定背景图片。也可以指定导入为群组,则会新建一个组来包含导入的所有按钮。并且可以为该组设置背景图。其它选项用来决定是否缩放SVG内容, 或者将ID作为选择按钮的成员。

💡 这个导入的设置会根据基本图片的路径被记住,下次你导入同样的图片,同样的设置会被记起。不过这重启MG-Picker 工作室后就不被记住。

你可以导出picker为svg文件以作设计参考,这个功能也有api支持点击此处 来了解更多。

你可以导入picker为svg文件成为按钮,这个功能也有api支持,点击此处 来了解更多。