前言
Sketch 是一款广泛应用于 UI 设计领域的工具，它可以帮助我们快速制作出精美的界面。@36node/sketch 是一个可以通过编写代码来控制 Sketch 的插件包，它提供了一系列的 API 接口，方便我们在节点中进行一些定制化操作，可以用来在团队中提高协作效率，也可以用来优化自己的工作流程。本文将详细介绍该 npm 包的使用方法。
安装
你可以通过 npm 直接安装该包，步骤如下：
--- ------- -------------- ------
使用
基础使用
首先你需要在自己的项目中 import 这个包：
------ - ------- --------- ----- - ---- -----------------
接下来就可以通过 Sketch 对象，获取到当前 sketch 应用，并操作节点，例如：
----- ------ - --- --------- ----- --- - --------------------- -- ---- -------- -- ----- -------- - --- ------------- ------- ---- ----- -- ------- ------ - ------- --- ----- ----- - --- ---------- --------- ------ ---- ----- -- ----------- ------- ----- --- --- ----------- -- -----------------------
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