事件处理

这一节介绍一下DIY.JS事件相关的功能

Stage事件

• init（舞台初始化）
• start（触摸开始）
• end（操作结束）
• up（选中图形时抬起）
• move（图形移动）
• reset（舞台重置）
• pinch（图形pinch）
• rotate（图形旋转）
• active（图形激活）
• deactivate（图形取消）
• clear（清理所有图形）
• after-delete、before-delete（图形删除）
• to-do（文字、图片替换按钮被点击）
• doubleTap（双击事件）
• after-sort、before-sort（图层改变事件）
• after-add、before-add（新增图形）
• before-copy、after-copy（复制图形）
• before-adjust、after-adjust（微调图形）
• before-flip、after-flip（翻转图形）
• before-release、after-release（图形编组解绑）
• snap-change（快照改变）
• load-json,loaded-json（json加载开始、加载完毕）
• click-blank（点击空白）
• use-font（触发需要加载字体）
• redo，重做
• undo，撤回

通过stage对象来进行事件监听：

/* 监听json加载的事件 */
stage.on('loaded-json', (e) => {
    console.log('json加载完毕！');
})

Shape事件

• init，初始化完毕
• active，被激活
• deactivate，从激活到未激活
• click，被点击
• tap，被点击然后抬起
• up，点击后抬起
• sort，图层改变
• move，图形移动
• scale，图形缩放

通过shape对象来进行事件监听：

/* 监听json加载的事件 */
shape.on('active', (e) => {
    console.log('激活');
})

在线演示

你可以访问我们的演示案例来体验DIY.JS的功能。