让canvas 支持鼠标事件
程序员文章站
2022-07-14 21:21:42
...
canvas里的图像不支持自定义事件,多少给编程带来点麻烦,好在有context.isPointInPath(x,y)方法,利用它可以判断给定的左边是否在当前路径中.当鼠标事件发生时,对现有的图形进行重绘,调用此方法进行判断,就可以知道点击的是哪个图形了.
多余的不说了,看看关键代码
多余的不说了,看看关键代码
$(function(){ g_shapes = []; //保存所有图形 var rect = $("#dia")[0].getBoundingClientRect(); var tPoint = {"x":rect.left,"y":rect.top}; //canvas位置 ctx = $("#dia")[0].getContext("2d"); var c1 = new shape("c1",100,300); c1.click = function(e){ alert(this.name+" was clicked at "+e.x+","+e.y); } var c2 = new shape("c2",400,300,"#800040"); c2.click = function(e){ alert(this.name+" was clicked at "+e.x+","+e.y); } $("#dia").click(function(env){ var point = {"x":env.pageX-tPoint.x,"y":env.pageY-tPoint.y}; for(var i=0;i<g_shapes.length;i++){ g_shapes[i].reDraw(point); } }).mousemove(function(env){ var point = {"x":env.pageX-tPoint.x,"y":env.pageY-tPoint.y}; $("#pp").html(point.x+","+point.y); }); }); function shape(name,x,y,color){ this.name = name; this.click = null; this.x = x; this.y = y; this.r = 40 this.color = color || "#000000"; ctx.beginPath(); ctx.moveTo(this.x, this.y - this.r); ctx.arc(this.x, this.y, this.r, 2 * Math.PI, 0, true); ctx.fillStyle = color; ctx.fill(); ctx.closePath(); g_shapes.push(this); } shape.prototype.reDraw = function(point){ ctx.beginPath(); ctx.fillStyle = this.color; ctx.arc(this.x, this.y, this.r, 2 * Math.PI, 0, true); if (ctx.isPointInPath(point.x,point.y)) { $("#console").append("<li>"+this.name+" was clicked"+"</li>"); this.click.call(this,point); } ctx.closePath(); } shape.prototype.click = function(fn){ this.click = fn; }
上一篇: 使用org.json解决部分日期问题
下一篇: java调用oralc存储过程返回数组