基于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"></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>

posted @ 2009-04-30 17:53 ajuanabc 阅读(140) 评论(0) 收藏举报

刷新页面返回顶部

基于raphael 的图形变化（支持firefox，chrome，IE， opera）

公告