canvas是怎么响应鼠标事件的
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas是怎么响应鼠标事件的相关的知识，希望对你有一定的参考价值。
参考技术A 给你看个例子吧一般还是调用mousedown，mouseup，mousemove事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>箭头</title>
<style>
#canvas
display:block;
margin:50px auto;
</style>
</head>
<body>
<canvas id='canvas' style='height:300px; width:600px; border:1px solid #000' height='300' width='600'></canvas>
</body>
<script src='jquery-1.11.1.min.js'></script>
<script>
window.onload=function()
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
size();
load(ctx);
//实例化
function load(ctx)
var route=function(ctx,arr)
this.flag=true;
this.ctx=ctx;
this.arr=arr;
this.drawLine(arr);
route.prototype=
jiantou:function(x,y,p,q)
var xn1,yn1,xn2,yn2;
xn1=(x-p)*Math.cos(Math.PI/4)-(y-q)*Math.sin(Math.PI/4)+p;
yn1=(x-p)*Math.sin(Math.PI/4)+(y-q)*Math.cos(Math.PI/4)+q;
xn2=(x-p)*Math.cos(Math.PI*1.75)-(y-q)*Math.sin(Math.PI*1.75)+p;
yn2=(x-p)*Math.sin(Math.PI*1.75)+(y-q)*Math.cos(Math.PI*1.75)+q;
return x1:Number(xn1),x2:Number(xn2),y1:Number(yn1),y2:Number(yn2)
,
drawLine:function()
var $canvas=$('#canvas');
var flag=flag;
var that=this;
$canvas.mousedown(function(e)
var e=e||window.event;
flag=true;
var a=e.offsetX;
var b=e.offsetY;
var obj=a,b;
arr[0]=obj;
ctx.beginPath();
ctx.clearRect(0,0,600,300);
ctx.closePath();
)
$canvas.mousemove(function(e)
if(flag)
var e=e||window.event;
var p=e.offsetX;
var q=e.offsetY;
var a=arr[0].a;
var b=arr[0].b;
//右端箭头
var x,y;
//第一象限
if(p<=a&&q<=b)
x=p+(Math.abs(p-a)/10);
y=q+(Math.abs(q-b)/10);
;
//第二象限
if(p>=a&&q<=b)
x=p-(Math.abs(p-a)/10);
y=q+(Math.abs(q-b)/10);
;
//第三象限
if(p<=a&&q>=b)
x=p+(Math.abs(p-a)/10);
y=q-(Math.abs(q-b)/10);
//第四象限
if(p>=a&&q>=b)
x=p-(Math.abs(p-a)/10);
y=q-(Math.abs(q-b)/10);
var obj=that.jiantou(x,y,p,q);
//右端箭头结束
//中部箭头开始
var xc,yc;
xc=Math.abs(p+a)/2;
yc=Math.abs(q+b)/2;
var k =(q-b)/(p-a);
//此处解决了k=0时 ktrue消失的问题，但是由于k为正数，所以，在从第一象限进入第二象限之时会存在箭头反向闪烁
// if(k==0)
// k=0.000001;
// var ktrue=(-1/k);//垂直的斜率
// else
// var ktrue=(-1/k);//垂直的斜率
//
var ktrue=(-1/k);//垂直的斜率 当k=0时，ktrue不存在，故会消失
var bf=b-k*a;
var btrue=yc-ktrue*xc;
var xl,yl,xr,yr, xChange, yChange;
//第一象限 //第二象限
if(p<=a&&q<=b||p>=a&&q<=b)
//箭头端x值
xr=((2*xc-2*ktrue*btrue+2*ktrue*yc)-Math.sqrt( Math.pow((2*xc-2*ktrue*btrue+2*ktrue*yc),2)-(4*(Math.pow((ktrue),2)+1)*(Math.pow(xc,2)-2*btrue*yc+Math.pow(yc,2)+Math.pow(btrue,2)-600)) ))/(2*(1+Math.pow(ktrue,2)));
xl=((2*xc-2*ktrue*btrue+2*ktrue*yc)+Math.sqrt(Math.pow((2*xc-2*ktrue*btrue+2*ktrue*yc),2)-(4*(Math.pow(ktrue,2)+1)*(Math.pow(xc,2)-2*btrue*yc+Math.pow(yc,2)+Math.pow(btrue,2)-100)) ))/(2*(1+Math.pow(ktrue,2))) ;
//根据此处数值，可控制箭头的大小
xChange=((2*xc-2*ktrue*btrue+2*ktrue*yc)-Math.sqrt( Math.pow((2*xc-2*ktrue*btrue+2*ktrue*yc),2)-(4*(Math.pow((ktrue),2)+1)*(Math.pow(xc,2)-2*btrue*yc+Math.pow(yc,2)+Math.pow(btrue,2)-100)) ))/(2*(1+Math.pow(ktrue,2)));
;
//第三象限 //第四象限
if(p<=a&&q>=b||p>=a&&q>=b)
//斜率改变，改变箭头端x值
xr=((2*xc-2*ktrue*btrue+2*ktrue*yc)+Math.sqrt( Math.pow((2*xc-2*ktrue*btrue+2*ktrue*yc),2)-(4*(Math.pow((ktrue),2)+1)*(Math.pow(xc,2)-2*btrue*yc+Math.pow(yc,2)+Math.pow(btrue,2)-600)) ))/(2*(1+Math.pow(ktrue,2)));
xl=((2*xc-2*ktrue*btrue+2*ktrue*yc)-Math.sqrt(Math.pow((2*xc-2*ktrue*btrue+2*ktrue*yc),2)-(4*(Math.pow(ktrue,2)+1)*(Math.pow(xc,2)-2*btrue*yc+Math.pow(yc,2)+Math.pow(btrue,2)-100)) ))/(2*(1+Math.pow(ktrue,2)));
//根据此处数值，可控制箭头的大小
xChange=((2*xc-2*ktrue*btrue+2*ktrue*yc)+Math.sqrt( Math.pow((2*xc-2*ktrue*btrue+2*ktrue*yc),2)-(4*(Math.pow((ktrue),2)+1)*(Math.pow(xc,2)-2*btrue*yc+Math.pow(yc,2)+Math.pow(btrue,2)-100)) ))/(2*(1+Math.pow(ktrue,2)));
yl=ktrue*xl+btrue;
yr=ktrue*xr+btrue;
yChange=ktrue*xChange+btrue;
var objCenter=that.jiantou(xChange,yChange,xr,yr);
//中部箭头结束
ctx.beginPath();
ctx.clearRect(0,0,600,300);
ctx.moveTo(arr[0].a,arr[0].b);
ctx.lineTo(p,q);
ctx.moveTo(obj.x1,obj.y1);
ctx.lineTo(p,q);
ctx.lineTo(obj.x2,obj.y2);
ctx.lineStyle=2;
ctx.strokeStyle='#f00';
ctx.stroke();
ctx.beginPath();
ctx.moveTo(xl,yl);
ctx.lineTo(xr,yr);
ctx.moveTo(objCenter.x1,objCenter.y1);
ctx.lineTo(xr,yr);
ctx.lineTo(objCenter.x2,objCenter.y2);
ctx.lineStyle=2;
ctx.strokeStyle='#f00';
ctx.stroke();
ctx.closePath();
else
return
);
$canvas.mouseup(function(e)
flag=false;
)
// 实例化
var ctx =ctx;
var arr=new Array();
var route=new route(ctx,arr);
// 适应屏幕
function size()
window.onresize = null;
var bodyHeight= document.body.clientHeight;
var clientHeight= document.documentElement.scrollHeight;
</script>
</html>
MFC的静态控件怎么响应鼠标事件呀。。要详细一点的。。我菜鸟，谢谢
就是静态控件。。图片之类的响应鼠标按下的事件，在没有控件的区域能响应，但静态控件上总是响应不了，不知道怎么处理
参考技术A 在你想要添加响应的类上，右键添加消息处理Add windows Message Handle
选择windows事件 WM_LBUTTONDOWN
然后编辑函数追问
picture类上只有单击事件，没有鼠标按下事件。。。
菜鸟，抱歉
加载光标资源(常在定义窗口类时进行)
LoadCursor(hThisInst,lpszCursorname)
另外：
lParam包含了鼠标位置（低位包含鼠标位置的x坐标值，高位包含鼠标位置的y坐标）
wParam包含了指示各种虚键状态的值（如：WM_LBUTTONDOWN用户区内按下鼠标左键等消息）
例如下面的部分代码：
LRESULT CALLBACK WndProc(HWND hwnd,UINT message,WPARAM wParam,LPARAM lParam) //窗口处理函数
HCURSOR hcursor;
static int x,y; //鼠标的坐标值
switch(message)
case WM_MOUSEMOVE: //事件，鼠标移动
x=LOWORD(lParam); //得到鼠标的x、y坐标值
y=HIWORD(lParam);
if(x>50&&x<150&&y>50&&y<150) //判断鼠标是否在目标区域
hcursor=LoadCursor(NULL,IDC_CROSS); //十字光标
SetCursor(hcursor);
……
case WM_LBUTTONDOWN: //事件，鼠标左键被按下
……
上面就是应用程序对鼠标的响应，但是不知道你提问的问题具体是指哪方面的响应，不知道我的回答能否让你满意。本回答被提问者采纳 参考技术C static text 那个控件嘛？？还是？？
以上是关于canvas是怎么响应鼠标事件的的主要内容，如果未能解决你的问题，请参考以下文章
canvas里有一张图，怎么实现鼠标可以拖动该图片移动，放大缩小旋转
MFC的静态控件怎么响应鼠标事件呀。。要详细一点的。。我菜鸟，谢谢