SDK 框架中的使用

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

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

官网：image.h5ds.com

Leaferjs: Leaferjs

options 参数说明

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 文档如下：

属性

.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

小工具方法的集合

方法

.setURL(url: string): string

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

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 函数来通知视图的更新。

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

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

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

使用案例

VUE

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: `<div id="view">loading...</div>`,
};

React

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 <div ref={ref}>loading...</div>;
}