openGL按鼠标中键实现放大缩小

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了openGL按鼠标中键实现放大缩小相关的知识，希望对你有一定的参考价值。

单纯的openGL只是一套图形接口,不支持鼠标\键盘的输入输出,这个想必你已经知道了.
解决方法有2:
1,使用MFC或者Win32 API函数,具体用法请自行查阅msdn.
2,使用glut函数库,需要注意:
老版本的glut库不支持鼠标中键消息的响应,所以要将glut.lib,glut.h,glut.dll三个文件更新到新版本.完成后,使用glutMouseFunc()注册你自己的鼠标回调函数,再在其中响应GLUT_WHEEL_UP和GLUT_WHEEL_DOWN消息即可,分别是滚轮向上滚和向下滚的消息. 参考技术A 用glPixelZoom(GLfloat zoomx,GLfloat zoomy)可以实现图像缩放。
OpenGL有glutMouseFunc，glutMotionFunc两个函数来响应鼠标，不过好像没有中键的函数。
可以考虑用键盘实现了。 参考技术B 关于键盘和鼠标的操作可以使用DirectInput

JS实现鼠标拖拽效果以及放大缩小

要求：拖拽的子元素不能走出父元素，大小不能超过父元素，放大/缩小时阻止冒泡事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*margin: 0;padding: 0;
.box1border: 10px solid #000;width: 400px;height: 400px;position: relative;margin: 0 auto;
.box2position: absolute;width: 80px;height: 80px;background: gold;top: 0;left: 0;
.box3position: absolute;width: 10px;height: 10px;right: -5px;bottom: -5px;background: #0000FF;border-radius: 50%;
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
<script type="text/javascript">
var box1 = document.querySelector(".box1");
var box2 = document.querySelector(".box2");
var box3 = document.querySelector(".box3");
box1.onmousedown = function(e) 
e = e || window.event;
var left = box2.offsetLeft;
var top = box2.offsetTop;
var nowX = e.clientX;
var nowY = e.clientY;
document.onmousemove = function(e) 
var resultX = left + e.clientX - nowX;
var resultY = top + e.clientY - nowY;
if(resultX < 0) 
resultX = 0;

 else if (resultX > box1.clientWidth - box2.offsetWidth) 

resultX = box1.clientWidth - box2.offsetWidth

if(resultY < 0) 
resultY = 0;
 else if (resultY > box1.clientHeight - box2.offsetHeight) 
resultY = box1.clientHeight - box2.offsetHeight

box2.style.left = resultX + "px";
box2.style.top = resultY + "px";


box3.onmousedown = function(e) 
e = e || window.event;
e.stopPropagation();
e.cancelBubble = true;
var width = box2.offsetWidth;
var height = box2.offsetHeight;
var nowX = e.clientX;
var nowY = e.clientY;
document.onmousemove = function(e) 
e = e || window.event;
var a = width + e.clientX - nowX;
var b = height + e.clientY - nowY;
if(a > box1.clientWidth)
a = box1.clientWidth;

if(b > box1.clientHeight)
b = box1.clientHeight;

box2.style.width = a + "px"
box2.style.height = b + "px";


document.onmouseup = function() 
document.onmousemove = null;

</script>
</body>
</html>

 

以上是关于openGL按鼠标中键实现放大缩小的主要内容，如果未能解决你的问题，请参考以下文章

JS控制图片放大和缩小怎么改

在网页里点开放大了一张图片后，怎么实现随鼠标滚轮放大缩小？

为啥我的鼠标滚动时会莫名其妙的变成放大缩小页面了？该怎么办？

在java Applet里如何实现鼠标滚轮放大缩小图片？

canvas里有一张图，怎么实现鼠标可以拖动该图片移动，放大缩小旋转

visio 如何按指定比例调整形状大小，指定比例进行放大缩小