npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@7revor/smart-design-sdk

v1.1.4

Published

智能设计sdk

Downloads

96

Readme

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需包含以下字段:

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