介绍
React Sketch.app 是一个让你可以用 react 组件来创建 Sketch 画板的库,它既支持在 Sketch 内进行设计,也支持在浏览器中进行设计等同于设计,设计图形支持 svg 或 png 格式输出,而且输出的对比性十分好,颜色转换也是十分地准确,可能你只需要更改你的代码就可以创建一个视觉设计,React Sketch.app 还拥有层级管理和插件等功能。
安装
在终端中通过 npm
或 yarn
安装 React Sketch.app 包:
npm install react-sketchapp --save
基本使用
在 Sketch 中创建一个画板并开始设计
- 打开 Sketch 的原生应用;
- 创建一个新的 document(文档);
- 找到文档的
Page
(页面); - 打开
Add Page
并命名它; - 找到插件栏中的
React Sketchapp
并打开; - 将你的代码复制到 imort function 中;
- 既然你使用了 Sketchapp 的原生工具,所以按下
command + s
以保持更新。
在浏览器中设计视觉图
- 新建一个本地文件夹以保存代表浏览器中画板的图形;
- 创建你的 React Sketchapp 实例:
App.js
; - 安装应有的依赖,并将
App.js
渲染到页面上; - 点击
Download PNG
或Download SVG
(下载 PNG 或者 SVG)即可。
示例代码
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- -------- - ---- ------------------ ----- --- - -- -- - --------- --------- ------- -------- ------ ---- ------- ---- ---------------- ---------- -- ------------ -- ----------- --- --------------------------------
结论
React Sketchapp 是一个让设计者在 Sketch 应用内或在浏览器中拥有更多自由创作的一个有用工具,其简单易用的 JavaScript API 和 React 组件都是十分有帮助的。此外,在社区的支持下,你可以找到许多例子和源代码,使学习变得更加容易,帮助你快速了解和得到所需的指导意义。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5eedafaeb5cbfe1ea06110af