p5-sketchplugin 项目教程

p5-sketchplugin 项目教程

p5-sketchplugin A plugin for using p5.js code inside Sketch 项目地址: https://gitcode.com/gh_mirrors/p5/p5-sketchplugin

1. 项目的目录结构及介绍

p5-sketchplugin/
├── README.md
├── p5-sketchplugin.sketchplugin/
│   ├── Contents/
│   │   ├── Resources/
│   │   │   ├── p5.min.js
│   │   │   └── ...
│   │   ├── Sketch/
│   │   │   ├── manifest.json
│   │   │   ├── p5-sketchplugin.js
│   │   │   └── ...
│   │   └── ...
│   └── ...
├── examples/
│   ├── basic-code.js
│   ├── pie-chart.js
│   └── ...
└── ...

目录结构介绍

• README.md: 项目的基本介绍文件，包含项目的概述、安装方法、使用说明等。
• p5-sketchplugin.sketchplugin/: 插件的核心目录，包含插件的所有代码和资源文件。
  • Contents/: 插件的主要内容目录。
    • Resources/: 存放插件所需的资源文件，如 p5.min.js 等。
    • Sketch/: 存放插件的代码文件，如 manifest.json 和 p5-sketchplugin.js 等。
• examples/: 存放插件的使用示例代码，如 basic-code.js 和 pie-chart.js 等。

2. 项目的启动文件介绍

p5-sketchplugin.js

p5-sketchplugin.js 是插件的主要启动文件，负责初始化插件并处理用户输入。该文件包含了插件的核心逻辑，如代码编辑器的启动、代码的执行和结果的渲染等。

manifest.json

manifest.json 是插件的配置文件，定义了插件的基本信息、命令和菜单项等。该文件是 Sketch 插件的必要组成部分，Sketch 通过读取该文件来加载和运行插件。

3. 项目的配置文件介绍

manifest.json

manifest.json 是插件的配置文件，包含以下主要内容：

{
  "name": "p5-sketchplugin",
  "identifier": "com.jacopocolo.p5-sketchplugin",
  "version": "1.0.0",
  "description": "A plugin for using p5.js in Sketch",
  "author": "Jacopo Colò",
  "authorEmail": "jacopo.colo@gmail.com",
  "commands": [
    {
      "name": "Open Editor",
      "identifier": "open-editor",
      "script": "p5-sketchplugin.js",
      "handler": "onRun"
    }
  ],
  "menu": {
    "title": "p5-sketchplugin",
    "items": [
      "open-editor"
    ]
  }
}

配置文件介绍

• name: 插件的名称。
• identifier: 插件的唯一标识符。
• version: 插件的版本号。
• description: 插件的描述信息。
• author: 插件的作者。
• authorEmail: 作者的邮箱地址。
• commands: 定义插件的命令，如 Open Editor 命令，该命令会调用 p5-sketchplugin.js 文件中的 onRun 函数。
• menu: 定义插件在 Sketch 菜单中的显示方式，如 p5-sketchplugin 菜单项，包含 Open Editor 子菜单项。

通过以上配置，Sketch 可以正确加载和运行 p5-sketchplugin 插件，并提供相应的功能。

p5-sketchplugin A plugin for using p5.js code inside Sketch 项目地址: https://gitcode.com/gh_mirrors/p5/p5-sketchplugin