HTML5实现图片拖动，旋转，放大，拉伸等特效
下载资源()次
阅读次数()次
发布时间：
用法简介：
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.D
var&YE&=&YAHOO.util.E
var&canvas1;
var&img&=&[];
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&:&
canvas1.renderAll();
//!&insert&these&functions&to&the&library.&No&access&to&_aImages&should&be&done&from&here
showCorners:&function()&{
this.cornersvisible&=&(this.cornersvisible)&?&false&:&
for&(var&i&=&0,&l&=&canvas1._aImages.&i&&&l;&i&+=&1)&{
canvas1._aImages[i].setCornersVisibility(this.cornersvisible);
canvas1.renderAll();
toggleNone:&function()&{
for&(var&i&=&0,&l&=&canvas1._aImages.&i&&&l;&i&+=&1)&{
canvas1._aImages[i].setBorderVisibility(false);
canvas1.renderAll();
toggleBorders:&function()&{
for&(var&i&=&0,&l&=&canvas1._aImages.&i&&&l;&i&+=&1)&{
canvas1._aImages[i].setBorderVisibility(true);
canvas1.renderAll();
togglePolaroid:&function()&{
for&(var&i&=&0,&l&=&canvas1._aImages.&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&
相关标签：
网友评论：
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
什么是邮箱订阅？
邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式，用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮，当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。指尖下的js —— 多触式web前端开发之三：处理复杂手势 - pifoo - 博客园
& & 这篇文章着重介绍多触式设备上特有的gesture event（android和iOS对这个事件的封装大同小异）。这个事件是对touch event的更高层的封装，和touch一样，它同样包括gesturestart，gesturechange，gestureend三个事件回调：&
gesturestart
// 当有两根或多根手指放到屏幕上的时候触发
gesturechange
// 当有两根或多根手指在屏幕上，并且有手指移动的时候触发
gestureend
// 当倒数第二根手指提起的时候触发，结束gesture
& & 事件处理函数中会得到一个GestureEvent类型的参数，它包含了手指的scale（两根移动过程中分开的比例）信息和rotation（两根手指间连线转动的角度）信息。&& & 当两根或以上的手指在屏幕上活动的时候，我们可以做出一些较为复杂的手势。这将涉及到普通的mouse事件，touch事件和gesture事件，情况比较复杂。touch已经在第一篇文章里详细介绍，这里就简单带过。&& & 我们还是先看看当分别将两根手指放到屏幕上的时候，会触发哪些事件吧：&1、第一根手指放下，触发touchstart，除此之外什么都不会发生（请参照第二篇文章，手指提起才会触发mouse的各事件）&2、第二根手指放下，触发gesturestart&3、触发第二根手指的touchstart&4、立即触发gesturechange&5、手指移动，持续触发gesturechange，就像鼠标在屏幕上移动的时候不停触发mousemove一样&6、第二根手指提起，触发gestureend，以后将不会再触发gesturechange&7、触发第二根手指的touchend&8、触发touchstart！注意，和第一篇文章里介绍的一样，多根手指在屏幕上，提起一根，会刷新一次全局touch！重新触发第一根手指的touchstart，这点和苹果官方网站上介绍的不同。&9、提起第一根手指，触发touchend&& & Gesture事件的处理和Touch类似，我们一般会在gesturechange的时候利用GestureEvent对象中的信息来做一些事情：&
var angle = event.
var scale = event.
& & 这样能够取得scale和rotation信息，然后我们可以：&
e.target.style.webkitTransform = 'scale(' + e.scale + startScale + ') rotate(' + e.rotation +
startRotation + 'deg)';
& & 这段代码能让element随着你的两根手指的运动而转动、伸展。以下是一段测试代码，请用ipad/iphone/android打开：&/wp-content/uploads/ios-gesture.html&& & 还有一件要说明的事情是，对于复杂手势，是否会触发某些鼠标事件？确实有，不过我只找到了一个。不管你的两根手指在屏幕上伸缩还是转动，都不会有任何鼠标事件触发，但当你的两根手指同时朝上或者朝下移动的时候，则会触发某些事件。请看下图：
两根手指同时向上或向下滚动，如果target element是一个scrollable element（也就是绑定了mousewheel的element）的话，将会触发mousewheel事件。如果不是scrollable element，则当手指停止移动的时候，会触发onscoll。这里请和第二篇文章的body scroll区别一下，如果你要滚动body，只需要一根手指轻轻拂动屏幕，但是你要滚动一个内部div或者iframe，则需要动用两根手指。&& & 这也是多触式设备一个不太方便的地方。而对于我们开发者来说，这种不方便被放大了。。。因为从用户体验角度来说，要求用户使用两根手指滚动一个内部element显然是不合适的，而要实现像滚动body一样用一根手指优雅地滚动，我们必须利用touchevent，在它的回调函数中用代码来实现scroll。这里介绍一个段很不错的多触式滚动组件：&&& & 用起来很简单，new一个iScroll对象，传入需要滚动的inner element作为参数就行了。&}