java canvas 缩放图片_详解如何用HTML5 Canvas API控制图片的缩放变换

摘要:这篇HTML5栏目下的“详解如何用HTML5 Canvas API控制图片的缩放变换”,介绍的技术点是“html5_canvas、canvas、Html5、控制图片、api、图片”,希望对大家开发技术学习和问题解决有帮助。

缩放变换scale(sx,sy)传入两个参数,分别是水平方向和垂直方向上对象的缩放倍数。例如context.scale(2,2)就是对图像放大两倍。其实,看上去简单,实际用起来还是有一些问题的。我们来看一段代码:

JavaScript Code复制内容到剪贴板

html>

缩放变换

body { background: url("./images/bg3.jpg") repeat; }

#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }

你的浏览器居然不支持Canvas?!赶快换一个吧!!

window.onload =function(){

varcanvas = document.getElementById("canvas");

canvas.width = 800;

canvas.height = 600;

varcontext = canvas.getContext("2d");

context.fillStyle ="#FFF";

context.fillRect(0,0,800,600);

context.strokeStyle ="red";

context.lineWidth = 5;

for(vari = 1; i 

context.save();

context.scale(i,i);

context.strokeRect(50,50,150,100);

context.restore();

}

};

运行结果:

da85afc9cdeb4710c5870cbf91f33f74.png

其实缩放很简单,稍微复杂的是,如何让鼠标成为放大或者缩小的中心。如果数学几何不好,计算公式就可能看不明白了。

JavaScript Code复制内容到剪贴板

canvas.onmousewheel=canvas.οnwheel=function(event){//chrome firefox浏览器兼容

varpos=windowToCanvas(canvas,event.clientX,event.clientY);

event.wheelDelta=event.wheelDelta?event.wheelDelta:(event.deltaY*(-40));

if(event.wheelDelta>0){

imgScale*=2;

imgX=imgX*2-pos.x;

imgY=imgY*2-pos.y;

}else{

imgScale/=2;

imgX=imgX*0.5+pos.x*0.5;

imgY=imgY*0.5+pos.y*0.5;

}

drawImage();

}

这个时候,基本功能就实现了,加载一张图片和加载多张图片都差不多,维护每一张图片的位置和大小,下面来整理一下代码吧。

JavaScript Code复制内容到剪贴板

varcanvas,context;

varimg,//图片对象

imgIsLoaded,//图片是否加载完成;

imgX=0,

imgY=0,

imgScale=1;

(functionint(){

canvas=document.getElementById('canvas');

context=canvas.getContext('2d');

loadImg();

})();

functionloadImg(){

img=newImage();

img.οnlοad=function(){

imgIsLoaded=true;

drawImage();

}

img.src="map.jpg";

}

functiondrawImage(){

context.clearRect(0,0,canvas.width,canvas.height);

context.drawImage(img,0,0,img.width,img.height,imgX,imgY,img.width*imgScale,img.height*imgScale);

}

canvas.οnmοusedοwn=function(event){

varpos=windowToCanvas(canvas,event.clientX,event.clientY);

canvas.οnmοusemοve=function(event){

canvas.style.cursor="move";

varpos1=windowToCanvas(canvas,event.clientX,event.clientY);

varx=pos1.x-pos.x;

vary=pos1.y-pos.y;

pos=pos1;

imgX+=x;

imgY+=y;

drawImage();

}

canvas.οnmοuseup=function(){

canvas.οnmοusemοve=null;

canvas.οnmοuseup=null;

canvas.style.cursor="default";

}

}

canvas.onmousewheel=canvas.οnwheel=function(event){

varpos=windowToCanvas(canvas,event.clientX,event.clientY);

event.wheelDelta=event.wheelDelta?event.wheelDelta:(event.deltaY*(-40));

if(event.wheelDelta>0){

imgScale*=2;

imgX=imgX*2-pos.x;

imgY=imgY*2-pos.y;

}else{

imgScale/=2;

imgX=imgX*0.5+pos.x*0.5;

imgY=imgY*0.5+pos.y*0.5;

}

drawImage();

}

functionwindowToCanvas(canvas,x,y){

varbbox = canvas.getBoundingClientRect();

return{

x:x - bbox.left - (bbox.width - canvas.width) / 2,

y:y - bbox.top - (bbox.height - canvas.height) / 2

};

}

缩放变换应注意的问题看了上面的例子,大家一定对产生的结果有点奇怪。一是左上角顶点的坐标变了,而是线条的粗细也变了。因此,对于缩放变换有两点问题需要注意:

缩放时,图像左上角坐标的位置也会对应缩放。

缩放时,图像线条的粗细也会对应缩放。

比如对于最小的那个原始矩形,它左上角的坐标是(50,50),线条宽度是5px,但是放大2倍后,左上角坐标变成了(100,100),线条宽度变成了10px。这就是缩放变换的副作用。

童鞋们一定在期待着我说解决副作用的途径。很遗憾,没有什么好的方法去解决这些副作用。如果想固定左上角坐标缩放,可以把左上角坐标变成(0,0),这样的话无论是什么倍数,0乘上它还是0,所以不变。如果不想让线条粗细变化,那就别使用线条。或者自己封装一个函数,不要使用scale()。

究其根本,之前我们说过平移变换、旋转变换、缩放变换都属于坐标变换,或者说是画布变换。因此,缩放并非缩放的是图像,而是整个坐标系、整个画布!就像是对坐标系的单位距离缩放了一样,所以坐标和线条都会进行缩放。仔细想想,这一切貌似挺神奇的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/406038.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言中执行python代码或源程序文件(高级嵌入方式)

环境:Fedora12 Python2.6 C 1. 建立python源代码文件(del.py): #!/usr/bin/env pythondef calculate(expression):try:result eval(expression)except:print("Eval Error!")return Nonereturn resultif __name__ "__main__":f …

向周鸿祎的360安全浏览器学互联网产品运营和推广

做互联网产品运营就要像周鸿祎一样,老周一直是运营流的大力倡导者,而360安全浏览器则是老周给我们上的产品运营又一课,醍醐灌顶,如梦初醒。 下图是截止到今年6月中国网民的浏览器使用情况图: 根据CNZZ的数据&#xff0…

java中的locksupport_java中线程的停止以及LockSupport工具类

看jstack输出的时候,可以发现很多状态都是TIMED_WAITING(parking),如下所示:"http-bio-8080-exec-16" #70 daemon prio5 os_prio0 tid0x00007f6088027800 nid0x3a1f waiting on condition [0x00007f60fcd03000]java.lang.Thread.St…

React小结

1. setState setState更新状态的2种写法 (1). setState(stateChange, [callback])------对象式的setState 1.stateChange为状态改变对象(该对象可以体现出状态的更改) 2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用 (2). setState(updat…

4-17学习

//设置自动行数与字符换行 [label setNumberOfLines:0]; label.lineBreakMode UILineBreakModeWordWrap; /** 去除多余分割线 */ self.tableView.tableFooterView [[UIView alloc]init];转载于:https://www.cnblogs.com/pocket-mood/p/4435711.html

PyRun_SimpleFile()崩溃问题

From: http://blog.csdn.net/jq0123/article/details/1504406 PyRun_SimpleFile()造成程序崩溃.例程如下:#include "python.h"int main(){ Py_Initialize(); FILE * fp fopen("test.py", "r"); if …

翻译:Asp.net中多彩下拉框的实现

开发背景: 有人曾经要我开发一个根据不同选择而显示不同颜色的管理工具。我开始考虑利用下拉框来实现条目背景及显示颜色根据条目名称不同而进行变化,根据这个思路我在网上搜了半天也没有找到任何相关的解决方案,最后我想到了一个比当初需…

深入react技术栈(8):事件系统

我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号搜索前端小歌谣获取前端知识 1合成事件的绑定方式 2合成事件的实现机制 3在React中使用原生事件 4合成事件和原生事件混用 5对比react与原生事件 文章参考深入React技术栈

java mac jconsole_解决java maven项目找不到jconsole-1.8.0.jar和tools-1.8.0.jar包问题

今天遇到了这样一种情况,自己的maven项目中并没有引用的jar包出现在了Maven Dependencies的依赖包中。而我在pom.xml自己没有没有引入啊.图示怀疑是自己的alibaba 的druid所依赖的包:com.alibabadruid1.0.14然后查看了它的相关依赖,果然找到了…

PyRun_SimpleString的无穷怨念

From: http://blog.csdn.net/ccat/article/details/544491 好吧,我承认我是个菜鸟,所以今天我勇敢的站出来接受大家的鄙视…… 话说早上同事喊我帮他改段程序,很简单,就是用PyRun_SimpleString函数执行一段Python脚本。错误也很直…

劳心者、劳力者或CEO、CTO各得其所,足矣

昨天在手机上看到了“清华学生借鉴百度技术自主研发手机框计算”的新闻,又是“计算”,很容易就与“云计算”联系起来了,挺有兴趣了解一下中国百度的“框计算”。毕竟我之前只是知道这么一个名词,没想到这么快就有了研发、应用&…

hdu 1754 I Hate It(线段树)

题目链接:http://acm.hdu.edu.cn/showproblem.php?pid1754 I Hate It Time Limit: 9000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submission(s): 45334 Accepted Submission(s): 17789 Problem Description很多学校流行一种比…

java numa_Java只使用2个CPU中的1个和NUMA(Neo4J)

我正在研究一个java程序来创建一个非常大的Neo4J数据库.我使用batchinserter和Executors.newFixedThreadPool来加快速度.我的Win2012R2服务器有2个cpu(26核心26超线程)和256GB NUMA架构.我的问题是,我的导入器只使用1个CPU(节点).是否有可能只使用一个javaprocess的NUMA节点&am…

cisco 交换机vlan-trunk的配置详解及应用实例:

虚拟局域网(vlan):主要是为了分割广播域注:不同vlan之间不能相互通信。trunk:主要是为了不同交换机的相同vlan相互通信配置静态VLAN的步骤:************************************1.创建VLAN1)VLAN数据库配置模式:Switc…

java 登录拦截器_springMVC 拦截器-用户登录拦截实战

各位小伙伴咱们继续学习新知识今天要分享的就是拦截器不知道小伙伴们平时上网的时候有没有注意到,尤其是上网购物的时候,不登录账号,就无法访问一些功能页面,比如你不登录账号,就没法查看购物车里面有什么物品.这就是拦截器起到的作用.那么今天我们就来给之前的项目添加一个拦截…

vim匹配特定的行并删除它

From:http://robinfei.blog.sohu.com/111990727.html 删除包含特定字符的行: g/pattern/d 删除不包含指定字符的行: v/pattern/d g!/pattern/d 现实TAB键以及空格等: set list! 删除指定的行: :x,.d #从x行…

React开发(171):处理删除与批量删除操作

//处理删除操作handleDelete (id, isBatch) > {if (isBatch && id.length 0) return message.warn(请勾选好友助力);}; 两个参数控制全选和非全选 nice 秒呀