素材网 素材网

HTML5实现图片拖动,旋转,放大,拉伸等特效

下载资源()次

阅读次数()次

发布时间:2013-10-31

HTML5实现图片拖动,旋转,放大,拉伸等特效
分享到:

用法简介:

来源:xw素材网

HTML5实现图片拖动,旋转,放大,拉伸等特效

效果类似手机图片功能

代码调用:

<script src="canvas_files/utilitie.js" type="text/javascript" charset="utf-8"></script>
<script src="canvas_files/canvasEl.js" type="text/javascript" charset="utf-8"></script>
<script src="canvas_files/canvasIm.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    	var CanvasDemo = function() {
    		var YD = YAHOO.util.Dom;
    		var YE = YAHOO.util.Event;
    		var canvas1;
    		var img = [];
    		return {
    			init: function() {
    			canvas1 = new Canvas.Element();
    			canvas1.init('canvid1',  { width: YD.getViewportWidth() - 5, height: YD.getViewportHeight() - 5 });			
    			img[img.length] = new Canvas.Img('img1', {});
    			img[img.length] = new Canvas.Img('img2', {});
    			img[img.length] = new Canvas.Img('img3', {});
    			img[img.length] = new Canvas.Img('bg', {});
    			img[img.length] = new Canvas.Img('img4', {});
    			img[img.length] = new Canvas.Img('img4', {});
    			// @param array of images ToDo: individual images
    					
    			canvas1.addImage(img[0]);
    			canvas1.addImage(img[1]);
    			canvas1.addImage(img[2]);
    			canvas1.setCanvasBackground(img[3]);
    			canvas1.addImage(img[4]);
    			this.initEvents();
    			},
    			initEvents: function() {
    					YE.on('togglebg','click', this.toggleBg, this, true);
    					YE.on('showcorners','click', this.showCorners, this, true);
    					YE.on('togglenone','click', this.toggleNone, this, true);
    					YE.on('toggleborders','click', this.toggleBorders, this, true);
    					YE.on('togglepolaroid','click', this.togglePolaroid, this, true);
    					YE.on('pngbutton','click', function() { this.convertTo('png') }, this, true);
    					YE.on('jpegbutton','click', function() { this.convertTo('jpeg') }, this, true);
    			},
    				switchBg: function() {
    					canvas1.fillBackground = (canvas1.fillBackground) ? false : true;							
    					canvas1.renderAll();
    				},
    				
    				//! insert these functions to the library. No access to _aImages should be done from here
    				showCorners: function() {
    					this.cornersvisible = (this.cornersvisible) ? false : true;
    					for (var i = 0, l = canvas1._aImages.length; i < l; i += 1) {
    						canvas1._aImages[i].setCornersVisibility(this.cornersvisible);
    					}
    					canvas1.renderAll();
    				},
    				toggleNone: function() {
    					for (var i = 0, l = canvas1._aImages.length; i < l; i += 1) {
    						canvas1._aImages[i].setBorderVisibility(false);
    					}
    					canvas1.renderAll();
    				},
    				toggleBorders: function() {
    					for (var i = 0, l = canvas1._aImages.length; i < l; i += 1) {
    						canvas1._aImages[i].setBorderVisibility(true);
    					}
    					canvas1.renderAll();
    				},
    				togglePolaroid: function() {
    					for (var i = 0, l = canvas1._aImages.length; i < l; i += 1) {
    						canvas1._aImages[i].setPolaroidVisibility(true);
    					}
    					canvas1.renderAll();
    				},
    				convertTo: function(format) {
    					var imgData = canvas1.canvasTo(format);
    					window.open(imgData, "_blank");
    				},
    				whatever: function(e, o) {
    					// console.log(e);
    					// console.log(o);
    				}
    			}
    		}();
    		
    		YAHOO.util.Event.on(window, 'load', CanvasDemo.init, CanvasDemo, true);
    	</script>


   

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。