安装

• npm install or npm install --force
• 如果缺少babel/core,则全局安装npm install babel/core -g

开发

• npm run dev

代码结构

• src/index.ts sdk 主文件
• src/types.ts 类型定义
• src/utils.ts sdk 常用工具函数
• src/definations.ts 基本图形定义
• src/stage 舞台实现
• src/shapes 图形组件实现
• src/jquery jquery 插件实现
• src/controllers 图形内控制点的具体实现
• src/factory 图形工厂、工具
• src/utils 组件形变、图形几何等实现

打包

• npm run build

使用

• 必要

  • https://q-fe.aixuexi.com/slide/static/lib/jquery.js

  • https://q-fe.aixuexi.com/slide/static/lib/jquery-migrate-1.2.1.min.js

  • https://q-fe.aixuexi.com/slide/static/lib/jquery-ui.js

  • //at.alicdn.com/t/font_2807890_0w941y9w5ui.css

• 开发阶段可以将npm run build 打包后dist目录中生成的index.es.js， index.browswer.js

  • es方式引用方式需要将index.es.js放置到当前项目的src/文件加下的任意目录,之后通过一下方式引用
  • 浏览器引入, 参考demo/browswer.html

API

• const sdk = new SlideShapeSdk({ zoom: 1 }) // 实例化sdk，注意sdk为单例模式，多个实例化无效，参数zoom表示网页缩放系数，默认为1表示无缩放
• sdk.createWidget(stage: IBaseStage, options: CreationOptions): IShapeWidget | undefined; // 创建组件
• sdk.addStage(el: HTMLDivElement): IBaseStage | undefined; // 添加画板
• sdk.getWidgetById(id: string): IShapeWidget | undefined; // 根据id获取组件
• sdk.getWidgetByNode(node: HTMLDivElement): IShapeWidget | undefined; // 根据组件节点获取组件
• sdk.getCurrentSelectedWidget(): IShapeWidget | undefined; // 获取当前被选中的组件
• sdk.getCurrentEditingWidget(): IShapeWidget | undefined; // 获取当前正在编辑中的组件
• sdk.getDatas(): Map<HTMLDivElement, Array<string>>; // 获取全部画板中组件的数据
• sdk.getStage(el: HTMLDivElement): IBaseStage | undefined; // 根据节点获取画板
• sdk.getStageDatas(el: HTMLDivElement): Array<String>; // 获取某一个画板中组件的数据
• sdk.apply(fragment: HTMLElement): void; // 还原文档中的画板和组件，此方法会自动查找给定文档节点并创建画板和组件进行自动关联
• sdk.applyStage(fragment: HTMLDivElement): IBaseStage | undefined; // 还原一个画板及其画板内的组件
• sdk.applyWidget(stage: IBaseStage, node: HTMLDivElement): IShapeWidget | undefined; // 还原一个组件，并且以当前组件的父节点作为画板、如果父节点并不是一个画板则创建
• sdk.clearAllSelecteds(): void; // 清除所有组件的选中及编辑状态
• sdk.clearOtherSelecteds(shapwWidget: IShapeWidget): void; // 清除给定组件之外的其他组件的选中及编辑状态
• sdk.destroyWidgetById(id: string): void // 根据id销毁组件
• sdk.destroyWidgetByNode(node: HTMLDivElement): void // 根据节点销毁组件
• sdk.destroyStageWidgets(stage: IBaseStage): void; // 销毁指定舞台的组件
• sdk.destroy(): void // 销毁全部组件