使用拓扑编辑器自定义圆角矩形

拓扑编辑器自带的圆角矩形可以通过设置半径值来设置圆角。然而半径值可以任意大小，结果矩形都不矩形了。下面我们来自定义一个圆角矩形来修复这一问题。当然，最重要的是通过这个简单示例来熟悉创建组件、图标、图纸的大致流程。

新建组件

1. 访问http://159.75.3.240:8080/hightopo，选择 菜单 > 文件 > 新建组件，弹出 新建组件 对话框。
2. 设置属性：在 新建组件 对话框右侧表单中设置名称为 roundRect ，宽度为 100 ，高度为 24 。设置数据绑定如下：

设置数据绑定的本质对外公布输入属性。

3. 绘制矩形：需要用 Html5 中的 Canva API 来绘制，上一步设置的属性就相当于这一步的输入参数。在对话框左侧代码去输入：

var x = rect.x;
var y = rect.y;
var w = rect.width;
var h = rect.height;

var borderWidth = comp.getValue('borderWidth');
var borderColor = comp.getColor('borderColor');
var r = comp.getValue('borderRadius');
var foreColor = comp.getColor('foreColor');

// draw rect
if (foreColor) {
  if (2 * r >= w) { r = w / 2; }
  if (2 * r >=h) { r = h / 2; }
  g.beginPath();
  g.strokeStyle = borderColor;
  g.fillStyle = foreColor;
  g.lineWidth = borderWidth;
  g.moveTo(x + r, y);
  g.arcTo(x + w, y, x + w, y + h, r);
  g.arcTo(x + w, y + h, x, y + h, r);
  g.arcTo(x, y + h, x, y, r);
  g.arcTo(x, y, x + w, y, r);
  g.stroke();
  g.fill();
  g.closePath();
}

注意：我们此处限制矩形边框圆角不能大于矩形宽高的 50%，从而避免了边框圆角设置太大时限制出我们不要的图形。

4. 点击 刷新 按钮，可以看到圆角矩形已经画出来了。点击 确定 按钮，可以看到在 组件根目录 下添加了一个蓝色的圆角矩形。

5. 移动：为了方便管理，我们将它放到一个目录中。在 组件根目录上点击右键 > 新建文件夹 新建文件夹roundRect。按住 roundRect 组件，将其拖到 roundRect 文件夹。
6. 定位文件：在 roundRect 组件点击右键 > 定位文件，可以定位到该组件的本地文件。一个json，一个 png 预览图片。

提示：基于 Web 浏览器安全沙箱考虑，定位文件只能在本机使用。

开发组件的目的是为了代码重用。组件放到图标、图纸中才能预览才能重用才能体现其价值。

新建图标

1. 新建图标：在 图标 > demo 上点击右键 > 新建文件夹，新建文件夹 roundRect 。选择 菜单 > 文件 > 新建图标。
2. 添加组件：切换到 组件 选项卡，将 roundRect 组件拖放到图标编辑区。
3. 设置数据绑定：点击非组件区域调出数据绑定面板，设置数据绑定如下：

需要点击非组件区域调出数据绑定面板

可以看到，除了可绑定都设置成 true ，其他属性保留默认值。

4. 绑定组件属性：点击选择组件调出组件面板，点击 边框宽度 右侧的链接图标，将设置图标的 borderWidth 绑定到组件的 borderWidth 属性，用同样方法绑定 borderColor、borderRadius 和 foreColor。绑定后的链接图标会变蓝。

绑定组件属性就是将组件属性绑定到绘制函数公布的输入属性。

5. 预览图标：点击顶部工具栏右侧 保存 按钮保存图标，点击顶部工具栏 预览 按钮预览图标。

? 提示：尽管一个图标可以放置多个组件实例。但更多情况下是将多个图标放在图纸中来设置不同的属性。这将需要在图标中绑定组件属性。

新建图纸

1. 新建图纸：选中 图纸根目录 > basic ，选择 菜单 > 文件 > 新建图纸，弹出的对话框中将其命名为 btns 。切换到 图标 选项卡，拖放三个 roundRect 图标到图标图纸编辑区。为图纸实例设置不同的属性值，点击 保存 按钮。
2. 点击顶部工具栏 预览 按钮预览。效果如下：

提示：组件不能预览，预览图纸、图标前要保存。

参考链接

• GitHub
• 拓扑编辑器使用手册