SDK 框架中的使用

为了方便大家在 vue 项目中快速使用渲染内核做二次开发，我们提供了一个 JS 的 SDK，下面是 vue 中使用渲染内核的案例：

具体完整代码请参考sdk-test/vue.html文件：

官网：image.h5ds.com

Leaferjs: Leaferjs

options 参数说明

``javascript
const core = new ImageEditorCore(options);
`

| 参数 | 说明 | 类型 | 默认值 | 必填 |
| --------------- | ---------------------------------- | -------------------------------------- | -------- | ---- |
| data | 页面模块的 JSON 数据 | BasePage | - | ✔ |
| target | 画布放入的 DOM 容器 | HTMLDivElement | - | ✔ |
| env | 当前的渲染环境 | 'editor','preview' | 'editor' | ✔ |
| resourceHost | 资源文件的 HOST 地址，资源存放路径 | string | '' | ✔ |
| callback | 渲染后的回调函数 | Store => void | - | |
| onControlSelect | 选中元素会触发 | (\_event, ids: string[]) => void | - | |
| onDragUp | 鼠标弹起来会触发 | () => void | - | |
| onContextMenu | 鼠标右键会触发 | (\_event, layers: BaseLayer[]) => void | - | |

内核 API

在 callback 回调函数中可以获取到一个store实例，该实例下面存放了很多可以操作画布的方法。API 文档如下：

$3

.data: BasePage

工程数据中的页面数据

.record: RecordParams

操作记录类的实例，内置方法

`
add(n: RecordItem) 添加操作记录
debounceAdd(n: RecordItem) 加了防抖函数的记录添加
redo() 重做
undo() 撤销
`

.app: ILeafer

Leaferjs 的实例

.editor: IEditorBase

控制器相关业务的实例

.env: ENV

内核当前的运行环境

.resourceHost: string

资源文件的 host 地址

.helper: Object

帮助工具

.utils: Object

小工具方法的集合

$3

.setURL(url: string): string

给 URL 自动添加 resourceHost 配置，比如当前的资源路径是 /assets/img.png，资源实际地址在 cdn 中，这时候我们需要配置
resourceHost 为 cdn 的地址，然后在使用的时候可以调用这个方法得到一个完整的资源路径

`javascript
const url = '/assets/img.png';

const newURL = store.setURL(url);

// newURL地址为：https://cdn.h5ds.com/assets/img.png;
`

.getLayerUIByIds(ids: string[]): IUI[]

通过 ID 获取 Leaferjs 的 UI 对象数组

.getLayerByIds(ids: string[]): BaseLayer[]

通过 ID 获取图层的 JSON 数据

.deleteLayers(ids: string[]): void

通过图层 ID 删除图层数据

.groupData(ids: string[]): GroupLayer

将多个图层合并成一个图层，并返回合成后的图层数据

.unGroupData(gid: string): string[]

传入一个组的 id，将该组打散并返回打散后的元素 id

.emitControl(ids: string[]): void

触发指定元素的控制器选中状态，如果传入空数组就会取消所有的控制器

.autoViewSize(): void

根据当前的窗口自动设置画布大小

.setViewSize(scale: number): void;

设置画布的缩放比例

.update(): void

当数据发生变化后，可以调用此方法触发视图的更新

.triggerRotation(elementData: BaseLayer, rotation: number): void

手动设置元素的旋转，解决外部触发旋转不是围绕中心点旋转的问题，旋转元素会导致 x,y 同时发生变化

.capture(params?: IExportOptions): Promise(string);

导出图片

.destroy(): void

销毁实例

数据&视图

数据和画布中的视图做了双向绑定，所以数据改变后只需要调用store.update()就可以触发视图的更新。为什么是手动？有时候我们为
了节约渲染开销，需要做很多数据改动后才会去触发一次 update，所以这里做了类似 react 的 setState，需要我们去手动触发 update
函数来通知视图的更新。

`javascript
// 修改元素的坐标
const [layer] = pageData.layers;

// 修改坐标
layer.x = 100;
layer.y = 200;

// 通知视图更新
store.update();
`

使用案例

$3

`javascript
import { ref } from 'vue';
import ImageEditorCore from 'image-editor-core';

export default {
async mounted() {
const core = new ImageEditorCore({
data: pageData,
target: document.getElementById('view'),
env: 'editor',
resourceHost: 'https://cdn.h5ds.com',
});
const store = await core.init();
console.log(store);
},
template:

`javascript
import React, { useRef } from 'react';
import ImageEditorCore from 'image-editor-core/coresdk.react.es';

export default function App() {
const ref = useRef();
useEffect(() => {
const core = new ImageEditorCore({
data: pageData,
target: ref.current,
env: 'editor',
resourceHost: 'https://cdn.h5ds.com',
});
core.init().then(store => {
console.log(store);
});
}, []);

return