用1天时间基于jquery与raphael实现了一个在线批阅的功能,目前功能比较简单而且还有很多bug算是给有类似需求的兄弟们提供一个方向吧。该DEMO中具体实现了在线画笔的功能。 以下是实际截图
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="raphael-min.js"></script> <script type="text/javascript" src="colorpicker.js"></script> </HEAD> <BODY> <table> <tr><td >DEMO:</td><td id="imgbox"><img src="demo.jpg" id="img" /></td></tr> </table> </BODY> <script type="text/javascript"> $(function(){ var startPoint = {x:0,y:0}; var canDraw = false; var pathStr = []; $('#img').load(function() { $('#img').hide(); var o = $('#img').offset(); var w = $('#img').width(); var h = $('#img').height(); var paper = Raphael("imgbox",w,h); var p_w_picpath = paper.p_w_picpath($('#img').attr('src'),o.left, o.top,w,h); var save = paper.path("M42.379,14.729 45.208,11.899 52.958,19.648 65.877,6.733 68.707,9.561 52.958,25.308z").attr({fill: "#fff", stroke: "none"}).glow({color:"#FF0"}); save.click(function(){ console.log(pathStr); alert('save') }); /*color picker*/ var picker = paper.path("M22.221,10.853c-0.111-0.414-0.261-0.412,0.221-1.539l1.66-3.519c0.021-0.051,0.2-0.412,0.192-0.946c0.015-0.529-0.313-1.289-1.119-1.642c-1.172-0.555-1.17-0.557-2.344-1.107c-0.784-0.396-1.581-0.171-1.979,0.179c-0.42,0.333-0.584,0.7-0.609,0.75L16.58,6.545c-0.564,1.084-0.655,0.97-1.048,1.147c-0.469,0.129-1.244,0.558-1.785,1.815c-1.108,2.346-1.108,2.346-1.108,2.346l-0.276,0.586l1.17,0.553l-3.599,7.623c-0.38,0.828-0.166,1.436-0.166,2.032c0.01,0.627-0.077,1.509-0.876,3.21l-0.276,0.586l3.517,1.661l0.276-0.585c0.808-1.699,1.431-2.326,1.922-2.717c0.46-0.381,1.066-0.6,1.465-1.42l3.599-7.618l1.172,0.554l0.279-0.589c0,0,0,0,1.105-2.345C22.578,12.166,22.419,11.301,22.221,10.853zM14.623,22.83c-0.156,0.353-0.413,0.439-1.091,0.955c-0.577,0.448-1.264,1.172-2.009,2.6l-1.191-0.562c0.628-1.48,0.75-2.474,0.73-3.203c-0.031-0.851-0.128-1.104,0.045-1.449l3.599-7.621l3.517,1.662L14.623,22.83z").attr({fill: "#ff0", stroke: "none"}); var cp = Raphael.colorpicker(600, 20, 200, "#ff0").onchange = function(color){ picker.attr('fill',color); }; p_w_picpath.mousedown(function(e){ startPoint.x=e.offsetX; startPoint.y=e.offsetY; canDraw = true; }).mousemove(function(e){ if (!canDraw) {return;}; var currentPath = { x:startPoint.x, y:startPoint.y, tx:e.offsetX, ty:e.offsetY } startPoint.x=e.offsetX; startPoint.y=e.offsetY; pathStr.push(Raphael.fullfill("M{x},{y}L{tx},{ty}",currentPath)); var path = paper.path(pathStr).attr({stroke: picker.attr('fill'),'stroke-width':5}); path.mouseup(function(event) { canDraw = false; }); }).mouseup(function(e) { canDraw = false; startPoint.x=e.offsetX; startPoint.y=e.offsetY; });; }); }); </script> </HTML>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。