@7revor/smart-design-sdk NPM

smart-design-sdk

智能设计sdk

效果预览

完整体验可使用手机千牛扫码查看

介绍

整个sdk包括三个部分，分别为：

Canvas 核心渲染引擎
Dispatcher 事件调度总线
Adaptor 内置事件适配器

import { Canvas, Adaptor, Dispatcher } from '@7revor/smart-design-sdk';

Canvas

Canvas为核心渲染引擎

const cfg = {
          hooks,                           // 钩子函数
          template_width: width,           // 模板宽度
          template_height: height,         // 模板高度
          context,                         // canvas context
          pixel_ratio,                      // 设备像素比（用来兼容Retina屏）
          rpx_ratio,                       // rem或rpx和px的对应比例
          width: canvas_width,             // canvas实际宽度
          height: this.data.canvas_height, // canvas实际高度
        }

hooks

const hooks = {                       
        onChange: this.props.onChange,     // 画布状态改变
        loading: (content) => my.showLoading({ content }), // 画布loading
        hideLoading: my.hideLoading,        // 画布loading结束
        error: msg => this.$alert(msg)      // 画布error
      }

context

传入单个canvas context，单层画布渲染所有元素。当画布较大或元素较多时，推荐传入多个canvas：

const context = { lower, targe, upper, activ, full }

lower 底层画布，负责基础渲染和层叠顺序低于目标元素的渲染
targe 目标画布，负责渲染目标元素
upper 上层画布，负责层叠顺序高于目标元素的渲染
activ 活动画布，负责裁剪和交互提示的渲染
full 全画布，可选参数。开启虚拟滚动时，负责导出完整长图

传入多个context后，当被渲染元素数量小于40，只使用lower画布渲染。数量大于40，开启分层渲染。

virtualized

由于canvas渲染性能和画布大小成反比，所以当进行长画布编辑时，推荐设置canvas高度为当前屏幕高度（或小于屏幕高度的固定值）。

canvas初始化后，若判断画布高度小于模板高度，会自动开启虚拟滚动，只渲染可视范围内的元素，提升渲染性能。

虚拟滚动也可和分层渲染同时开启，且开启虚拟滚动后，分层渲染的开启条件也相应的变为 可视范围内的元素数量 > 40。

Dispatcher

Dispacther 事件调度总线负责接收外部事件，并将其传递给 Canvas 引擎。

const canvas = new Canvas(cfg);
const receiver = canvas.receiver.bind(cannvas);     // canvas 事件入口

const dispatcher = new Dispatcher(receiver);  

dispatcher.dispatchAction('initTemplate', template);
dispatcher.dispatchEvent(e);

Dispatcher有两个对外开放的接口

dispatchAction 传递动作事件
dispatchEvent 传递DOM事件

dispatchAction

diapatchAction 会将动作原封不动的传递给 recevier。现支持的action如下

initTemplate 初始化模板
addShape 添加图形
copy 复制目标元素
replaceImage 替换目标图片
deleteTarget 删除当前元素
setTarget 修改当前元素属性
setAttr 修改元素属性（入参 attr,index）
undo 撤销
redo 重做
startCut 进入裁剪模式
endCut 结束裁剪
save 保存设计

dispatchEvent

dispatchEvent将DOM事件经过一系列处理后，转换成以下事件传递给 receiver 事件接收函数。

start 触摸动作开始（第一个触控点进入）
drag 单点或多点拖拽
join 触控点个数改变（新的触控点进入和离开）
end 触摸动作结束（所有触控点离开）
tap 单点（用来选择元素）
longpress 长按开始
longpressend 长按结束

Adaptor

由于不同端的事件差异，Dispatcher支持传入Adaptor对事件进行预处理。内置的Adaptor目前有两个：

retina_adaptor 视网膜pixel_ratio适配
web_adaptor H5 鼠标事件转换

const adaptor = Adaptor.retina_adaptor(pixel_ratio);    // 事件适配器
const dispatcher = new Dispatcher(receiver, adaptor);  // 事件桥接

自定义 Adaptor

当内置Adaptor不能满足需求时，可以根据需求自定义 Adaptor，以web_adaptor为例：

const web_adaptor = e => {
  let type;
  let touches;
  if (e.type === 'mousedown') {
    type = 'touchstart';
    touches = [{ x: e.offsetX, y: e.offsetY }]
  } else if (e.type === 'mouseup') {
    type = 'touchend';
    touches = [];

  } else if (e.type === 'mousemove') {
    type = 'touchmove';
    touches = [{ x: e.offsetX, y: e.offsetY }]
  }
  return { type, touches, timeStamp: e.timeStamp };
}

自定义 Adaptor 返回的event需包含以下字段：