跳到主要内容

设计元件/模块图标

本文档介绍元件/模块的图标设计,主要步骤包括 元件图标绘制在图标中添加引脚并绑定 两个部分,这两步为基础内容。

此外,介绍了一些 高级功能 的介绍,为进阶内容。

图标绘制工作区

元件/模块封装 的过程中,打开 接口标签页,右侧则为图标绘制工作区,包含图标组件库图标绘制区显示设置与属性编辑区,如下图所示。

alt text
alt text

用户可以从图标组件库中点击或拖拽需要添加的组件,添加到图标绘制区中。可供添加的组件包括 矩形直线椭圆路径文本引脚 共六种。

当用户点击图标绘制区的空白处,右侧将显示显示设置区,用户可以调整当前视图设置,包括 图形选项窗格 设置;当用户选中 图标绘制区中的某个图标组件,右侧将显示该组件的属性编辑区,详见 元件图标绘制 中对应的内容。

元件图标绘制

本节详细介绍各个图标组件的基础属性,阅读本节后,将能自行绘制任意需要的元件/模块图标。

当添加图标组件至绘制区后,点击某个图标组件,在右侧可以看见该组件的属性设置,如下图所示。

组件属性设置
组件属性设置

各类型的组件通用的属性配置项如下表所示。

属性模块属性配置项含义及说明
大小和位置X控制该组件左上角的定位点在绘图区中的横坐标,向为正方向。一般填写 5 的倍数。
Y控制该组件左上角的定位点在绘图区中的纵坐标,向为正方向。一般填写 5 的倍数。
宽度控制该组件的宽度。一般填写 5 的倍数。宽度的设置不影响路径引脚类型组件的实际显示样式。当填写负数时,相当于水平翻转该组件。
高度控制该组件的高度。一般填写 5 的倍数。高度的设置不影响直线路径引脚类型组件的实际显示样式。当填写负数时,相当于垂直翻转该组件。
排列隐藏将隐藏该组件,仅影响当前绘图区的视角,不影响调用模块时该组件的实际显示。在组件隐藏后,可以在窗格点击显示全部重新显示隐藏的组件。
显示显示该隐藏的组件,仅影响当前绘图区的视角,不影响调用模块时该组件的实际显示。
置于顶层将该组件置于所有组件的最顶层,最顶层的绘图组件将基于透明度覆盖下层的组件,鼠标点击时也会优先选中。
置于底层将该组件置于所有组件的最底层,最底层的绘图组件将被上层的组件覆盖,鼠标点击时不会被优先选中。
逆时针旋转以组件中心点为旋转中心,逆时针旋转该组件。
顺时针旋转以组件中心点为旋转中心,顺时针旋转该组件。
样式线条颜色点击选色按钮 选色图标 可以弹出调色板,用于选择线条的颜色和透明度。对引脚类型的组件无效。
线条宽度填写线条宽度值,以像素(px)为单位,默认为 2px,对引脚类型的组件无效。
填充颜色点击选色按钮 选色图标 可以弹出调色板,用于选择填充颜色和透明度。对于矩形直线椭圆,默认为白色;对于路径默认为透明;对文本默认为黑色;对引脚直线无效。
数据条件该组件将在什么条件下显示。可以引用 参数列表 中的参数,例如 mode==1 条件的组件只在参数 mode 值为 1 时显示。该配置项在引脚绘图组件的属性编辑区不显示。

此外,在绘制区中选中一个组件后,也可以用拖动的方式改变组件的 XY 属性;可以拖拽组件四周的圆点 圆点 改变组件的大小,即宽度高度属性;

拖拽组件左上角的菱形图标 菱形 可以自由旋转该组件,实现属性栏中的逆时针旋转、顺时针旋转功能。

直接拖动
直接拖动

针对不同组件的详细说明详见以下文档。

在图标中添加引脚并绑定

本节介绍在图标中绑定 引脚列表 中的引脚。

在完成元件图标绘制操作后,用户可以从图标组件库 中拖拽引脚组件到图标绘制区,将引脚组件自带的蓝色圆点对准需要摆放引脚的位置。

用户也可以在右侧的属性编辑区中,手动设置引脚的位置( XY 参数)。注意,此时属性编辑区中引脚的宽度长度参数均为无效参数,无需调整。引脚的属性编辑区如下图所示。

引脚的属性编辑区
引脚的属性编辑区

在引脚的属性编辑区最下方,存在一个名为 引脚 的单选栏,用户需要在这里选中该 引脚图标组件 需要绑定的 引脚列表 中的引脚。

对于每个引脚列表中,“可见”配置项 设置为的引脚,需要依次在图标绘制区中添加并绑定这些引脚的图标。

通过以上的教程,用户已经能完成基础的元件图标实现。

高级功能

本节介绍图标绘制的高级功能,包括 导入当前图形图形选项窗格 三个方面。

导入当前图形

该功能的主要应用场景如下:

  1. 部分 CloudPSS 旧版本的元件图标和当前的新版本图标不兼容,利用这些元件另存得到的元件中,图标绘制工作区中出现导入当前图形的按钮。

  2. 对于原本为 普通项目简单项目 的模型,在 总览标签页 中修改为元件类型后,图标绘制工作区中出现导入当前图形的按钮。

导入当前图形按钮如下图所示:

导入当前图形
导入当前图形
注意

导入当前图形按钮出现时,为了避免图标无法正常保存等问题,请先点击该按钮,生成默认的元件图标,再开始图形的绘制。生成默认的图标后,导入当前图形按钮将会消失,默认的图标可以按需求自行删除。

图形选项

点击图标绘制区的空白处,右侧显示设置区将会出现图形选项的配置栏。目前,SimStudio 的该配置栏中仅有缩放时允许用户调整长宽比配置项。

当取消勾选该配置项时,用户调用模块时无法改变长宽比,如下图所示。

无法改变长��宽比 alt text

当勾选该配置项时,用户将能在调用模块时自由更改长宽比,如下图所示。

可自由更改长宽比 alt text

注意

如果勾选该配置项,允许用户自由更改长宽比,可能导致连线无法对齐等问题,详见 SimStudio 元件图标设计规范 相关内容。

窗格

点击图标绘制区的空白处,右侧显示设置区将会出现选择窗格的配置栏。该配置栏主要用于筛选当前图标绘制区内显示的组件,用以应对图标设计过于复杂、不方便点击选择的问题。

窗格的配置不会影响该元件的实际呈现形式,只影响当前绘图区的预览样式。

以直驱风机封装模块为例进行说明,窗格板块如下图所示:

直驱风机封装模块
直驱风机封装模块

窗格的配置包括条件类型两个模块。条件模块主要根据各绘图组件设定的条件进行筛选;类型模块主要根据 图标文本端口三种绘图组件的类型进行筛选。

默认地,所有元素和条件均已设为可见,即右边的显示图标为灰色,显示

条件模块

  • 在绘图区中,有组件的条件设置为 mode==1,如下图所示。因此窗格条件栏中存在 mode==1 的条目。

    绘图组件条件
    绘图组件条件
  • 当用户点击窗格中的 mode==1 条目右侧的隐藏按钮 隐藏 后,当前绘图窗口中将不会显示设置了 mode==1 条件的组件,如下图所示:

    条件筛选结果
    条件筛选结果

类型模块

类型模块分为图标文本端口三种。用户可以任意选择需要显示或隐藏的绘图组件,例如只显示端口组件:

类型模块筛选结果
类型模块筛选结果

用户可点击下方的隐藏全部显示全部按钮,隐藏或显示全部组件。

如何绘制一个规范的元件图标?

根据以上内容,已经可以完成一个元件图标的绘制了。

但是,为了确保最后的元件图标能正常、美观地显示,在设计图标时请务必参考 SimStudio 元件图标设计规范