软件项目技术点(6)——结合鼠标操作绘制动态canvas画布

AxeSlide软件项目梳理   canvas绘图系列知识点整理

我们创建一个类封装了所有鼠标需要处理的事件。

     export class MouseEventInfo {
         el: HTMLElement;
         onmouseDown: Function;
         ondragMove: Function;
         ondragUp: Function;
         onmouseMove: Function;
         onmouseUp: Function;
         mouseWheel: Function;
         onContextMenu: Function;
         constructor(ele: any, mouseDown: Function, dragMove: Function, dragUp: Function, mouseMove: Function, mouseUp: Function, mouseWheel: Function, contexMenu: Function) {
             this.el = ele;
             this.onmouseDown = mouseDown || null;
             this.ondragMove = dragMove || null;
             this.ondragUp = dragUp || null;
             this.onmouseMove = mouseMove || null;
             this.onmouseUp = mouseUp || null;
             this.mouseWheel = mouseWheel || null
             this.onContextMenu = contexMenu;
         }
     }

MouseEventClass就是绑定事件的过程，我们这里只列出部分代码，未列出的事件绑定的部分同理。

     export class MouseEventClass {
         x: number;
         y: number;
         down: boolean;
         dragging: boolean;
         scroll: boolean;
         lastX: number;
         lastY: number;
         startX: number;
         startY: number;
         moveCount: number;
         eventInfo: MouseEventInfo;
         constructor(eInfo: MouseEventInfo) {
             this.moveCount = 0;
             this.x = 0;
             this.y = 0;
             this.lastX = 0;
             this.lastY = 0;
             this.startX = 0;
             this.startY = 0;
             this.down = false;
             this.eventInfo = eInfo;
             this.dragging = false;
             this.scroll = false;

             var on = impressEvent.on;
             var self = this;
             if (this.eventInfo.el) {
                 on(this.eventInfo.el, "mousedown", function (e) {
                     if (e.button == 1 || e.button == 2) {
                         e.preventDefault();
                         return false;
                     }
                     self.mousedownHandler(e);

                 });
                 (this.eventInfo.ondragMove || this.eventInfo.onmouseMove) && on(this.eventInfo.el, "mousemove", function (e) {
                     if (e.button == 1 || e.button == 2) {
                         e.preventDefault();
                         return false;
                     }
                     self.mousemoveHandler(e);
                 });
                 (this.eventInfo.ondragUp || this.eventInfo.onmouseUp) && on(this.eventInfo.el, "mouseup", function (e) {
                     if (e.button == 1 || e.button == 2) {
                         e.preventDefault();
                         return false;
                     }
                     self.mouseupHandler(e);
                 });
                 this.eventInfo.mouseWheel && on(this.eventInfo.el, "mousewheel", function (e) {
                     if (e.button == 1 || e.button == 2) {
                         e.preventDefault();
                         return false;
                     }
                     self.mouseWheelHandler(e);
                 });
                 this.eventInfo.onContextMenu && on(this.eventInfo.el, "contextmenu", function (e) {
                     if (e.button == 1) {
                         e.preventDefault();
                         return false;
                     }
                     e.preventDefault();
                     self.contextMenuHandler(e);
                 })
             };
         }

         mousedownHandler = function (evt: MouseEvent) {
             this.moveCount = 1;
             this.down = true;
             this.startX = evt.pageX;
             this.startY = evt.pageY;
             this.dragging = false;
             this.eventInfo.el && this.eventInfo.onmouseDown && (this.eventInfo.onmouseDown({
                 evt: evt,
                 target: this.eventInfo.el,
                 mouseX: this.startX - leftWidth,
                 mouseY: this.startY - topHeight - topAnimaitonHeight,
                 buttonCode: evt.button
             }));
             this.lastX = evt.pageX;
             this.lastY = evt.pageY;
         };
         mousemoveHandler = function (evt: MouseEvent) {
             this.moveCount++;
             this.x = evt.pageX;
             this.y = evt.pageY;
             if (this.down && (this.x - this.startX != 0 || this.y - this.startY != 0)) {
                 this.dragging = true;
             }
             if (this.dragging) {
                 this.eventInfo.ondragMove && this.eventInfo.ondragMove({
                     evt: evt,
                     isFirstMove: this.moveCount == 1 ? true : false,
                     mouseX: this.x - leftWidth,
                     mouseY: this.y - topHeight - topAnimaitonHeight,
                     downX: this.startX - leftWidth,
                     downY: this.startY - topHeight - topAnimaitonHeight,
                     lastX: this.lastX - leftWidth,
                     lastY: this.lastY - topHeight - topAnimaitonHeight,
                     noRoteDiffX: this.x - this.lastX,
                     noRoteDiffY: this.y - this.lastY,
                     totalX: this.x - this.startX,
                     totalY: this.y - this.startY
                 })
             } else {
                 this.eventInfo.onmouseMove && this.eventInfo.onmouseMove({
                     evt: evt,
                     mouseX: this.x - leftWidth,
                     mouseY: this.y - topHeight - topAnimaitonHeight,
                     downX: this.startX - leftWidth,
                     downY: this.startY - topHeight - topAnimaitonHeight,
                     lastX: this.lastX - leftWidth,
                     lastY: this.lastY - topHeight - topAnimaitonHeight,
                     noRoteDiffX: this.x - this.lastX,
                     noRoteDiffY: this.y - this.lastY,
                     totalX: this.x - this.startX,
                     totalY: this.y - this.startY
                 })
             }
             this.lastX = evt.pageX;
             this.lastY = evt.pageY;
         };

如何使用上面我们创建的两个类呢

我们在使用的时候先将MouseEventInfo这个类初始化，然后再用MouseEventClass绑定事件。

this.mouseEventInfo = new Common.MouseEventInfo(document, this.mouseDown, this.dragMove, this.dragUp, this.mouseMove, this.mouseUp, this.mouseWheel, this.onContextMenu);

new Common.MouseEventClass(this.mouseEventInfo);

我们绑定事件的元素是document，操作软件的所有事件都会走我们绑定的以下函数：

当然最重要的操做画布的响应也依赖于我们的事件处理逻辑：

this.mouseDown：鼠标按下的事件处理逻辑，例如存储当前的鼠标值

this.dragMove：鼠标拖拽移动，例如移动某个元素或者移动画布

this.dragUp：鼠标松开（拖拽后松开鼠标），例如停止移动

this.mouseMove：鼠标移动（不是按住状态），例如让元素显示hover状态

this.mouseUp：鼠标松开（mousedown后马上松开），例如触发某个元素的编辑状态

this.mouseWheel：鼠标滚动，例如缩放画布

this.onContextMenu：鼠标点击右键，例如显示右键菜单