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
然后,您可以导入您的项目模块并开始使用它们 .
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包并暴露出必要的端点.
您可以下载 样本后端执行 从 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 文件 :