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

现在的位置: 首页 > 综合 > 正文

RSS

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

2013年02月25日 ⁄ 综合 ⁄ 共 4184字 ⁄ 字号小中大 ⁄ 评论关闭

这里所谓终极，是指公司有新的任务了，而且很紧迫，这个就没时间弄了。经测试可以在任何浏览器中实现。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.all Created on : 2009-5-5, 11:01:04 Author : liyuan.li Description: Purpose of the stylesheet follows. */ /* TODO customize this sample style Syntax 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，都不知道具体要求和技术，还是老大亲自带，惨啊。。。。

【上篇】你也能成为“巨人”
【下篇】软件工程师到30岁就要转行？

作者: rouble

该日志由 rouble 于11年前发表在综合分类下，最后更新于 2013年02月25日.
转载请注明: 终极版image缩放，旋转，拖拽 | 学步园 +复制链接

抱歉!评论已关闭.

学步园

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

作者: rouble

书签

最新文章New

本站推荐

返回首页