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();
        }

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

0

1个回答

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

0
qq_37524684
子幽 突然想起我之前用的是<area>标签,<canvas>还要简单一点
一年多之前 回复
qq_24534807
qq_24534807 回复子幽: 哦,我试试看,谢谢
一年多之前 回复
qq_37524684
子幽 回复qq_24534807: 你可以获取到鼠标移动到最后停下的点的坐标,这个坐标是相对于body的,再将你的图形原来的中心点的坐标获取到,计算出横纵坐标的差值,这姓都是js做的,你只需要将原来的坐标加上或者减去这差值就好
一年多之前 回复
qq_24534807
qq_24534807 嗯嗯,差不多是这样,不过我这个是以鼠标移动到最后停下的点为原点的,请问知道要怎么解决吗?
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
canvas(html5)放大缩小 点击事件
已实现点击事件。和移动鼠标,以鼠标为原点的放大缩小。可是经过放大和缩小后,点击就失效了。rn请问在这种放大缩小的情况下还能怎样去实现点击呢?求思路!rnrn例如:rn给定的点击区域,当鼠标点击这区域是会打印提示rn```rn x:1386,rn y:50,rn width: 120,rn height: 40rn```rn放大缩小rn```rn canvas.addEventListener('mousemove',function(evt)rn lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);rn lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);rn dragged = true;rn if (dragStart)rn var pt = context.transformedPoint(lastX,lastY);rn context.translate(pt.x-dragStart.x,pt.y-dragStart.y);rn redraw();rn rn ,false);rn rn 、、、、、、rn var zoom = function(clicks)rn var pt = context.transformedPoint(lastX,lastY);rn context.translate(pt.x,pt.y);rn var factor = Math.pow(scaleFactor,clicks);rn zoomSize = factor;rn context.scale(factor,factor);rn context.translate(-pt.x,-pt.y);rn redraw();rn rn```rnrnrn可是,经过放大缩小后,位于原本区域的图片,移动到其他地方,图形也扩大或缩小了,这时候的点击就等于失效了rnrn
HTML5:使用Canvas和Input range控件放大缩小图片
使用了HTML5的两个新标签canvas和input range。rnrnrn效果图如下,拉动控制杆可以放大缩小图片:rnrnrnrnrn代码:rnnnn n 图片缩放nnnn n 你的浏览器不支持canvas。n n nnn n var canvas = document.getElementById("canvas");n var context = canvas.getContext(
html5 canvas图片缩放,拖拽
想用html5 canvas来实现地图功能rn主要是想把地图功能集合在系统中,而不是使用类似geoserver等发布,相当于两套系统了。地图是室内地图,所以高德百度什么的没用。我的理想情况是丢一副矢量图当做地图,上面有几个监控点放置摄像头等等。目前还在设计中……rn后面发现canvas似乎可以试试,就找了个easelJs.js的js库,但这玩意不知道怎么回事,对click事件的反应很不好,对mou
基于HTML5 Canvas绘制的支持手势缩放的室内地图
你是否有过这样的经历,在大型的商圈、商场中傻傻找不到路。嗯,室内地图就这样应运而生了。百度地图、高德地图等都提供了室内地图的功能,高德地图最近还把室内地图的API开放了。室内地图的导航、定位功能一定是未来几年非常有前途的一件事。本文提供了一种基于HTML5 Canvas绘制室内地图的方案,更重要的是可以支持手势的缩放。先来看看室内地图的效果gif动图吧:
canvas图片滚轮放大缩小
htmln&amp;lt;canvas id=&quot;canvas&quot; style=&quot;display: block;margin: 0 auto;border: 1px solid #ccc;&quot;&amp;gt;n 你的浏览器不支持canvasn&amp;lt;/canvas&amp;gt;nnjsn let canvas = document.querySelectorAll('#canvas')[0]n let cont...
Html5 canvas学习5-图形变形:缩放 旋转 平移 变形
在canvas对当前绘图对象进行变形时,其中心点是画布(0,0)的坐标原点。1.缩放缩放context.scale(x,y)nx:x坐标轴按x比例缩放 y:y坐标轴按y比例缩放n比如1表示不缩放、0.5表示缩小50%、2.3表示放大2.3倍。n例子:<script>nvar c = document.getElementById("myCanvas");nvar ctx = c.getConte
HTML5 Canvas 开发 绘图方法整理 【九、Canvas旋转、缩放】
rotate() 旋转当前绘图   (旋转) n 语法: n ctx.rotate 需要注意的是它默认旋转的原点并不是以之前绘制的图形某一点为原点 而是以Canvas 画布 x轴坐标0 y轴坐标0 的位置为原点的; n 可以看下示例代码nn ctx.fillStyle=&quot;#27A5FF&quot;;n ctx.fillRect(50,5...
使用canvas实现瓦片地图的拼凑、放大缩小、经纬度定位
实用js实现对瓦片地图放大缩小的底层实现
canvas 手势拖拽旋转放大 crop截取图片 头像上传高清版本 (Tomcat 测试)
请在Tomcat上运行,手机测试手势 本版本,使用cropper.js+hammer.js 实现手势旋转拖拽放大缩小图片功能,在截取图片时 清晰度远远大于jcanvas版本.有截取框,点击截取canvas bug 设置截取框cropbox的高度 不能大于图片高度,不知道新版的croppper.js是否修复
使用Canvas对应用图标的角标做缩放动画,具有呼吸效果
使用Canvas对应用图标的角标做缩放动画,具有呼吸效果,效果如下所示。rnrnrnrnGithub源码地址:  点击打开链接
HTML5实现图片拖动,旋转,放大,拉伸等特效
HTML5实现图片拖动,旋转,放大,拉伸等特效,HTML5实现图片拖动,旋转,放大,拉伸等特效
HTML5 canvas标签的全屏、退出全屏,canvas中显示的缩放、移动,小坑盘点
选择任意标签全屏显示,这儿是canvas,触发函数绑在按钮上:rn此处没坑rn$('#tab_fullScreen').click(function(){n fullScreen();n });n n function fullScreen() {n var element = document.getElementById('tab_canvas'),method = "RequestFul
HTML5图片canvas等比例缩放后上传
图片识别n n n n $(function () {n function decodeUnicode(str) {n return unescape(unescape(str.replace(/\\u/g, '%u')));n }nn $("#pic").change(
html5 canvas 画雷达图. 实现内部元素的click,mousemove,mouseout事件.
基于html5,canvas技术.全代码手把手画雷达图,实现内部元素的点击,浮动等事件,比echarts功能更强大.
HTML5 canvas 圆环扩散效果
【canvas】圆环扩散效果nn使用 HTML5 canvas 制作圆环扩散的效果 以下是效果图nnnnn下面是实现代码n仅供参考 转载请注明出处n如有问题请联系nnn页面元素nn&lt;!DOCTYPE html&gt;n&lt;html lang="en"&gt;n&lt;head&gt;n &lt;meta charset="UTF-8"&gt;n &lt;title&gt;圆...
实现图片放大缩小,点击热点响应事件
最近实现一个功能,类似百度地图。条件:一张图片。要求图片可以任意放大缩小移动,点击放缩后图片的热点时弹出popwindow,并且给热点区域添加阴影,显示出热点区。n实现思路:n1.先要实现图片的任意放缩n2.获得热点区域的坐标n3.点击热点区域响应事件n4.点击热点区域弹出popwindows,并指定popwindow的显示位置n5.给热点区域添加背景色n解决方法:n1.网上实现图
使用HTML5 canvas 标签进行图片裁剪、旋转、缩放
代码使用到的js插件:jquery、bootstrap、lrz。 njquery就不说了,基本都知道。bootstrap是一个响应式的前端ui框架。使用它是为了在手机端查看页面时能够自适应宽高。lrz是一个前端的js压缩图片的插件。 n效果图: n n截图后的图片: n源代码下载:点击下载 nHTML页面代码:<html lang="zh-CN">n<head>n <meta http-equ
HTML 给canvas矩形添加监听事件
n&amp;lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&amp;gt;n&amp;lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&amp;gt;n&amp;lt;head&amp;gt;n&amp;lt;me
HTML5五角星探照灯文字效果.zip
HTML5五角星探照灯文字效果是一款HTML5基于canvas绘制五角星形状的探照灯文字,通过自动放大缩小显示区域效果。
HTML5 Canvas图形密集动画特效.zip
HTML5 Canvas图形密集动画特效是一款彩色密集的几何图形放大缩小动画特效。
HTML5 Canvas彩色粒子飘动特效.zip
HTML5 Canvas彩色粒子飘动特效是一款色粒子元素放大缩小随机飘动背景动画特效。
HTML5 Canvas点击泡沫横飞特效.zip
HTML5 Canvas点击泡沫横飞特效是一款类似放烟花效果的鼠标点击事件代码。
WPF中Canvas的鼠标或Touch事件
如果Canvas没有设置好background属性,则收不到这些事件,如TouchDown,TouchUp,TouchMove.n设置了背景后就可以收到事件
canvas画一个图片,并实现点击按钮上移下移左移右移放大缩小
左移rn    右移rn    上移rn    下移rn    放大rn    缩小rnrnrnrnrn    rn// canvas元素, 图片元素rnvar x = document.querySelector("#canvas");rnvar image = new Image();rnvar ctx = x.getContext("2d");rnrnvar drawcircle = fun
canvas(11/30)--------事件处理(局部图片放大)
example2.jsrnrnvar canvas = document.getElementById('canvas');n context = canvas.getContext('2d');n rubberbandDiv = document.getElementById('rubberbandDiv');n resetButton = document.getElementById('re
点击canvas中指定图形触发事件
问题:n给canvas绘制的某个图片区域绑定点击事件n分析:ncanvas绘制时可取得图形位置,绘制完成时无法获取每一个图形的位置n解决:n重绘一遍图形,一边绘制一边比较点击事件发生的位置,看点击事件发生在了哪一个图形上面n在canvas标签中添加属性nbindtap='CanvasTap'nn下面两个属性可用来自定义长按还是单击,官方给出的bindlongtap 作为长按是500毫秒,个人感觉这...
html5 canvas图形事件实例之拖拽
html5 开发,实现拖动就是如此简单 : canvas图形事件实例之拖拽
html5 canvas实现不规则形状图片触发事件
html5 canvas实现不规则形状图片触发事件rn具体实现可以看https://www.cnblogs.com/zhangjk1993/p/6139146.htmlrnrncanvas同样也可以导出图片查看原文:http://newmiracle.cn/?p=2497
HTML5_节点对象-事件穿透
1、 创建元素 n n2、 创建文本节点 n n3、 创建注释 n n4、 创建文档片段 n n5、 插入节点 n n n6删除节点 n n7替换节点 n n8-Img对象 n n9-table对象 n n10-select对象 n n不同的手机系统显示的下拉菜单是不一样的,比如安卓和苹果 11–option对象 n12、form对象 n n13、input对象
HTML 给canvas圆形添加监听事件
n&amp;lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&amp;gt;n&amp;lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&amp;gt;n&amp;lt;head&amp;gt;n&amp;lt;me
HTML5利用canvas压缩图片(不改变图片宽和高)
最近项目中有一个手机拍照上传的需求,现在的智能手机摄像头像素很高,拍出来的照片大小大都在5M左右,当手机在上传图片时遇到了问题,之前采用的方法是将图片先进行Base64编码,然后上传到服务器,结果因为图片太大,导致服务器老是回复超时错误;权衡之下决定在图片上传之前先将图片压缩;nn以下为我采用方法的源码:nnn&amp;lt;!DOCTYPE html&amp;gt;n&amp;lt;html&amp;gt;n&amp;lt;head&amp;...
使用HTML5 canvas 标签进行图片裁剪、旋转、缩放示例代码
使用HTML5 canvas 标签进行图片裁剪、旋转、缩放示例代码
Android canvas 放大 缩小 平移
Android canvas 放大 缩小 平移 各种绘图 自定义view 请自行修改
Canvas---放大和缩小圆环插件
最近小组招新,需要一个小型的动画,就是在第一页会有个放大和缩小的圆环。n主要用到的知识就是 canvas,看一下源码,内部注释比较清晰:/*n * selector: canvas元素选择器n * x:绘制的圆形x轴位置n * y:绘制的圆y轴位置n * r:绘制圆的半径n * outColor: 外部圆颜色n * innerColor:内部圆颜色n *
Canvas实现 图片裁剪、移动、放大缩小以及图片的合成
Canvas实现 图片裁剪、移动、放大缩小以及图片的合成前段时间项目上需要做一个合成图片的小活动,参考了很多案例,发现还是用canvas最为简便。[StackEdit][6]:目录用 [TOC]来生成目录:Canvas实现 图片裁剪移动放大缩小以及图片的合成n目录n图片绘制ctxdrawImageimagesxsyswshdxdydwdhn图片合成canvastoDataURLtype encode
canvas基础之 滚动条控制图片放大缩小
n n n nnnnnnnnnnnnnnnnnnn n nn
HTML5 Canvas
HTML5 Canvas 经典学习教程, HTML5 Canvas 经典学习教程-HTML5 Canvas Study,HTML5 Canvas Study,HTML5 Canvas Study
html5图片裁剪控件原型【含缩放,旋转,拖动功能】---2、核心代码
推荐这一篇文章是早年为了解决图片裁剪的探索性文章,现在已经开放出了falsh版及html5版本的图片裁剪插件,各位有时间可以看看: n浮士德html5图片裁剪器2016开源版 n浮士德头像裁剪flash版2016福利版 n上面两个解决方案已经经过多个项目的成功应用,适用于低级浏览器及现代浏览器,ipad,android,iphone4s,iphone5,iphone5s,iphone6等设备等。前言
HTML5 Canvas绘制多个图形时,点击图形实现页面跳转
1、首先要做的,是给Canvas元素绑定事件,比如Canvas内部某个图形要绑定点击事件,就需要通过Canvas元素代理该事件:cvs = document.getElementById('mycanvas');ncontext = canvas.getContext('2d');cvs.addEventListener('click', function(e){n p = getEventPos
【HTML5】Canvas 内部元素添加事件处理
canvas 没有提供为其内部元素添加事件监听的方法,因此如果要使 canvas 内的元素能够响应事件,需要自己动手实现。实现方法也很简单,首先获得鼠标在 canvas 上的坐标,计算当前坐标在哪些元素内部,然后对元素进行相应的操作。配合自定义事件,我们就可以实现为 canvas 内的元素添加事件监听的效果。
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 java学习html5 html5网页制作教程