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个回答

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

qq_37524684
子幽 突然想起我之前用的是<area>标签,<canvas>还要简单一点
接近 2 年之前 回复
qq_24534807
qq_24534807 回复子幽: 哦,我试试看,谢谢
接近 2 年之前 回复
qq_37524684
子幽 回复qq_24534807: 你可以获取到鼠标移动到最后停下的点的坐标,这个坐标是相对于body的,再将你的图形原来的中心点的坐标获取到,计算出横纵坐标的差值,这姓都是js做的,你只需要将原来的坐标加上或者减去这差值就好
接近 2 年之前 回复
qq_24534807
qq_24534807 嗯嗯,差不多是这样,不过我这个是以鼠标移动到最后停下的点为原点的,请问知道要怎么解决吗?
接近 2 年之前 回复
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
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...
Canvas的使用,放大缩小的自定义布局,不同的位置不同的点击事件
从一接触这个项目就开始找实现的各种方式,首先说一下需求: 1、一个可以缩放的背景,可以向背景中加入新的图片; 2,加入的图片可以触发事件,图片要随着背景放大缩小或移动; 具体的需求就是这些,有些像地图,或者塔防游戏的感觉,但是并没有那么复杂。 首先想到imageView,但是并不能向内添加子控件,点击时间也无从处理,所以转向自定义控件,由于本人是新手,只能到处搜罗代码,解决思路。如果你对加
html5之canvas
<canvas> 是一个新的 HTML 元素,这个元素在 HTML5 中被定义。这个元素通常可以被用来在 HTML 页面中通过 JavaScript 进行绘制图形、合成图像等等操作,也可以用来做一些动画。这个文档中有详细的canvas的应用实例,函数解释。
HTML5 Canvas
HTML5 Canvas 经典学习教程, HTML5 Canvas 经典学习教程-HTML5 Canvas Study,HTML5 Canvas Study,HTML5 Canvas Study
【HTML5】——Canvas
Canvas是HTML5中所有新特性中目前应用最广泛的一个,可以替代引入的图片(图形) 用途:完成HTML页面中的图形绘制,实现网络游戏或单击游戏(网页游戏),在HTML中绘制图标 目前主流的游戏引擎:白鹭引擎、Cocos注意:Canvas作为HTML页面的元素出现,在Canvas绘制的图形与HTML页面是无关的,即不能使用DOM和事件绑定目录1.Canvas元素 2.绘制矩形 3.填充、描
HTML5 CANVAS
HTML5 CANVAS 绘图, 图形的旋转,变化
html5 canvas
我用canvas画了个矩形rnvar canvas=document.getElementById("myCanvas");rn var context=canvas.getContext("2d");rn context.strokeStyle="orange";rn context.strokeRect(0, 0, 90, 90);rnrn应该宽和高都一样,是个正方形的啊,为什么我在浏览器上显示是个矩形(高比宽大很多)。而且我用clientX和clientY取出的数据和90比差很多。求高手解释!
html5——canvas
html5实现一个倒计时种,使用canvas绘图试下。
HTML5:使用Canvas和Input range控件放大缩小图片
使用了HTML5的两个新标签canvas和input range。 效果图如下,拉动控制杆可以放大缩小图片: 代码: 图片缩放 你的浏览器不支持canvas。 var canvas = document.getElementById("canvas"); var context = canvas.getContext(
delphi canvas 绘图点击事件
在canvas上画了一个方形,要实现鼠标点击该图边框时产生事件,怎么实现?
canvas怎么设置点击事件
我在canvas里面画了一幅图 我想点击canvas时 能切换另一副图 问一下canvas有没有点击事件
关干canvas的点击事件
[size=24px]我在canvas中画了许多图片(image)rn想要在这上面加点击事件rn问下有什么方法不rn除了判断点击的坐标还有什么方法不,rn如果只有判断坐标的话,那是怎么写的呢?rnplease tell me?thank you![/size]
canvas如何设置点击事件?
比如我在画布上写了些文字,点击每行文字产生不同的事件rncanvas.drawText("测试的文字",10,10,myPaint);rn针对这行文字改如何做点击事件呢?
canvas 图像放大缩小后模糊
canvas 进行图像的放大缩小后变得模糊 无法和原先的清晰度显示
Canvas——滑杆操控图片放大缩小
您的浏览器尚不支持canvas var canvas = document.getElementById("canvas") var context = canvas.getContext("2d") var slider = document.getElementById("scale-range")
[HTML5] HTML5 Canvas 基础教程 (英文版)
☆ 资源说明:☆ [friendsofED] HTML5 Canvas 基础教程 (英文版) [friendsofED] Foundation HTML5 Canvas For Games and Entertainment (E-Book) ☆ 出版信息:☆ [作者信息] Rob Hawkes [出版机构] friendsofED [出版日期] 2011年04月11日 [图书页数] 316页 [图书语言] 英语 [图书格式] PDF 格式
html5手机页面 点击事件
Zepto.js和jquery区别在于: Zepto.js是小巧的适用于手机页面的js框架 jquery比Zepto.js相对大一点, 两者语法大致相同 zepto.js手机页面点击事件代码如下: 1 $("#android_link").on('click', 2
Html5 Canvas PPT
简单的Html5Canvas入门PPt教程
HTML5 Canvas 游戏框架(QuarkJS)
基于HTML5 Canvas 开发的Javascript游戏框架(QuarkJS) 附API说明及DEMO示例。
HTML5 canvas 时钟
javascript HTML5 canvas 时钟
HTML5 Canvas基础教程 完整版
完整中文版,pdf和源码,作者: Rob Hawkes
HTML5 Canvas 赛车游戏
HTML5 Canvas 赛车游戏动画DEMO演示 网上找的资源,修改成手机端的了
HTML5 Canvas 旋转的“金字塔”
ctx.clearRect(0,0,canvas.width,canvas.height) rotateY(Pyramid .vectors); Pyramid ._draw(); requestAnimationFrame(animate);
HTML5——canvas制作游戏2048
笔者刚学HTML5不久,这是笔者第一次用HTML5制作游戏,希望大家多多提点意见。         废话不多说,先来一张效果图:         笔者只做了游戏主体,至于那些得分啊,历史最高分之类的,都没有去实现。那些都是比较简单的内容,这里就不多说了。下面讲述的过程中,将主要是讲讲笔者本人制作过程中的一些思路。         首先,是页面部分,这部分也没啥好讲的,直接上代码:
HTML5之canvas标签(上)
现在HTML5备受关注,其中它新增的一些标签感觉战斗力爆棚哈。本章就主要介绍下HTML5的canvas标签,希望能给初学者有所帮助。大家共同学习。canvas元素就是画布,就是通过该元素结合javascrtpt可以在网页上绘制各种图形,甚至制作各种酷炫动画,以及一些小游戏。下面我就从canvas最基础的地方,来讲解有关canvas的各种属性,好了,下面开启打怪升级的道路。 首先我们先定义一个画布<c
HTML5 canvas画布(一)
HTML5中canvas元素用于在网页上绘制图形。Canvas的特点 Canvas画布是一个矩形区域,可以控制其每一个像素 Canvas使用JavaScript来控制画图 Canvas具有直线、矩形、圆以及添加图像的方法 Canvas标签的使用下面的代码是使用canvas画面绘制一个200*200红色矩形:<!Doctype html> <html> <head> <title>我的canvas页面
【HTML5】Canvas图像
把一幅图像放置到画布上, 使用以下方法: drawImage(Img,x,y); 注:这里的Img必须是一个图像对象。显示一个canvas图像: picture.html --> 画布: 您的浏览器不支持 HTML5 canvas 标签。 var c=document.getEleme
html5 canvas for dummies
Create eye-popping visuals on the fly with HTML5 Canvas Now part of the HTML5 standard tool, Canvas gives programmers the ability to add images, animation, and sound to mobile and regular websites on the fly, in JavaScript, without needing any third-party tool or player. This practical For Dummies book clearly shows you how to get the most out of Canvas. It presents information in a friendly, non-intimidating way and helps you get started with the Canvas tag, create 2D drawings and images, add video and audio, build a basic game framework, weave spellbinding animation, and more. If you want to learn how to use HTML5 Canvas, this easy-to-follow guide is just the ticket. Shows web programmers, developers, and designers at beginner and intermediate HTML5 and JavaScript levels how to use the powerful HTML5 Canvas tag Helps you design and add images, animation, sound, and more to mobile and regular websites, without using any third-party tools or players Covers 2D drawings, text, and bitmap images; video and audio; how to build a basic game framework on Canvas; adding animation; and more Includes a JavaScript crash course Get started using HTML5 Canvas right away with HTML5 Canvas For Dummies .
HTML5 canvas开发详解
HTML5 canvas开发详解 第2版 高清 电子书 pdf 下载 [(美)STEVE FULTON,JEFF FULTON著;任旻,罗泽鑫译][人民邮电出版社]
HTML5 Canvas实战
非常好的一本书, 实战型, 并且有实践代码样例, 很适合初学者学习
html5 canvas绘制动态图
使用html5 Canvas绘制动态图,这里绘制的是有动态效果的五星红旗
浅谈HTML5 canvas(一)
: HTML5添加的最受欢迎的功能就是元素,这个元素负责在页面中设定一个区域,然后就可以通过JavaScript动态在这个区域绘制图形。 主流浏览器都支持canvas,如IE9+、FireFox1.5+、Safari2+、Opera9+、Chrome、iOS版Safari及安卓版Webkit。 Canvas除了具备基本绘图能力的2D上下文,还有一个名为WebGL的3D上下文。目前支持canv
HTML5 CANVAS基础教程
HTML5 CANVAS基础教程,适合广大开发者朋友阅读。
HTML5 Canvas基础教程源代码
HTML5 Canvas基础教程源代码
HTML5 Canvas游戏开发实战
RT HTML5 Canvas游戏开发实战 PDF扫描版
html5 canvas原点问题
[code=HTML]rnrnrn rn rnrnrn rnrnrn[/code]rnrnrn我在我做好的半成品网页里用到的canvas,我想当鼠标点击canvas画布时,显示出来相对画布左上角原点的坐标,但是它显示的是整个网页左上角的坐标,我是改移动原点还是做什么设置?rn应该做怎么样的修改呢?rn
HTML5中Canvas的小问题?????
[code=HTML]rnrnrnrnrn canvas中drawImagern rnrnrnrn rnFallback content, in case the browser does not support Canvas.rnrnrnrnrn[/code]rn在FireFox中:出现错误rncanvas.getContext is not a functionrn[在此错误处中断] var context = canvas.getContext('2d'); rnrn在Opera浏览器中:显示了rnFallback content, in case the browser does not support Canvas.
移动端 HTML5 CANVAS 兼容性问题
目前在做微信公众平台 ,使用到canvas绘制图片,在某些设备上出现偶尔无法绘制的问题。rn目前测试出现在 oppo R8007 小米s1上,代码是最最简单的代码,比如绘制一行字,画矩形等,均出现间歇性的无法绘制的问题。rnrn不知道是代码哪里没有做对,还是怎样?请教各位大神,有没有什么解决方案。rnrn[code=html]rnrnrnrn 我要分享rn rn rnrn rn rn rnrnrn[/code]rnrn坐等大神...!
关于html5 canvas
var pic = new Image(); rnpic.src = "feather_default.jpg"; rncontext2D.translate(0,0);rncontext2D.drawImage(pic,0,0);rn在不设定画布大小的时候 为什么永远都是 300*150 的?rn在设定画布大小为任意大小 var data = canvas.toDataURL(); 获取图片永远也是300*150 的怎么回事?rn求高手指教
相关热词 c# 标准差 计算 c#siki第五季 c#入门推荐书 c# 解码海康数据流 c# xml的遍历循环 c# 取 查看源码没有的 c#解决高并发 委托 c#日期转化为字符串 c# 显示问号 c# 字典对象池