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

这里所谓终极，是指公司有新的任务了，而且很紧迫，这个就没时间弄了。经测试可以在任何浏览器中实现。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，都不知道具体要求和技术，还是老大亲自带，惨啊。。。。

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