A sketch Render&Editor on Canvas/WebGL.
npm install sketch-editor
!CI
shell
npm install sketch-editor
`Usage
如果文档有pdf图片，需要前置引入库，也可以使用cdn文件：
`html
`
拿到sketch文件的ArrayBuffer后：
tsx
import sketchEditor from 'sketch-editor';// css自行修改引入，这里是举例
import 'sketch-editor/style';
// 一些建议的手动配置
sketchEditor.config.tile = true; // 开启tile优化大尺寸大文件（持续改进中）
sketchEditor.config.maxTextureSize = 4096; // 大尺寸纹理切割设置
// 一些有用的前置方法
sketchEditor.style.font.registerLocalFonts(); // 异步注册本地字体
// 真正的读取渲染逻辑
sketchEditor
.openAndConvertSketchBuffer(arrayBuffer) // 读取sketch的buffer
// .openAndConvertPsdBuffer(arrayBuffer) // 如果是psd用这个
.then(json => {
const dpi = 2;
// 渲染
const $canvasC = document.querySelector('#canvas-container');
const { clientWidth, clientHeight } = $canvasC;
const canvas = document.createElement('canvas');
canvas.width = clientWidth * dpi;
canvas.height = clientHeight * dpi;
$canvasC.appendChild(canvas);
const root = sketchEditor.parse(json, {
dpi,
canvas,
});
// 可选控制，鼠标键盘基础操作
const listener = sketchEditor.control.initCanvasControl(root, $canvasC);
// page列表展示
sketchEditor.control.initPageList(root, document.querySelector('#page'), listener);
// 图层树结构展示
sketchEditor.control.initTree(root, document.querySelector('#tree'), listener);
// 右侧属性面板展示
sketchEditor.control.initPanel(root, document.querySelector('#side'), listener, {
maxFontSize: 1000, // 可选panel配置字体限制
});
// 缩放情况展示
sketchEditor.control.initZoom(root, document.querySelector('#zoom'), listener);
// toolbar展示（持续补齐功能中）
sketchEditor.control.initToolbar(root, document.querySelector('#toolbar'), listener);
});
`Dev
shell
npm run dev
``