@7revor/smart-design-sdk 中文文档教程

Question

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目前有两个：

• retinaadaptor 视网膜pixelratio适配
• 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需包含以下字段：

• type 事件类型，需为touchstart,touchend,touchmove其中一个
• touches 触控点信息，需包含已画布左上角为坐标原点的x，y坐标
• timeStamp 时间戳