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图片缩放,拖拽
想用html5 canvas来实现地图功能 主要是想把地图功能集合在系统中,而不是使用类似geoserver等发布,相当于两套系统了。地图是室内地图,所以高德百度什么的没用。我的理想情况是丢一副矢量图当做地图,上面有几个监控点放置摄像头等等。目前还在设计中…… 后面发现canvas似乎可以试试,就找了个easelJs.js的js库,但这玩意不知道怎么回事,对click事件的反应很不好,对mou
HTML5:使用Canvas和Input range控件放大缩小图片
使用了HTML5的两个新标签canvas和input range。 效果图如下,拉动控制杆可以放大缩小图片: 代码: 图片缩放 你的浏览器不支持canvas。 var canvas = document.getElementById("canvas"); var context = canvas.getContext(
基于HTML5 Canvas绘制的支持手势缩放的室内地图
你是否有过这样的经历,在大型的商圈、商场中傻傻找不到路。嗯,室内地图就这样应运而生了。百度地图、高德地图等都提供了室内地图的功能,高德地图最近还把室内地图的API开放了。室内地图的导航、定位功能一定是未来几年非常有前途的一件事。本文提供了一种基于HTML5 Canvas绘制室内地图的方案,更重要的是可以支持手势的缩放。先来看看室内地图的效果gif动图吧:
Canvas的使用,放大缩小的自定义布局,不同的位置不同的点击事件
从一接触这个项目就开始找实现的各种方式,首先说一下需求: 1、一个可以缩放的背景,可以向背景中加入新的图片; 2,加入的图片可以触发事件,图片要随着背景放大缩小或移动; 具体的需求就是这些,有些像地图,或者塔防游戏的感觉,但是并没有那么复杂。 首先想到imageView,但是并不能向内添加子控件,点击时间也无从处理,所以转向自定义控件,由于本人是新手,只能到处搜罗代码,解决思路。如果你对加
HTML5实现图片拖动,旋转,放大,拉伸等特效
HTML5实现图片拖动,旋转,放大,拉伸等特效 效果详情参考http://www.xwcms.net/webAnnexImages/fileAnnex/20131031/91857/index.html
Html5 canvas学习5-图形变形:缩放 旋转 平移 变形
在canvas对当前绘图对象进行变形时,其中心点是画布(0,0)的坐标原点。1.缩放缩放context.scale(x,y) x:x坐标轴按x比例缩放 y:y坐标轴按y比例缩放 比如1表示不缩放、0.5表示缩小50%、2.3表示放大2.3倍。 例子:<script> var c = document.getElementById("myCanvas"); var ctx = c.getConte
使用canvas实现瓦片地图的拼凑、放大缩小、经纬度定位
实用js实现对瓦片地图放大缩小的底层实现
HTML5 Canvas 开发 绘图方法整理 【九、Canvas旋转、缩放】
rotate() 旋转当前绘图   (旋转) 语法: ctx.rotate 需要注意的是它默认旋转的原点并不是以之前绘制的图形某一点为原点 而是以Canvas 画布 x轴坐标0 y轴坐标0 的位置为原点的; 可以看下示例代码 ctx.fillStyle=&quot;#27A5FF&quot;; ctx.fillRect(50,5...
canvas画一个图片,并实现点击按钮上移下移左移右移放大缩小
左移     右移     上移     下移     放大     缩小      // canvas元素, 图片元素 var x = document.querySelector("#canvas"); var image = new Image(); var ctx = x.getContext("2d"); var drawcircle = fun
使用HTML5 canvas 标签进行图片裁剪、旋转、缩放
代码使用到的js插件:jquery、bootstrap、lrz。 jquery就不说了,基本都知道。bootstrap是一个响应式的前端ui框架。使用它是为了在手机端查看页面时能够自适应宽高。lrz是一个前端的js压缩图片的插件。 效果图: 截图后的图片: 源代码下载:点击下载 HTML页面代码:<html lang="zh-CN"> <head> <meta http-equ
canvas 手势拖拽旋转放大 crop截取图片 头像上传高清版本 (Tomcat 测试)
请在Tomcat上运行,手机测试手势 本版本,使用cropper.js+hammer.js 实现手势旋转拖拽放大缩小图片功能,在截取图片时 清晰度远远大于jcanvas版本.有截取框,点击截取canvas bug 设置截取框cropbox的高度 不能大于图片高度,不知道新版的croppper.js是否修复
canvas实现滚动条缩放图片的demo
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> head> body style="background: black;"> canvas id="myCanvas" style="display: block;border: 10px solid #aaa;margin: 0 auto
canvas实现点击,拖拽和缩放的效果
目标:实现红点的点击,拖拽,和缩放效果。 思路:1.缩放通过scale,通过计算鼠标滚轮的滚动实现放大和缩小。 2.拖拽和点击通过定时器区分点击和长按,长按拖拽,点击alert一句话。 直接上代码:   &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;...
html页面,js利用canvas绘制拖动和缩放球体
html页面,js利用canvas绘制拖动和缩放球体。 鼠标选中或者未选中球体都可以拖动和缩放画布
HTML5 canvas标签的全屏、退出全屏,canvas中显示的缩放、移动,小坑盘点
选择任意标签全屏显示,这儿是canvas,触发函数绑在按钮上: 此处没坑 $('#tab_fullScreen').click(function(){ fullScreen(); }); function fullScreen() { var element = document.getElementById('tab_canvas'),method = "RequestFul
HTML 给canvas矩形添加监听事件
&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; &amp;lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;me
html5 canvas 画雷达图. 实现内部元素的click,mousemove,mouseout事件.
基于html5,canvas技术.全代码手把手画雷达图,实现内部元素的点击,浮动等事件,比echarts功能更强大.
实现图片放大缩小,点击热点响应事件
最近实现一个功能,类似百度地图。条件:一张图片。要求图片可以任意放大缩小移动,点击放缩后图片的热点时弹出popwindow,并且给热点区域添加阴影,显示出热点区。 实现思路: 1.先要实现图片的任意放缩 2.获得热点区域的坐标 3.点击热点区域响应事件 4.点击热点区域弹出popwindows,并指定popwindow的显示位置 5.给热点区域添加背景色 解决方法: 1.网上实现图
html5 canvas动画 人物怪物移动 鼠标点击控制
一个canvas制作的人物移动,鼠标控制移动实例
HTML5五角星探照灯文字效果.zip
HTML5五角星探照灯文字效果是一款HTML5基于canvas绘制五角星形状的探照灯文字,通过自动放大缩小显示区域效果。
HTML5 Canvas图形密集动画特效.zip
HTML5 Canvas图形密集动画特效是一款彩色密集的几何图形放大缩小动画特效。
HTML5 Canvas彩色粒子飘动特效.zip
HTML5 Canvas彩色粒子飘动特效是一款色粒子元素放大缩小随机飘动背景动画特效。
HTML5 Canvas点击泡沫横飞特效.zip
HTML5 Canvas点击泡沫横飞特效是一款类似放烟花效果的鼠标点击事件代码。
canvas(11/30)--------事件处理(局部图片放大)
example2.js var canvas = document.getElementById('canvas'); context = canvas.getContext('2d'); rubberbandDiv = document.getElementById('rubberbandDiv'); resetButton = document.getElementById('re
canvas图片滚轮放大缩小
html &amp;lt;canvas id=&quot;canvas&quot; style=&quot;display: block;margin: 0 auto;border: 1px solid #ccc;&quot;&amp;gt; 你的浏览器不支持canvas &amp;lt;/canvas&amp;gt; js let canvas = document.querySelectorAll('#canvas')[0] let cont...
html5 canvas图形事件实例之拖拽
html5 开发,实现拖动就是如此简单 : canvas图形事件实例之拖拽
HTML5 Canvas绘制多个图形时,点击图形实现页面跳转
1、首先要做的,是给Canvas元素绑定事件,比如Canvas内部某个图形要绑定点击事件,就需要通过Canvas元素代理该事件:cvs = document.getElementById('mycanvas'); context = canvas.getContext('2d');cvs.addEventListener('click', function(e){ p = getEventPos
canvas绘图,实现主观题批阅,对错箭头,图形文字等,可撤销可保存
canvas绘图,实现主观题批阅,对错箭头,图形文字等,可撤销可保存
使用HTML5 canvas 标签进行图片裁剪、旋转、缩放示例代码
使用HTML5 canvas 标签进行图片裁剪、旋转、缩放示例代码
HTML 给canvas圆形添加监听事件
&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; &amp;lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;me
WPF中Canvas的鼠标或Touch事件
如果Canvas没有设置好background属性,则收不到这些事件,如TouchDown,TouchUp,TouchMove. 设置了背景后就可以收到事件
Android canvas 放大 缩小 平移
Android canvas 放大 缩小 平移 各种绘图 自定义view 请自行修改
HTML5_节点对象-事件穿透
1、 创建元素 2、 创建文本节点 3、 创建注释 4、 创建文档片段 5、 插入节点 6删除节点 7替换节点 8-Img对象 9-table对象 10-select对象 不同的手机系统显示的下拉菜单是不一样的,比如安卓和苹果 11–option对象 12、form对象 13、input对象
HTML5 canvas 圆环扩散效果
【canvas】圆环扩散效果 使用 HTML5 canvas 制作圆环扩散的效果 以下是效果图 下面是实现代码 仅供参考 转载请注明出处 如有问题请联系 页面元素 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;圆...
点击canvas中指定图形触发事件
问题: 给canvas绘制的某个图片区域绑定点击事件 分析: canvas绘制时可取得图形位置,绘制完成时无法获取每一个图形的位置 解决: 重绘一遍图形,一边绘制一边比较点击事件发生的位置,看点击事件发生在了哪一个图形上面 在canvas标签中添加属性 bindtap='CanvasTap' 下面两个属性可用来自定义长按还是单击,官方给出的bindlongtap 作为长按是500毫秒,个人感觉这...
HTML5图片canvas等比例缩放后上传
图片识别 $(function () { function decodeUnicode(str) { return unescape(unescape(str.replace(/\\u/g, '%u'))); } $("#pic").change(
Canvas---放大和缩小圆环插件
最近小组招新,需要一个小型的动画,就是在第一页会有个放大和缩小的圆环。 主要用到的知识就是 canvas,看一下源码,内部注释比较清晰:/* * selector: canvas元素选择器 * x:绘制的圆形x轴位置 * y:绘制的圆y轴位置 * r:绘制圆的半径 * outColor: 外部圆颜色 * innerColor:内部圆颜色 *
canvas绑定事件的时候 获得鼠标点击的地方在canvas画布内的坐标的方法
var x = event.clientX - canvas.getBoundingClientRect().left; var y = event.clientY - canvas.getBoundingClientRect().top;
html5图片裁剪控件原型【含缩放,旋转,拖动功能】---2、核心代码
推荐这一篇文章是早年为了解决图片裁剪的探索性文章,现在已经开放出了falsh版及html5版本的图片裁剪插件,各位有时间可以看看: 浮士德html5图片裁剪器2016开源版 浮士德头像裁剪flash版2016福利版 上面两个解决方案已经经过多个项目的成功应用,适用于低级浏览器及现代浏览器,ipad,android,iphone4s,iphone5,iphone5s,iphone6等设备等。前言