# @aurigma/design-atoms 中文文档

规范地址：https://npmcn.com/package/%40aurigma/design-atoms/

版本：7\.4\.0
npm 元数据更新时间：2026-10-19T10:36:09.485Z
中文译文更新时间：2026-11-07T05:16:21.465Z
软件包许可：SEE LICENSE IN License\.md

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40aurigma/design-atoms
原文对照：https://npmcn.com/package/%40aurigma/design-atoms/?lang=original
项目主页：https://customerscanvas.com/

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：4.1 MB，1188 个文件
- TypeScript 类型：包内自带
- 运行依赖：10 个
- 首次发布：2019-04-23T08:36:32.543Z
- 最新版本发布：2026-10-19T10:36:09.192Z
- 近 30 天下载量：6541（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：274（近 12 个月 15 个）

## 中文简介

设计原子是客户Canvas SDK的一部分,它允许通过您的代码操纵单个设计元素.

## 安装

```sh
npm install @aurigma/design-atoms
```

也可以使用：`pnpm add @aurigma/design-atoms`、`yarn add @aurigma/design-atoms`、`bun add @aurigma/design-atoms`

## README

# Aurigma 客户 Canvas SDK - 设计原子框架

Design Atoms是Customer's Canvas SDK的一部分,它允许操纵Customer's Canvas网络对打印编辑器所编辑的设计中的单个元素. 如果您认为Customer's Canvas编辑器是浏览器,您可以将Design Atoms视为DOM API.

例如,您可以导入一个模板到客户的 Canvas, 然后使用 Design Atoms 来排列所有项目, 找到, 比如, 命名, 名称和更改其值的文本元素 。 或者你可以创造出全新的设计,并传递给客户的Canvas.

_**重要的东西!** 这个包裹不能单独运作 设计原子由一个前端部分(这个软件包)和一个后端部分(搜索一个名为软件包)组成 **奥里格玛 设计原子** (原始内容存档于2017-09-31). In Nuget. 要能够使用 Design Atoms,需要将其连接到后端. 详情见下文._

## 开始

### 安装设计原子前端库

走开

```
npm install @aurigma/design-atoms --save
```

然后,您可以导入您的项目模块并开始使用它们 .

```ts
import { Product } from "@aurigma/design-atoms/Model/Product";

let product = new Product([new Surface(100, 100)]);
// ...  
```

然而,为了能够完全地使用它,需要用后端连接.

获得后端有两种主要方法——使用Aurigma创建自己的后端. DesignAtoms NuGet软件包或将其挂入已有的客户Canvas实例.

### 创建自定义后端

如果您不需要编辑器,而是需要通过 JavaScript/TypeScript 或 C# 代码来操纵设计,并在您的应用程序中渲染结果,那么这种方式是一个很好的选项. 另外,如果您想根据 `Viewer` 控制系统。 另一个目的是在单独的应用程序中处理客户相机的输出.

要做到这一点,您需要创建.NET Web API项目,并添加Aurigma的引用. DesignAtoms NuGet包并暴露出必要的端点.

您可以下载 [样本后端执行](https://github.com/aurigma/DesignAtomsSamples) 从 GitHub 中取出,并使用这个样本溶液作为单独的对象,或将其与您现有的 ASP.NET 应用程序合并.

### 连接到后端

您可以使用自定义后端或客户Canvas 7. 的运行实例 。 要连接到您的后端,请添加以下代码 .

```
const backendUrl = "http://<yourInstanceUrl>";
const holderId = "#id-of-your-div";
const holder = document.querySelector(holderId) as HTMLDivElement;
const viewer = new Viewer({
    holderElement: holder,
    backendUrl: backendUrl,
    canvasBackground: { color: "white" }
});
```

## 接下来呢?

有关如何使用此软件包的更多信息, 请参考客户的 Canvas 文件 :

-   [部署设计原子框架](https://customerscanvas.com/dev/editors/design-atoms-cs/getting-started.html)
-   [样本项目](https://customerscanvas.com/dev/editors/design-atoms-cs/sample-project.html)
-   [IFrame API (英语)](https://customerscanvas.com/dev/editors/iframe-api/howto/manipulating-items.html)

## 常见问题

### @aurigma/design-atoms 是什么？

设计原子是客户Canvas SDK的一部分,它允许通过您的代码操纵单个设计元素\.

### 如何安装 @aurigma/design-atoms？

在项目目录运行 npm install @aurigma/design-atoms，或使用 pnpm add / yarn add / bun add。

### @aurigma/design-atoms 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @aurigma/design-atoms 可以商用吗？

@aurigma/design-atoms 使用 SEE LICENSE IN License\.md 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。

### @aurigma/design-atoms 的下载量有多少？

根据 npm 官方下载统计，@aurigma/design-atoms 在 2026/10/07 – 2026/11/05 这 30 天内被下载 6,541 次，日均约 218 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @aurigma/design-atoms 还在维护吗？

最新版本 7\.4\.0 发布于 2026/10/19（19 天前）；至今共发布 274 个版本，其中过去 12 个月发布了 15 个；首次发布于 2019/04/23。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。