码迷,mamicode.com
首页 > 其他好文 > 详细

Canvas---Canvas事件处理、Canvas元素的鼠标点击事件处理、实现一个元素管理器

时间:2015-03-03 22:17:49      阅读:353      评论:0      收藏:0      [点我收藏+]

标签:canvas   html5   javascript   

由于Canvas的 ”忘记式“ 绘图机制(就是它没有维护一份绘制元素的列表)。

如果仅仅检测用户是否点击整个canvas元素,只需在canvas上注册事件就好。

如果是要分别检测canvas里绘制的不同元素的鼠标点击事件,则要用下面的做法,实现一个元素管理器。

一.原理分析

1.canvas元素能提供的一个api是,context.isPointInPath(x,y),它可以判断参数的点是否在当前路径内。

2.当前路径指的是最近一次调用context.beginPath();当前路径context.closePath();中间部分的路径代码就是当前路径。

3.元素管理器维护一个元素列表,每次用户点击时,都遍历这个列表,为列表里的元素创建路径,与当前点做检测,直到找到相应的元素。

4.元素必须自己实现相应的函数:

//1.创建自身路径:createPath(context);
//2.绘制自身:drawSelf(context);
//3.点击时的时间处理:beClick();

二.效果截图

这是一个简单播放器,点击后,canvas元素的效果(图标)会变化,激活相关事件函数。

技术分享

技术分享

三.源代码
本文由 CSDN MIKUScallion 原创,更多canvas案例代码:http://blog.csdn.net/mikuscallion
//图片按钮
var MikuImgBtn = function(x,y,w,h){
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.image;
    this.beClick;
    this.createPath = function(context){
        context.beginPath();
        context.rect(this.x,this.y,this.w,this.h);
        context.closePath();
    };
    this.drawSelf = function(context){
        //图片按钮
        if(this.image !== undefined){
            context.drawImage(this.image,this.x,this.y,this.w,this.h);
        }
    };
    this.addBeClick= function(beClick){
        this.beClick = beClick;
    }
};
//存储管理已经绘制的元素的一个类
//存储的元素必须实现
//1.创建自身路径:createPath(context);
//2.绘制自身:drawSelf(context);
//3.点击时的时间处理:beClick();
var MikuDrawedObjList = function (){
    var objList = [];
    
    this.push = function (obj){
        objList.push(obj);
    }
    this.remove = function(obj){
        for(var i = 0;i<objList.length;i++){
            var temp = objList[i];
            if(temp === obj){
                objList.splice(i,1);
                return i;
            }
        }
    }
    this.getClickObj = function (context,x,y){
        for(var i = 0; i<objList.length; i++){
            //obj必须实现这个方法
            objList[i].createPath(context);
            if(context.isPointInPath(x,y)){
                return objList[i];
            }
        }
    }
    this.drawAll = function (context){
        objList.forEach(function(obj){
            //obj必须实现这个方法
            obj.drawSelf(context);
        });
    }
}
//页面元素列表
        var activeObjList = new MikuDrawedObjList();
////按键监听//////////////////////////////////////////////////////////////////////    
        window.onclick = function(e){
            var loc = windowToCanvas(e.clientX,e.clientY);
            var clickObj = activeObjList.getClickObj(context,loc.x,loc.y);
            if(clickObj!== undefined){
                clickObj.beClick();
            }
        }




Canvas---Canvas事件处理、Canvas元素的鼠标点击事件处理、实现一个元素管理器

标签:canvas   html5   javascript   

原文地址:http://blog.csdn.net/mikuscallion/article/details/44042583

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!