上一篇文章低代码平台（二）-组件版本管理（腾讯云）
在线体验编辑器
模板编辑
模板预览
前言
市面上的低代码平台很多，有操作简单，快速搭建单一页面的，有配置繁多灵活能实现各种交互逻辑的，低代码平台的目的是提高工作效率和降低成本，我一直认为没有一个完美的低代码平台，只有最适合的低代码平台，根据当前业务量身定制才能把低代码的作用最大化。
下面介绍的是一种适合用在像大屏这样屏幕尺寸相对固定，数据展示型的场景。
画布触摸板拖拽缩放&长按space鼠标拖拽&长按ctrl鼠标缩放
1.触摸板&长按ctrl鼠标缩放
触摸板的事件和鼠标滚轮是一样的，所以我们监听wheel事件做处理。
e.deltaY和e.deltaX是手指移动的距离增值，所以只要每次事件触发的时候修改画布的translate属性即可改变画布位置。
我们可以通过事件属性e.ctrlKey判断当前手指是双指移动还是缩放，true的时候e.deltaY为双指张开的增值，进而修改scale值缩放画布。注：触发的事件等同于长按ctrl鼠标缩放。
ele.addEventListener('wheel', e => {
e.preventDefault()
if (e.ctrlKey) {
// 缩放
const deltaY = Math.abs(e.deltaY) > 10 ? e.deltaY / 70 : e.deltaY // deltaY大于10默认为鼠标缩放，除以70避免缩放过快
editor..scale-=(deltaY/50)
} else {
// 拖拽
editor.left-=e.deltaX
edito.top-=e.deltaY
}
})
2.长按space鼠标拖拽
这个就是普通的mousedown,mousemove,mouseup三件套了，只是只有当space长按时才触发mousemove事件，计算translate值。
通过监听keydown和keyup判断当前space键是否长按，只触发keydown没触发keyup为长按。
示例代码如下
组件拖入画布
待续。。。
组件拖拽旋转
待续。。。
右键菜单（包含快捷键）
待续。。。
