终极版image缩放，旋转，拖拽

来源：互联网发布：淘宝押金怎么交编辑：程序博客网时间：2024/05/01 09:57

这里所谓终极，是指公司有新的任务了，而且很紧迫，这个就没时间弄了。经测试可以在任何浏览器中实现。HOHO！！！

功能参见http://blog.csdn.net/Vanessa219/archive/2009/04/27/4130250.aspx

index.html

image.xhtml

<!DOCTYPE html><html> <head>  <link type="text/css" href="style/resize.css" mce_href="style/resize.css" rel="stylesheet" /> <mce:script type="text/javascript" src="resources/jquery.min.js" mce_src="resources/jquery.min.js"></mce:script> <mce:script type="text/javascript" src="resources/ui.core.js" mce_src="resources/ui.core.js"></mce:script> <mce:script type="text/javascript" src="resources/ui.resizable.js" mce_src="resources/ui.resizable.js"></mce:script> <mce:script type="text/javascript" src="resources/ui.draggable.js" mce_src="resources/ui.draggable.js"></mce:script> <mce:script type="text/javascript" src="resources/raphael.js" mce_src="resources/raphael.js"></mce:script> <mce:script type="text/javascript" src="resources/image.js" mce_src="resources/image.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> angle of rotation: <input id="angle" type="text" value="0"/> <select name="img_property" id="img_property"> <option value="customize">customize</option> <option value="actual size">actual size</option> <option value="fit width">fit width</option> <option value="fit height">fit height</option> <option value="fit image">fit image</option> </select> <input id="ok" type="button" value="OK"> <div id="image_canvas" style="height:100px;width:200px;background-color:#888888"></div> </body></html>

image.js

jQuery.fn.paint = function(source, canvas_width, canvas_height, angle, img_property){ $("svg").remove(); $("#image_canvas").find("div").each(function(i) { if(i==0){ $(this).html(""); } }); var r_image = new Image(); r_image.src = source; var image_width = r_image.width, image_height = r_image.height, r_ration = image_width/image_height, ration = canvas_width/canvas_height; if(img_property == "customize"){ var paper = Raphael("image_canvas", canvas_width, canvas_height), image = paper.image(source, 0, 0, canvas_width, canvas_height); }else if(img_property == "actual size"){ var paper = Raphael("image_canvas", canvas_width, canvas_height), image = paper.image(source, 0, 0, image_width, image_height); }else if(img_property=="fit image"){ var paper = Raphael("image_canvas", canvas_width, canvas_height); if(r_ration > ration){ var image = paper.image(source, 0, 0, canvas_width, canvas_width/r_ration); }else{ var image = paper.image(source, 0, 0, canvas_height * r_ration, canvas_height); } }else if(img_property == "fit height"){ var paper = Raphael("image_canvas", canvas_width, canvas_height), image = paper.image(source, 0, 0, canvas_height * r_ration, canvas_height); }else{ var paper = Raphael("image_canvas", canvas_width, canvas_height), image = paper.image(source, 0, 0, canvas_width, canvas_width/r_ration); }; image.rotate(angle);};

resize.css

/* Document : ui.allCreated on : 2009-5-5, 11:01:04Author : liyuan.liDescription:Purpose of the stylesheet follows.*//* TODO customize this sample styleSyntax recommendation http://www.w3.org/TR/REC-CSS2/*/.ui-resizable { position: relative;}.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0px; }.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0px; }.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0px; height: 100%; }.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0px; height: 100%; }.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}

其余的js代码可以jquery和raphael上找到，这里不再贴出。

下个星期一就要开始做wizard，都不知道具体要求和技术，还是老大亲自带，惨啊。。。。