软件项目技术点(6)——结合鼠标操作绘制动态canvas画布
2024-08-24 03:09:24
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：鼠标点击右键，例如显示右键菜单
最新文章
- C/C++内存泄漏及检测
- 服务器搭建多个tomcat服务器
- Splinter学习－－初探1，模拟百度搜索
- MySQL性能优化(一)
- satis 搭建 Composer 私有库的方法
- URAL 1416 Confidentia [次小生成树]
- label添加手势（触摸改变其背景颜色）
- Codeforces 543D Road Improvement（DP）
- CSS3边框
- 【.net 深呼吸】细说CodeDom（10）：生成异常处理语句
- 倒水问题（Fill,UVA 10603) lrj白书 p202
- 201521123025 <<java程序设计>>第3周学习总结
- 通用的C#导出Excel 支持2003及2007以上版本
- Node.js(day6)
- 2018-11-23 手工翻译Vue.js源码:尝试重命名标识符与文本
- 将ubuntu的home迁移至第二块磁盘
- 8. Oracle通过rman进行克隆
- 如何设置Mac电脑的DNS
- 面试总结之Google
- CentOS7.4安装部署openstack [Liberty版] （二）