基于 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 &gt; 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>
    &lt;mce:style type="text/css"&gt;&lt;!--
            .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>
&lt;/head&gt;
&lt;body&gt;
    &lt;img id="rImg" src="./image/gile.gif" mce_src="image/gile.gif"/&gt;
    旋转角度：
    &lt;input id="degree" type="text" value="0"/&gt;
    &lt;select name="picSelect" id="picSelect"&gt;
        &lt;option value="customize"&gt;customize&lt;/option&gt;
        &lt;option value="actual size"&gt;actual size&lt;/option&gt;
        &lt;option value="fit width"&gt;fit width&lt;/option&gt;
        &lt;option value="fit height"&gt;fit height&lt;/option&gt;
        &lt;option value="fit image"&gt;fit image&lt;/option&gt;
    &lt;/select&gt;
    &lt;input id="ok" type="button" value="OK"&gt;
    &lt;div style="position: relative;height:430px; width:900px; background-color:#111111"&gt;
        &lt;div  id="selectArea" class="jqDnR"&gt;
            &lt;div class="jqHandle jqResize"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

&lt;/body&gt;

</html>

欢迎注册黑客派社区，开启你的博客之旅。让学习和分享成为一种习惯！