npm包react-sketchapp使用教程

阅读时长 2 分钟读完

介绍

React Sketch.app 是一个让你可以用 react 组件来创建 Sketch 画板的库,它既支持在 Sketch 内进行设计,也支持在浏览器中进行设计等同于设计,设计图形支持 svg 或 png 格式输出,而且输出的对比性十分好,颜色转换也是十分地准确,可能你只需要更改你的代码就可以创建一个视觉设计,React Sketch.app 还拥有层级管理和插件等功能。

安装

在终端中通过 npmyarn 安装 React Sketch.app 包:

基本使用

在 Sketch 中创建一个画板并开始设计

  1. 打开 Sketch 的原生应用;
  2. 创建一个新的 document(文档);
  3. 找到文档的 Page(页面);
  4. 打开 Add Page 并命名它;
  5. 找到插件栏中的 React Sketchapp 并打开;
  6. 将你的代码复制到 imort function 中;
  7. 既然你使用了 Sketchapp 的原生工具,所以按下 command + s 以保持更新。

在浏览器中设计视觉图

  1. 新建一个本地文件夹以保存代表浏览器中画板的图形;
  2. 创建你的 React Sketchapp 实例:App.js
  3. 安装应有的依赖,并将 App.js 渲染到页面上;
  4. 点击 Download PNGDownload SVG(下载 PNG 或者 SVG)即可。

示例代码

-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- -------- - ---- ------------------

----- --- - -- -- -
 ---------
  --------- -------
  --------
   ------ ----
   ------- ----
   ---------------- ----------
  --
 ------------
--

----------- --- --------------------------------

结论

React Sketchapp 是一个让设计者在 Sketch 应用内或在浏览器中拥有更多自由创作的一个有用工具,其简单易用的 JavaScript API 和 React 组件都是十分有帮助的。此外,在社区的支持下,你可以找到许多例子和源代码,使学习变得更加容易,帮助你快速了解和得到所需的指导意义。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5eedafaeb5cbfe1ea06110af

纠错
反馈