qq_24534807
qq_24534807
采纳率34.5%
2017-11-22 06:46

canvas(html5)放大缩小 点击事件

已采纳

已实现点击事件。和移动鼠标,以鼠标为原点的放大缩小。可是经过放大和缩小后,点击就失效了。
请问在这种放大缩小的情况下还能怎样去实现点击呢?求思路!

例如:
给定的点击区域,当鼠标点击这区域是会打印提示

                x:1386,
                y:50,
                width: 120,
                height: 40

放大缩小

 canvas.addEventListener('mousemove',function(evt){
            lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
            lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
            dragged = true;
            if (dragStart){
                var pt = context.transformedPoint(lastX,lastY);
                context.translate(pt.x-dragStart.x,pt.y-dragStart.y);
                redraw();
            }
        },false);

        、、、、、、
        var zoom = function(clicks){
            var pt = context.transformedPoint(lastX,lastY);
            context.translate(pt.x,pt.y);
            var factor = Math.pow(scaleFactor,clicks);
            zoomSize = factor;
            context.scale(factor,factor);
            context.translate(-pt.x,-pt.y);
            redraw();
        }

可是,经过放大缩小后,位于原本区域的图片,移动到其他地方,图形也扩大或缩小了,这时候的点击就等于失效了

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • qq_37524684 子幽 4年前

    这个我做过,我是将canvas的横纵坐标(多边形)中心点半径(圆)按比例缩放,用jQuery控制的,我是在地图上描区域,地图放大缩小,这个区域也和地图上的区域一起放大缩小位置还是在原来的地方

    点赞 评论 复制链接分享