# 添加您自己的功能

### 在 HTML、JavaScript 和 CSS 面板内

在“插件乐园”样例插件中单击“编辑”时，您会看到 HTML、JavaScript (JS) 和 CSS 面板。通过使用 HTML 面板（左侧），可以修改插件的用户界面。通过使用 JS 面板（中间），可以编写可使用 FormIt JS 插件 API 与 FormIt 通信的函数。最后，CSS 面板（右侧）将确定 HTML 的样式。

![](https://3938562663-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2d4N7VJ5cPBb6LvhH2k%2Fuploads%2Fgit-blob-0c355ca13f62c66c6a4d6826a6747c454b5b6101%2Fimage%20\(27\).png?alt=media)

### 添加用于创建圆柱体的函数

我们为这个插件添加一个功能来创建圆柱体。

首先，我们在 HTML 面板中配置输入字段和 UI 按钮。复制以下代码，然后将其粘贴到第 23 行之后和 *\<!-- 除非您知道要执行的操作，否则请勿删除下面的脚本 -- >* 之前

这会将一些基本 UI 元素添加到插件中。

```
<p>Cylinder: Create a cylinder at the origin.</p>
<div>
    <input id="Radius" type=number value=2 />
    <label>Radius</label>
</div>

<div>
    <input id="CHeight" type=number value =0.5 />
    <label>Height</label>
</div>


<input id="CreateCylinderBtn" type=button value="Create Cylinder" />
```

![](https://3938562663-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2d4N7VJ5cPBb6LvhH2k%2Fuploads%2Fgit-blob-3d646a2b6bb83d018d3a69ce74191f50352f937d%2Fimage%20\(86\).png?alt=media)

接下来，我们在 JS 面板中添加两个函数。复制以下代码，并将其粘贴到文件末尾（即第 16 行之后）。

这会在 FormIt 工作空间中创建圆柱体。

```
// Create cylinder
const createCylinder = async (r,h) =>
{
    const posCenter = await WSM.Geom.Point3d(0,0,0);

    const histID = await FormIt.GroupEdit.GetEditingHistoryID();
    console.log(histID,posCenter,r,h);

    const cyl = await WSM.APICreateCylinder(histID,posCenter,r,h);
}


// Execute function when 'create cylinder' button is clicked
document.getElementById("CreateCylinderBtn").addEventListener("click", ()=>
{
    console.log('create cylinder clicked')

    const r = Number(document.getElementById("Radius").value);
    const h = Number(document.getElementById("CHeight").value);

    createCylinder(r,h);

});
```

![](https://3938562663-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2d4N7VJ5cPBb6LvhH2k%2Fuploads%2Fgit-blob-2b5b8e5015b72f1a6d664a6bf7403a66da6e88a9%2Fimage%20\(82\).png?alt=media)

### 运行和预览

当准备好查看结果时，请再次单击“播放”按钮 ![](https://3938562663-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2d4N7VJ5cPBb6LvhH2k%2Fuploads%2Fgit-blob-5869b9d4fb33908291738216de1304c34456b4a5%2Fimage%20\(81\).png?alt=media)，您将在同一面板中看到对插件的更新。

![](https://3938562663-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2d4N7VJ5cPBb6LvhH2k%2Fuploads%2Fgit-blob-748e945427f07642202ad5150021dc7f8c95fd35%2Fimage%20\(14\).png?alt=media)

### FormIt 插件 API

有关 FormIt 插件 API 的完整文档，请参见[有用链接](https://windows.help.formit.autodesk.com/zh-cn/plugins/useful-links)部分。