账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    js中removeEventListener()移除不了绑定事件。
    25
    0

    removeEventListener()移除不了绑定事件。 代码如下 点击一个按钮,先移除事件再绑定事件,可是移除事件不好使。

    $(document).on("click", ".pencil", function () {
        draw_graph('pencil', this);
    });
    $(document).on("click", ".drawLine", function () {
        draw_graph('line', this);
    });
    $(document).on("click", ".square", function () {
        draw_graph('square', this);
    });
    $(document).on("click", ".circle", function () {
        draw_graph('circle', this);
    });

    //画布
    var canvas ;
    var context ;
    //蒙版
    var canvas_bak;
    var context_bak;
    
    var canvasWidth = 960;
    var canvasHeight = 580;
    
    var canvasTop;
    var canvasLeft;
    
    //画笔大小
    var size = 1;
    var color  = '#000000';
    
    // 画笔类型
    var graphType = '';
    
    
    var draw_graph = function(graphType,obj){
        canvas_bak = document.getElementById("canvas_bak");
        console.log(graphType)
        graphType = graphType;
        //把蒙版放于画板上面
        $("#canvas_bak").css("z-index",1);
        //先画在蒙版上 再复制到画布上
            
        chooseImg(obj);            
        var canDraw = false;    
        
        var startX;
        var startY;
    
        //鼠标按下获取 开始xy开始画图
        var mousedown = function(e){
            // 如果绘画视图是小窗口  那就禁止绘画
            if($(".canvas_container_box").hasClass("small_box")) {
                return false;
            }
            //console.log(e);
            scroolTop = $(window).scrollTop();
            scroolLeft = $(window).scrollLeft();
            canvasTop = $(canvas).offset().top - scroolTop;
            canvasLeft = $(canvas).offset().left - scroolLeft;
    
            context.strokeStyle= color;
            context_bak.strokeStyle= color;
            context_bak.lineWidth = size;
            
            startX = 0;
            startY = 0;
            if (e.touches !== undefined && e.touches.length == 1 ) {
                startX = event.touches[ 0 ].pageX;
                startY = event.touches[ 0 ].pageY;
            } else {
                startX = e.clientX;
                startY = e.clientY;
            }
            
            startX = startX - canvasLeft;
            startY = startY - canvasTop;
            context_bak.moveTo(startX ,startY );
            canDraw = true;
            
            if(graphType == 'pencil'){
                context_bak.beginPath();
            }else if(graphType == 'circle'){
                context.beginPath();
                context.moveTo(startX ,startY );
                context.lineTo(startX +1 ,startY+1);
                context.stroke();    
                
            }else if(graphType == 'rubber'){                            
                context.clearRect(startX - size * 10 ,  startY - size * 10 , size * 20 , size * 20);                
            }    
            // 阻止点击时的cursor的变化,draw
            e=e||window.event;
            e.preventDefault();
        };    
    
        //鼠标离开 把蒙版canvas的图片生成到canvas中
        var mouseup = function(e){
            // 如果绘画视图是小窗口  那就禁止绘画
            if($(".canvas_container_box").hasClass("small_box")) {
                return false;
            }
            //console.log("mouseup");
            e=e||window.event;
            canDraw = false;
            var image = new Image();
            if(graphType!='rubber'){        
                image.src = canvas_bak.toDataURL();
                image.onload = function(){
                    context.drawImage(image , 0 ,0 , image.width , image.height , 0 ,0 , canvasWidth , canvasHeight);
                    clearContext();
                    saveImageToAry();
                }
            } else {
                rubberFinish();
            }
        };
    
        //选择功能按钮 修改样式
        function chooseImg(obj){
            var imgAry  = $(".draw_controller li");
            for(var i=0;i<imgAry.length;i++){
                $(imgAry[i]).removeClass('active');
                $(imgAry[i]).addClass('normal');                
            }
            $(obj).removeClass("normal");
            $(obj).addClass("active");
        }
    
        // 鼠标移动
        var  mousemove = function(e){
            console.log(graphType)
            // 如果绘画视图是小窗口  那就禁止绘画
            if($(".canvas_container_box").hasClass("small_box")) {
                return false;
            }
            //console.log(e);
            scroolTop = $(window).scrollTop();
            scroolLeft = $(window).scrollLeft();
            canvasTop = $(canvas).offset().top - scroolTop;
            canvasLeft = $(canvas).offset().left - scroolLeft;
            e=e||window.event;
            var x = y = 0;
            if (e.touches !== undefined && e.touches.length == 1 ) {
                x = event.touches[ 0 ].pageX;
                y = event.touches[ 0 ].pageY;
            } else {
                x = e.clientX;
                y = e.clientY;
            }
            x = x - canvasLeft;
            y = y - canvasTop;
            
            
            //方块  4条直线搞定
            if(graphType == 'square'){
                if(canDraw){
                    //console.log(x, y, startX, startY);
                    context_bak.beginPath();
                    clearContext();
                    context_bak.moveTo(startX , startY);                        
                    context_bak.lineTo(x  ,startY );
                    context_bak.lineTo(x  ,y );
                    context_bak.lineTo(startX  ,y );
                    context_bak.lineTo(startX  ,startY );
                    context_bak.stroke();
                }
            //直线
            }else if(graphType =='line'){                        
                if(canDraw){
                    context_bak.beginPath();
                    clearContext();
                    context_bak.moveTo(startX , startY);
                    context_bak.lineTo(x  ,y );
                    context_bak.stroke();
                }
            //画笔
            }else if(graphType == 'pencil'){
                if(canDraw){
                    context_bak.lineTo(x ,y);
                    context_bak.stroke();                        
                }
            //圆 未画得时候 出现一个小圆
            }else if(graphType == 'circle'){                        
                clearContext();
                if(canDraw){
                    // 鼠标点击移动时产生的圆
                    context_bak.beginPath();            
                    var radii = Math.sqrt((startX - x) *  (startX - x)  + (startY - y) * (startY - y));
                    context_bak.arc(startX,startY,radii,0,Math.PI * 2,false);                                    
                    context_bak.stroke();
                }else{    
                    context_bak.beginPath();                    
                    context_bak.arc(x,y,20,0,Math.PI * 2,false);
                    context_bak.stroke();
                }
            //涂鸦 未画得时候 出现一个小圆
            }else if(graphType == 'handwriting'){                                            
                if(canDraw){
                    // 鼠标点击移动产生的圆圈
                    context_bak.beginPath();    
                    context_bak.strokeStyle = color;
                    context_bak.fillStyle  = color;
                    context_bak.arc(x,y,size*5,0,Math.PI * 2,false);    
                    context_bak.fill();
                    context_bak.stroke();
                    context_bak.restore();
                }else{    
                    clearContext();
                    context_bak.beginPath();        
                    context_bak.strokeStyle = color;            
                    context_bak.fillStyle  = color;
                    context_bak.arc(x,y,size*5,0,Math.PI * 2,false);
                    context_bak.fill();
                    context_bak.stroke();
                }
            }
        };
    
        canvas_bak.removeEventListener("touchstart", mousedown);
        canvas_bak.removeEventListener("touchmove", mousemove);
        canvas_bak.removeEventListener("touchend", mouseup);
        canvas_bak.addEventListener("touchstart", mousedown);
        canvas_bak.addEventListener('touchmove',mousemove);
        canvas_bak.addEventListener('touchend',mouseup);
    }
    
    
    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    更多回答
    扫一扫访问手机版

    回答动态

    师傅被妖怪抓走了:发布了悬赏问题火爆全网的“元宇宙”到底是什么?预计能赚取 1积分收益
    酒后略带风情:发布了悬赏问题Android内存中Graphics与Code占用过高预计能赚取 10积分收益
    扛起拖把扫天下:发布了悬赏问题typescript如何导出接口配置?求解,谢谢!预计能赚取 10积分收益
    发布了悬赏问题Vue 如何改变返回页面的路径?如让B页面只能返回到A页面.预计能赚取 11积分收益
    发布了悬赏问题vue H5移动端;底部bottom固定定位,安卓弹起键盘导致页面变形如何解决?预计能赚取 10积分收益
    发布了悬赏问题请问为什么tomcat8.5 GET请求中文正常,POST请求还需要设置UTF-8.预计能赚取 10积分收益
    发布了悬赏问题vue2.5+ts创建以及引入jq的方法预计能赚取 11积分收益
    情场浪女:发布了悬赏问题import ggplot时报错module 'pandas' has no attribute 'tslib'预计能赚取 10积分收益
    见心书画许老师18753375161:发布了悬赏问题echarts3 legend禁止点击事件,允许悬浮事件预计能赚取 11积分收益
    aa_92cb0bd09f:发布了悬赏问题codewar上的一个问题预计能赚取 11积分收益