基于raphael 的图形变化（支持firefox，chrome，IE， opera）
PS：在IE中图片的height和width值正确，但是不能正常显示，相关问题待续。
详细功能参见
http://blog.csdn.net/Vanessa219/archive/2009/04/27/4130250.aspx
image.js
$().ready(function() {
var canvans_width = 300,
canvans_height = 200,
image_width = $("#rImg").width(),
image_height = $("#rImg").height(),
ration_r = image_width/image_height,
loadimg = new Image(),
paper = Raphael("selectArea", canvans_width, canvans_height),
image = paper.image("", 0, 0, 0, 0),
source = "./image/gile.gif",
pic_select, degree;
loadimg.onload = function(image){
return function() {
// copy relevant parameters to the Raphael element
image.attr( {
src: this.src,
width: this.width,
height: this.height
} );
}
}(image);
loadimg.src = source;
$('#selectArea').jqDrag().jqResize('.jqResize');
$("#selectArea").css({
background:"#888888",
width:canvans_width,
height:canvans_height
});
$("#ok").click(function(){
paper.setSize($("#selectArea").width(), $("#selectArea").height());
pic_select = $("#picSelect").val();
degree = $("#degree").val();
if(pic_select=="customize"){
loadimg.onload = function(image){
image.attr( {
src: source,
width:$("#selectArea").width(),
height:$("#selectArea").height()
} );
}(image);
}
if(pic_select=="actual size"){
loadimg.onload = function(image){
image.attr( {
src: source,
width:$("#rImg").width(),
height:$("#rImg").height()
} );
}(image);
}
if(pic_select=="fit image"){
var ration = $("#selectArea").width()/$("#selectArea").height();
if(ration_r > ration){
loadimg.onload = function(image){
image.attr( {
src: source,
width:$("#selectArea").width(),
height:$("#selectArea").width()/ration_r
}
);
}(image);
}
else{
loadimg.onload = function(image){
image.attr( {
src: source,
width:$("#selectArea").height()*ration_r,
height:$("#selectArea").height()
} );
}(image);
}
}
if(pic_select=="fit width"){
ration_r = $("#rImg").width()/$("#rImg").height();
loadimg.onload = function(image){
image.attr( {
src: source,
width:$("#selectArea").width(),
height:$("#selectArea").width()/ration_r
});
}(image);
}
if(pic_select=="fit height"){
ration_r = $("#rImg").width()/$("#rImg").height();
loadimg.onload = function(image){
image.attr( {
src: source,
width:$("#selectArea").height()*ration_r,
height:$("#selectArea").height()
} );
}(image);
}
image.rotate(degree);
});
});
index.html 其中raphael.js版本为0.7.4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TestImage</title>
<mce:script type="text/javascript" src="resources/jquery.js" mce_src="resources/jquery.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" src="resources/jqDnR.js" mce_src="resources/jqDnR.js"></mce:script>
<mce:style type="text/css"><!--
.jqHandle {
background: red;
height:15px;
}
.jqDrag {
width: 100%;
cursor: move;
}
.jqResize {
width: 15px;
position: absolute;
bottom: 0;
right: 0;
cursor: se-resize;
}
.jqDnR {
z-index: 3;
position: relative;
width: 180px;
font-size: 0.77em;
color: #618d5e;
background-color: #EEE;
}
--></mce:style><style type="text/css" mce_bogus="1"> .jqHandle {
background: red;
height:15px;
}
.jqDrag {
width: 100%;
cursor: move;
}
.jqResize {
width: 15px;
position: absolute;
bottom: 0;
right: 0;
cursor: se-resize;
}
.jqDnR {
z-index: 3;
position: relative;
width: 180px;
font-size: 0.77em;
color: #618d5e;
background-color: #EEE;
}
</style>
</head>
<body>
<img id="rImg" src="./image/gile.gif" mce_src="image/gile.gif"/>
旋转角度：
<input id="degree" type="text" value="0"/>
<select name="picSelect" id="picSelect">
<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 style="position: relative;height:430px; width:900px; background-color:#111111">
<div id="selectArea" class="jqDnR">
<div class="jqHandle jqResize"></div>
</div>
</div>
</body>
</html>
原文链接： http://blog.csdn.net/vanessa219/article/details/4140449