前言
Sketch 是一款广泛应用于 UI 设计领域的工具，它可以帮助我们快速制作出精美的界面。@36node/sketch 是一个可以通过编写代码来控制 Sketch 的插件包，它提供了一系列的 API 接口，方便我们在节点中进行一些定制化操作，可以用来在团队中提高协作效率，也可以用来优化自己的工作流程。本文将详细介绍该 npm 包的使用方法。
安装
你可以通过 npm 直接安装该包，步骤如下：
npm install @36node/sketch --save
使用
基础使用
首先你需要在自己的项目中 import 这个包：
import { Sketch, Artboard, Shape } from "@36node/sketch";接下来就可以通过 Sketch 对象，获取到当前 sketch 应用，并操作节点，例如：
const sketch = new Sketch(); const doc = sketch.getDocument(); // 获取当前 Document 对象 const artboard = new Artboard(doc, "我的画板", 600, 400); // 创建一个名字叫 "我的画板" 的 600x400 的画板 const shape = new Shape(doc, artboard, "长方形", 400, 300); // 在画板中创建一个名字叫 "长方形"，宽 400，高 300 的形状 doc.save(); // 保存当前文档，这样保证上面的操作一定会被加进去
API 详解
Sketch
Sketch(): 构造函数，返回一个Sketch对象，可以通过他获取当前 sketch 应用。
Document
Document(sketchDoc): 构造函数，接收一个 Sketch Document 对象作为参数，并返回一个Document对象。save(): 保存当前文档。getArtboards(): Array<Artboard>: 获取当前文档中所有的Artboard节点。
Artboard
Artboard(doc, name, width, height): 构造函数，接收一个Document对象作为第一个参数，然后是名字、宽度、高度，返回一个Artboard对象。getShapes(): Array<Shape>: 获取该画板下的所有Shape节点。getChildren(): Array<Node>: 获取该画板下的所有子节点。getName(): string: 获取该画板的名字。rename(name: string): 重命名该画板。
Shape
Shape(doc, parent, name, width, height): 构造函数，接收一个Document对象作为第一个参数，然后是一个Node对象作为父节点，名字、宽度、高度，返回一个Shape对象。setFillColor(color: string): 给该形状添加填充颜色。setBorderColor(color: string, thickness: number): 给该形状添加边框，需要传递颜色、边框宽度。
示例代码
-- -------------------- ---- ------- ------ - ------- --------- ----- - ---- ----------------- ----- ------ - --- --------- ----- --- - --------------------- -- ------ ----- -------- - --- ------------- ------- ---- ----- -- ---------- ----- ----- - --- ---------- --------- ------ ---- ----- ------------------------------ ------------------------------- --- -----------
总结
本文详细介绍了 @36node/sketch 这个 npm 包的使用方法和 API 接口，通过它我们可以通过代码来控制 Sketch 中的节点，在创作 UI 时提高效率。在实际使用中，你可以根据自己的需求，使用这些 API 接口来进行二次定制，以达到更好的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/121507