Sketch-editor NPM | npm.io

0.12.13 • Published 3 months ago

Install

Weekly downloads

-

License

MIT

Repository

Last release

3 months ago

sketch-editor

A sketch Render&Editor on Canvas/WebGL.

Install

npm install sketch-editor

Usage

如果文档有pdf图片，需要前置引入pdfjs-dist库，也可以使用cdn文件：

<script src="https://gw.alipayobjects.com/os/lib/pdfjs-dist/3.11.174/build/pdf.min.js"></script>

如果需要颜色选择器功能，需要前置引入vanilla-picker库，也可以使用cdn文件：

<script src="https://gw.alipayobjects.com/os/lib/vanilla-picker/2.12.3/dist/vanilla-picker.min.js"></script>

拿到sketch文件的ArrayBuffer后：

import sketchEditor from 'sketch-editor';

// css自行修改引入，这里是举例
import 'sketch-editor/dist/style.css';

// 一些建议的手动配置
sketchEditor.config.tile = true; // 开启tile优化大尺寸大文件（持续改进中）

// 一些有用的前置方法
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);
    // 缩放情况展示
    sketchEditor.control.initZoom(root, document.querySelector('#zoom'), listener);
  });

Dev

npm run dev

sketch-editor的诞生离不开 karas 开源项目。

Demo

demo目录下是一个web端的演示教程示例，build后可直接本地预览
在线预览（信任https启用本地字体库）：https://army8735.me/sketch-editor/

License

@sketch-hq/sketch-file-format-ts ag-psd jszip uuid

@everything-registry/sub-chunk-2774

7 months ago

7 months ago

3 months ago

3 months ago

7 months ago

8 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

3 months ago

7 months ago

3 months ago

7 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

10 months ago

10 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

10 months ago

9 months ago

10 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

1 year ago

1 year ago

1 year ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

12 months ago

10 months ago

11 months ago

10 months ago

11 months ago

10 months ago

11 months ago

10 months ago

11 months ago

10 months ago

11 months ago

10 months ago

11 months ago

10 months ago

11 months ago

10 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago