这里所谓终极，是指公司有新的任务了，而且很紧迫，这个就没时间弄了。经测试可以在任何浏览器中实现。HOHO！！！
功能参见http://blog.csdn.net/Vanessa219/archive/2009/04/27/4130250.aspx
index.html
<iframe width=”50%” height=”50%” src=”image.html” mce_src=”image.html”></iframe>
image.xhtml
<!DOCTYPE html>
<html>
<head>
<!–link type=”text/css” href=”http://jqueryui.com/latest/themes/base/ui.all.css“ rel=”stylesheet” /–>
<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”><!–
$(document).ready(function(){
$(“#image_canvas”).resizable().draggable();
$(“#ok”).click(function(){
$(“#image_canvas”).paint(“./image/GG.bmp”,$(“#image_canvas”).width(), $(“#image_canvas”).height(),$(“#angle”).val(),$(“#img_property”).val());
});
});
// –></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，都不知道具体要求和技术，还是老大亲自带，惨啊。。。。