基于jquery与raphael实现的在线批阅

发布时间：2020-07-18 15:43:38 作者：zachary_woo
来源：网络阅读：743

用1天时间基于jquery与raphael实现了一个在线批阅的功能，目前功能比较简单而且还有很多bug算是给有类似需求的兄弟们提供一个方向吧。该DEMO中具体实现了在线画笔的功能。以下是实际截图
基于jquery与raphael实现的在线批阅

<!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>

基于jquery与raphael实现的在线批阅

相关阅读