从开通博客园到今天,有两个多月了。我发现之前没有开通博客记录自己所做的东西,真是后悔啊。
现在一点一点把自己所做的功能以博客的形式记录下来,一方面可以给大家分享,大家一起学习,同时自己也从新回顾一下。
这个图片放大,缩小和旋转,我采用canvas画布这个来做的,核心点就在js中去控制鼠标状态及事件。
我先给大家展示一下效果图。
鼠标移到画布范围内就会出现下方的操作栏,每次以90度选择。
1.在引入js的时候一定要注意了,由于在使用画布canvas时,需要等图片加载完成后才可以执行画布里的内容。js要在最后引入。
2.js中要在图片加载完成之后在方法
主要的地方就是这个啦,其它就是js方法了,我就不一一解释了,有js功底的能看懂,如果有地方不懂,或者需要改进的就在下面评论出来,大家一起学习。
下面我就贴出代码了,需要演示项目源码的小伙伴也评论出来,我把演示项目发出来。
这是目录结构,也不需要什么jar包。image下面就是图片啦。
html页面代码
Insert title here
css样式代码
@CHARSET "UTF-8";
* {
margin: 0px;
padding: 0px;
}
#pandiv {
width: 700px;
height: 500px;
}
#control {
background: #ccc;
opacity: 0.7;
width: 200px;
height: 30px;
display: none;
padding-top: 5px;
position: absolute;
left: 250px;
top: 450px;
}
#canvas