HTML5如何使用鼠标事件(覆盖,单击)绘制组件

时间:2015-01-13 08:43:57

标签: javascript html5 events canvas mouse

我想低于功能。

  1. 添加到鼠标事件(覆盖,单击)绘制的组件

    • 了lineTo
    • 鼠标悬停或点击绘制的行,显示消息
  2. 还有一个想要......可以运行IE11,Chrome,Safari ......

    [原始代码。]

            <%@ page import="java.util.*" %>
            <%@ page import="java.sql.*" %>
            <!doctype html>
            <html>
    
            <head>
                <link rel="stylesheet" type="text/css" media="all" href="../css/style.css" /> <!-- reset css -->
                <script src="../js/jquery.min.js"></script>
                <script src="../js/jspdf.debug.js"></script>
    
            <style>
                body{ background-color: white; }
                canvas{border:1px solid red;}
                    html, body {
                       width: 100%;
                       height: 100%;
                       margin:0px 0px 0px 10px;
                    }
                footer{display:block; border-top:1px solid orange;margin:10px;font-family:"Trebuchet MS",Arial,Helvetica,sans-serif; font-weight:bold;}
                article{display:block; font-family:Georgia,"Times New Roman",Times, serif; margin:5px;}
            </style>
    
            <script>
            $(document).ready(function()
            {
             $('body').hide().fadeIn(1000); 
            });
            </script>
    
            <%
                    int chrcount = 10; //servlet return
            %>
                <img id="canvasImg">
    
                <canvas id="canvas" width="<%=chrcount*200%>" height="2000" style="display:none;"></canvas>
    
            <script type="text/javascript">
    
                    var canvas=document.getElementById("canvas");
                    var ctx=canvas.getContext("2d");
    
                    var start_position = 100;
                    var end_position = 200;
                    var RGBcolor = [];
    
                    var canvasWidth = canvas.width;
                    var canvasHeight = canvas.height; 
    
            <%
                DBManagerPepper dbmanagerpepper = new DBManagerPepper();
    
                String chrLength_sql = null;
                String bpLength_sql = null;
                String alignment_sql = null;
                String cMLength_sql = null;
                String AllChr_sql = null;
    
                String organismCode = request.getParameter("organismCode") ; //servlet return
    
                int canvasWidth = chrcount * 500;
                    //cM length
                    AllChr_sql = "select distinct ch_no from geneticmap_info_t";
    
                    try{
                        dbmanagerpepper.rs=dbmanagerpepper.stmt.executeQuery(AllChr_sql);
                    }catch(Exception e){
                        System.out.println(e);
                    }
    
                    while (dbmanagerpepper.rs!=null && dbmanagerpepper.rs.next()) {     
    
                        int R = (int)(Math.random()*256);
                        int G = (int)(Math.random()*256);
                        int B= (int)(Math.random()*256);
                        String RGB = R+","+G+","+B;
                        //System.out.println(RGB);
                        //RGBcolor.put(dbmanagerpepper.rs.getString("ch_no"), RGB);
    
                        %>
                            RGBcolor.push({ch_no:'<%=dbmanagerpepper.rs.getString("ch_no")%>',rgb:'<%=RGB%>'}); 
                        <%
    
                    } 
    
            %>
    
                    //alert(RGBcolor[1].rgb);
    
            <%
                for(int i=1;i<chrcount;i++){
                    %>
                        var i = <%=i%>  
                    <%
                    //cM length
                    cMLength_sql = "select max(position) as max_cM_position from geneticmap_info_t where  organismcode='"+organismCode+"' and ch_no='"+i+"'";
    
                    try{
                        dbmanagerpepper.rs=dbmanagerpepper.stmt.executeQuery(cMLength_sql);
                    }catch(Exception e){
                        System.out.println(e);
                    }
    
                    %>
    
                    var cM_length = <% while (dbmanagerpepper.rs!=null && dbmanagerpepper.rs.next()) { %><%=dbmanagerpepper.rs.getInt("max_cM_position")%><% } %>;  
    
    
                    <%
    
                    //bp length
                    bpLength_sql = "select max(cov_position) as max_cov_position  from physicalmap_info_t where organismcode='"+organismCode+"' and lg_no='"+i+"'";
    
                    try{
                        dbmanagerpepper.rs=dbmanagerpepper.stmt.executeQuery(bpLength_sql);
                    }catch(Exception e){
                        System.out.println(e);
                    }
    
                    %>
                        var bp_length = <% while (dbmanagerpepper.rs!=null && dbmanagerpepper.rs.next()) { %><%=dbmanagerpepper.rs.getInt("max_cov_position")%><% } %>; 
    
    
                    <%
                    //align(cM-bp)
                    //alignment_sql = "select a.markername as physicalmap_markername, a.lg_no as physicalmap_lg_no, a.cov_position as physicalmap_cov_position, b.ch_no as geneticmap_ch_no, b.position as geneticmap_position from physicalmap_info_t a, geneticmap_info_t b where a.lg_no='"+i+"' and a.organismcode='"+organismCode+"' and a.organismcode=b.organismcode and a.lg_no=b.ch_no and a.markername=b.markername order by a.markerseq;";
    
                    alignment_sql = "select a.markername as physicalmap_markername, a.lg_no as physicalmap_lg_no, a.cov_position as physicalmap_cov_position, b.ch_no as geneticmap_ch_no, b.position as geneticmap_position from physicalmap_info_t a, geneticmap_info_t b where a.lg_no='"+i+"' and a.organismcode='"+organismCode+"' and a.organismcode=b.organismcode and a.markername=b.markername order by a.markerseq;";
    
                    try{
                        dbmanagerpepper.rs=dbmanagerpepper.stmt.executeQuery(alignment_sql);
                    }catch(Exception e){
                        System.out.println(e);
                    }
                    %>
    
                    var physicalmap_markername = [
                    <% while (dbmanagerpepper.rs!=null && dbmanagerpepper.rs.next()) { %>
                       '<%=dbmanagerpepper.rs.getString("physicalmap_markername")%>', 
                    <% } %>
                    ];
                    <%
                        dbmanagerpepper.rs.beforeFirst();   
                    %>
    
    
                    var physicalmap_lg_no = [ 
                    <% while (dbmanagerpepper.rs!=null && dbmanagerpepper.rs.next()) { %>
                       <%=dbmanagerpepper.rs.getInt("physicalmap_lg_no")%>, 
                    <% } %>
                    ];
                    <%
                        dbmanagerpepper.rs.beforeFirst();   
                    %>
    
                    var physicalmap_cov_position = [ 
                    <% while (dbmanagerpepper.rs!=null && dbmanagerpepper.rs.next()) { %>
                       <%=dbmanagerpepper.rs.getInt("physicalmap_cov_position")%>, 
                    <% } %>
                    ];
                    <%
                        dbmanagerpepper.rs.beforeFirst();   
                    %>
    
    
                    var geneticmap_ch_no = [ 
                    <% while (dbmanagerpepper.rs!=null && dbmanagerpepper.rs.next()) { %>
                       <%=dbmanagerpepper.rs.getInt("geneticmap_ch_no")%>, 
                    <% } %>
                    ];
                    <%
                        dbmanagerpepper.rs.beforeFirst();   
                    %>
    
    
                    var geneticmap_position = [ 
                    <% while (dbmanagerpepper.rs!=null && dbmanagerpepper.rs.next()) { %>
                       <%=dbmanagerpepper.rs.getInt("geneticmap_position")%>, 
                    <% } %>
                    ];
                    <%
                        dbmanagerpepper.rs.beforeFirst();   
                    %>
    
    
                      orfSize = canvasWidth*(<%=chrcount*5%>);
    
                      ctx.lineWidth=12;
                      var offset = 2500000;
                      var start=offset;
                      var end=bp_length+offset;
    
                      ctx.beginPath();
    
                      ctx.fillStyle = "rgb("+RGBcolor[i-1].rgb+")";
                      ctx.font = "bold 12pt Courier";
                      ctx.textBaseline = 'Top';
                      ctx.fillText("Chr"+i,start_position-30,20);
    
                      ctx.strokeStyle ="rgb("+RGBcolor[i-1].rgb+")";
                      ctx.moveTo(start_position,start/orfSize);
                      ctx.lineTo(start_position,end/orfSize); 
    
                      ctx.stroke();
    
                      var end=cM_length+offset;
    
                      ctx.beginPath();
                      ctx.strokeStyle ='rgb(1,176,241)';
    
                      ctx.moveTo(end_position,start/orfSize);
                      ctx.lineTo(end_position,end/orfSize); 
    
                      ctx.stroke();
    
                      ctx.fillStyle = 'rgb(144,167,198)';
                      ctx.font = "bold 12pt Courier";
                      ctx.textBaseline = 'Top';
                      ctx.fillText("cM",end_position,end/orfSize+10);
    
                      var count=1;
    
                      for( k=0;k<physicalmap_lg_no.length;k++){
    
                          var start=physicalmap_cov_position[k]+offset;
                          var end=geneticmap_position[k]+offset;
    
                          ctx.beginPath();
    
                            if(physicalmap_lg_no[k] == geneticmap_ch_no[k]){
                              ctx.lineWidth = 0.7;  
                              ctx.strokeStyle ="rgb(144,167,198)";
                              ctx.moveTo(start_position+5,start/orfSize);
                              ctx.lineTo(start_position+95,end/orfSize); 
                              ctx.stroke();
                            }
    
                            else{
    
                                if(geneticmap_ch_no[k] != i){
                                  ctx.strokeStyle ="rgb("+RGBcolor[geneticmap_ch_no[k]-1].rgb+")";
                                  ctx.lineWidth=13;
                                  ctx.moveTo(start_position-15,start/orfSize);
                                  ctx.lineTo(start_position-15,(start+100000)/orfSize); 
                                  ctx.stroke();
    
                                }
    
                           }
    
                          count = count+1;
                      }
    
    
                      for( k=0;k<physicalmap_lg_no.length;k++){
    
                          var start=physicalmap_cov_position[k]+offset;
                          var end=geneticmap_position[k]+offset;
    
                          var start_position_align = 100;
                          var end_position_align = 200;
    
                          ctx.beginPath();
    
                            if(physicalmap_lg_no[k] == geneticmap_ch_no[k]){
                              ctx.lineWidth = 0.7;  
                              ctx.strokeStyle ="rgb(144,167,198)";
                              ctx.moveTo(start_position+5,start/orfSize);
                              ctx.lineTo(start_position+95,end/orfSize); 
                              ctx.stroke();
                            }
    
                            else{
    
                                if(geneticmap_ch_no[k] != i){
    
                                  start_position_align = start_position_align+((geneticmap_ch_no[k]-1)*200);
                                  end_position_align = end_position_align+((geneticmap_ch_no[k]-1)*200);
    
                                  //alert(((geneticmap_ch_no[k]-1)*200));
    
                                  ctx.strokeStyle ="rgb("+RGBcolor[physicalmap_lg_no[k]-1].rgb+")";
                                  ctx.lineWidth=13;
                                  ctx.moveTo(end_position_align+15,end/orfSize);
                                  ctx.lineTo(end_position_align+15,(end+100000)/orfSize); 
                                  ctx.stroke();
                                }
    
                           }
    
                          count = count+1;
                      }
    
                    start_position = start_position+200;
                    end_position = end_position+200;
    
                    <%
    
    
    
                }
    
    
            %>
                  // save canvas image as data url (png format by default)
                  var dataURL = canvas.toDataURL();
    
                  // set canvasImg image src to dataURL
                  // so it can be saved as an image
                  document.getElementById('canvasImg').src = dataURL;
            </script>
    
            </html>
    

0 个答案:

没有答案