注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

飞天心宏的博客

依稀旧梦似曾见,相逢只恨缘太迟

 
 
 

日志

 
 
关于我

出身数学,爱好文学,从事软件开发工作。一个阳光、幽默、热爱生活的男孩子,在追求理想的路上风雨无阻,勇往直前,崇尚“梦想有多远,我们就走多远”!

网易考拉推荐

js实现Web绘图功能 [Raphael类库]  

2013-02-28 13:35:27|  分类: JavaScrip |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 本文介绍如何使用JS实现浏览器绘图功能,将用到核心类库raphael.js(详情请参考官网:http://raphaeljs.com/

 

Rapha?l 读音 ['r?fe??l]:是强大的轻量级的矢量图形库,它是跨浏览器的轻量级JS类库,目前支持Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+。遵循MIT开源软件许可协议。Rapha?l 基于W3C推荐的SVG标准和VML,这意味着你创建的每一个绘图对象也都是DOM对象,所以你可以像操作DOM一样操作它,如对其应用JavaScript 事件机制和对应的修改操作等。总之在Rapha?l类库的支撑下,常见的绘图就显得非常简单了。

下面就通过一个实践例子(行径轨迹绘制)来讲解Rapha?l如何使用。

简要功能说明:能够对方位图进行轨迹绘制。

1、  方位图:(通过绘图软件或内置GIS导出的特定格式的数据,亦或是最简单的地图截图图片),这里大家往最简单的理解为一张图片吧。

2、  需要在方位图中标注案发点、监控点、轨迹点(监控视频拍摄到嫌疑人地方)、通话中(是否当时在打电话)、描述文字及轨迹线等。

3、  监控点能够360旋转,表示监控点监控的方向。

4、  各操作能够方便的进行,如新增、删除、拖拽操作等。

5、  一张方位图能够绘制多次不同轨迹,所以绘图完轨迹之后能够方便保存,下次能够再次对应查看。

 

先看看绘制完后的成品(轨迹图)吧,如下图所示:

js实现Web绘图功能 [Raphael类库] - 飞天心宏 - 飞天心宏的博客

  

这里左侧是功能区,中间的是方位图背景,在方位图之上显示的就是轨迹了。

下面才到我们的重点关注的问题了,如何绘图功能如何操作及实现这么一个功能。

1.         功能入口:

js实现Web绘图功能 [Raphael类库] - 飞天心宏 - 飞天心宏的博客

  

2.         入口进来之后,我们这个时候会显示空白的方位图背景底图

js实现Web绘图功能 [Raphael类库] - 飞天心宏 - 飞天心宏的博客

 

布局代码很简单,只要会点CSS就行了,我这就直接贴代码了,大家可以根据实际情况处理。

HTML:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <link href="../resources/css/DrawPathRaphael.css" rel="stylesheet" type="text/css" />

    <script src="../JS/Jquerys/jquery-1.7.2.min.js" type="text/javascript"></script>

    <script src="../JS/raphael.js" type="text/javascript"></script>

    <script src="../JS/json2.js" type="text/javascript"></script>

    <script src="../JS/Twilight/Twilight.js" type="text/javascript"></script>

    <script src="../app/view/other/DrawPathRaphael.js" type="text/javascript"></script>

</head>

<body>

    <form id="form1" runat="server">

    <div id="toolbox">

        <div class="tb_itm  tb_itm_slt" id="tb_cursor">

            <div class="tb_itm_cnt"><img alt="光标" src="../JS/Twilight/resources/images/cursor.png" /><span>光标</span></div>

        </div>

        <div class="tb_itm" id="tb_position">

            <div class="tb_itm_cnt"><img alt="案发点" src="../resources/images/camerfile32.png" /><span>案发点</span></div>

        </div>

        <div class="tb_itm" id="tb_camera">

            <div class="tb_itm_cnt"><img alt="监控点" src="../resources/images/camera.png" /><span>监控点</span></div>

        </div>

        <div class="tb_itm" id="tb_line">

            <div class="tb_itm_cnt"><img alt="轨迹线" src="../JS/Twilight/resources/images/arrow_right.png" /><span>轨迹线</span></div>

        </div>

        <div class="tb_itm" id="tb_point">

            <div class="tb_itm_cnt"><img alt="轨迹点" src="../JS/Twilight/resources/images/flag_greed.png" /><span>轨迹点</span></div>

        </div>

        <div class="tb_itm" id="tb_phone">

            <div class="tb_itm_cnt"><img alt="通话中" src="../JS/Twilight/resources/images/phone_sound.png" /><span>通话中</span></div>

        </div>

        <div class="tb_itm" id="tb_text">

            <div class="tb_itm_cnt"><img alt="文字" src="../JS/Twilight/resources/images/text_edit.png" /><span>文字</span></div>

        </div>

        <div class="tb_itm" id="tb_del">

            <div class="tb_itm_cnt"><img alt="删除项" src="../JS/Twilight/resources/images/erase.png" /><span>删除项</span></div>

        </div>

        <div class="tb_itm" id="tb_clockwise">

            <div class="tb_itm_cnt"><img alt="顺时针" src="../JS/Twilight/resources/images/rotate_left.png" /><span>顺时针</span></div>

        </div>

        <div class="tb_itm" id="tb_anticwise">

            <div class="tb_itm_cnt"><img alt="逆时针" src="../JS/Twilight/resources/images/rotate_right.png" /><span>逆时针</span></div>

        </div>

        <div id="btSet">

            <div class="tbSet_itm">           

                <div class="tb_itm_cnt"><div class="isReuse"><input id="isReuse" type="checkbox" /></div><span class="tb_itm_span">连续操作</span></div>

            </div>

            <div class="tbSet_itm cp itm_save" id="dataSave">

                <div class="tb_itm_cnt"><img alt="保存数据" src="../JS/Twilight/resources/images/save.png" /><span class="tb_itm_span">保存数据</span></div>

            </div>

            <div class="tbSet_itm"><span>方向键可作轻微调整</span></div>

        </div>

    </div>

    <img id="imgHidden" alt="" src="" style="display:none;"/>

    <div id="canvas"></div>

    </form>

</body>

</html>

 

CSS

body

{

    font-size:12px;

    background-color:White;

}

.cp

{

     cursor:pointer;

}

 

#toolbox

{

    position:absolute;

    top:0;

    left:0;

    width:160px;

    z-index:5;

    border-top:1px dashed #ccc;

}

 

#canvas

{

    padding:0;

    margin:0;

    margin-left:160px;

    overflow:auto;

    background-repeat:no-repeat;   

 }

 

.tb_itm

{

    text-align:center;

    height:32px;

    background-color:White;

    border-bottom:1px dashed #ccc;

    cursor:pointer;

}

.tb_itm_cnt

{

    width:80px;

    margin:auto;

}

.tb_itm:hover

{

    background-color:#918ad8;

}

.tb_itm_cnt img,.isReuse

{

    display:block;

    float:left;

    height:32px;

    width:32px;

}

.tb_itm span

{

    display:block;

    float:left;

    line-height:32px;

    vertical-align:middle;

 }

.tb_itm_slt

{

    background-color:#918ad8;

}

 

.tbSet_itm

{

    text-align:center;

    height:32px;  

    background-color:White;

    border-bottom:1px dashed #ccc;

}

 

.tbSet_itm span

{

     vertical-align:middle;

     line-height:32px;

}

 .tb_itm_span

{

    display:block;

    float:left;

 }

 

#isReuse

{

     margin-top:10px;

}

 

.itm_save:hover

{

    background-color:#918ad8;

}

 

3.         这个时候,我们可以开始进行绘图操作了,在左侧的功能区选择要操作的功能项,然后在右侧的绘图区,点击即可增加。也可以随便拖动位置,或删除。

js实现Web绘图功能 [Raphael类库] - 飞天心宏 - 飞天心宏的博客

  

4.         轨迹线操作,点击一下生成起点,移动鼠标到其他位置,即可完成绘制。旋转分顺时针或逆时针旋转。

 

js实现Web绘图功能 [Raphael类库] - 飞天心宏 - 飞天心宏的博客

 

js实现Web绘图功能 [Raphael类库] - 飞天心宏 - 飞天心宏的博客

 

 

5.         其他操作类似,绘制好成品图

js实现Web绘图功能 [Raphael类库] - 飞天心宏 - 飞天心宏的博客

  

6.         文字双击后也可进行修改

js实现Web绘图功能 [Raphael类库] - 飞天心宏 - 飞天心宏的博客

  

7.         完成后保存,保存后,列表中就能看到轨迹了(当然一个方位图,可以绘制多个轨迹)

js实现Web绘图功能 [Raphael类库] - 飞天心宏 - 飞天心宏的博客

  

8.         对保存后的轨迹图也可进行再次查看,或修改。

js实现Web绘图功能 [Raphael类库] - 飞天心宏 - 飞天心宏的博客

  

要实现这些操作,对借助Rapha?l来说,确实只是基本的,简单的查一下api,你就能看懂下面的代码了。(之前想每步代码都拆开来讲解,但是后来想想,代码比较简单,大家看完整的似乎能容易理解)。

 

符:完整的JS代码:

$(function () {

    $("#toolbox .tb_itm").bind('click', function () {

        if (!twiVars.drawingLine) {

            $("#toolbox .tb_itm").removeClass("tb_itm_slt");

            $(this).addClass("tb_itm_slt");

            twiVars.tbSltItmId = $(this).attr("id");

            if (twiVars.tbSltItmId == "tb_cursor") {

                if (twiVars.sltBBox) { twiVars.sltBBox.remove(); }

                twiVars.sltItem = null;

            }

            else if (twiVars.tbSltItmId == "tb_del") {

                if (twiVars.sltBBox) { twiVars.sltBBox.remove(); }

                if (twiVars.sltItem) {

                    twiVars.paperSet.exclude(twiVars.sltItem);

                    twiVars.sltItem.remove();

                }

            }

            else if (twiVars.tbSltItmId == "tb_clockwise") {

                if (twiVars.sltItem) {

                    if (twiVars.sltItem.attrs.rotate == undefined) {

                        twiVars.sltItem.attrs.rotate = 0;

                    }

                    twiVars.sltItem.attrs.rotate += twiVars.rotateDegree;

                    twiVars.sltItem.transform("r" + twiVars.sltItem.attrs.rotate);

 

                }

            }

            else if (twiVars.tbSltItmId == "tb_anticwise") {

                if (twiVars.sltItem) {

                    if (twiVars.sltItem.attrs.rotate == undefined) {

                        twiVars.sltItem.attrs.rotate = 0;

                    }

                    twiVars.sltItem.attrs.rotate -= twiVars.rotateDegree;

                    twiVars.sltItem.transform("r" + twiVars.sltItem.attrs.rotate);

                }

            }

        }

    });

 

    twiSelf.init();

 

    $("#dataSave").click(function () {

        twiSelf.getDrawData();

        if (!twiVars.submitData.name) {

            twiVars.submitData.name = prompt("为该轨迹起个名称:", "");

        }

        if (twiVars.submitData.name) {

            $.ajax({

                type: 'POST',

                dataType: 'JSON',

                url: '../PageHandlers/PathHandler.ashx',

                data:

            {

                sign: 'pathNewOrEdit',

                data: JSON.stringify(twiVars.submitData)

            },

                success: function (data, textStatus, jqXHR) {

                    if (data.success) {

                        alert("数据保存成功!");

                    }

                    else {

                        alert("数据保存失败,系统发现异常:" + data.message);

                    }

                },

                error: function (ex) {

                    alert("数据保存失败!");

                }

            });

        }

        else {

            alert("需要填写名称才能保存,请重试!");

        }

    });

});

 

Twi.CVMS.Pages.DrawPathRaphael = {

    Vars: {

        submitData: {},

        tbSltItmId: null,

        locationMapPath: null,

        paper: null,

        tbWidth: 160,

        iconWidth: 32,

        iconHeight: 32,

        paperSet: null,

        drawingLine: false,

        moveTo: null,

        lineTo: null,

        currentLine: null,

        isMoving: false,

        sltBBox: null,

        sltItem: null,

        rotateDegree: 8

    }

     , init: function () {

         twiVars.submitData.newOrEdit = Twi.GetUrlParam("newOrEdit") || "new";

         twiVars.submitData.locationMapPath = Twi.GetUrlParam("locationMapPath");

         var img = $('#imgHidden');

         img.attr("src", twiVars.submitData.locationMapPath);

 

         $('#canvas').css({

             width: img.width(),

             height: img.height()

         }).click(function (e) {

             twiSelf.drawing(e.pageX, e.pageY);

         }).mousemove(function (e) {

             if (twiVars.drawingLine) {

                 twiVars.isMoving = true;

                 twiSelf.Toolbox.drawLine(e.pageX, e.pageY);

             }

         });

         twiVars.paper = Raphael('canvas', img.width(), img.height());

 

         var bgImage = twiVars.paper.image(img.attr("src"), 0, 0, img.width(), img.height());

         twiVars.paperSet = twiVars.paper.set();

         //twiVars.paperSet.push(bgImage);

 

         if (twiVars.submitData.newOrEdit == "new") {

             twiSelf.newInit();

         }

         else {

             twiSelf.editInit();

         }

     }

 

     , newInit: function () {

         twiVars.submitData.caseNumber = Twi.GetUrlParam("caseNumber");

         twiVars.submitData.locationMapID = Twi.GetUrlParam("locationMapID");

     }

 

     , editInit: function () {

         twiVars.submitData.pathID = Twi.GetUrlParam("pathID");

         $.ajax({

             type: 'POST',

             dataType: 'JSON',

             url: '../PageHandlers/PathHandler.ashx',

             data:

            {

                sign: 'getByID',

                ID: twiVars.submitData.pathID

            },

             success: function (data, textStatus, jqXHR) {

                 if (data.success == undefined) {

                     if (data.totalCount == 0) {

                         alert("未查询到标注信息记录!"); return;

                     }

                     twiVars.submitData.name = data.data[0].FNAME;

                     twiVars.submitData.caseNumber = data.data[0].FCASENUMBER;

                     twiVars.submitData.locationMapID = data.data[0].FLOCATIONMAPID;

                     var pathData = JSON.parse(data.data[0].FPATHDATA);

                     for (var i = 0; i < pathData.items.length; i++) {

                         var record = pathData.items[i];

                         if (record.type == "image") {

                             var item = twiVars.paper.image(record.attrs.src, record.attrs.x, record.attrs.y, record.attrs.width, record.attrs.height);

                             twiSelf.addListeners(item);

                             item.attr(item.attrs);

                             if (record.attrs.rotate != undefined) {

                                 item.attrs.rotate = record.attrs.rotate;

                                 item.transform("r" + item.attrs.rotate);

                             }

                             twiVars.paperSet.push(item);

                         }

                         else if (record.type == "path") {

                             var item = twiVars.paper.path(record.attrs.path);

                             twiSelf.addLineListeners(item);

                             item.attr(record.attrs);

                             if (record.attrs.rotate != undefined) {

                                 item.attrs.rotate = record.attrs.rotate;

                                 item.transform("r" + item.attrs.rotate);

                             }

                             twiVars.currentLine = item;

                             twiVars.paperSet.push(item);

                         }

                         else if (record.type == "text") {

                             var item = twiVars.paper.text(record.attrs.x, record.attrs.y, record.attrs.text);

                             twiSelf.addListeners(item);

                             item.attr(record.attrs);

                             if (record.attrs.rotate != undefined) {

                                 item.attrs.rotate = record.attrs.rotate;

                                 item.transform("r" + item.attrs.rotate);

                             }

                             twiVars.currentLine = item;

                             twiVars.paperSet.push(item);

                         }

                     }

                 }

                 else {

                     alert("数据加载失败,系统发现异常:" + data.message);

                 }

             },

             error: function (ex) {

                 alert("数据加载失败!");

             }

         });

     }

 

     , Toolbox:

     {

         drawCamera: function (x, y) {

             var item = twiVars.paper.image("../resources/images/camera.png", x, y, twiVars.iconWidth, twiVars.iconHeight);

             twiSelf.addListeners(item);

             twiVars.paperSet.push(item);

             return item;

         }

         , drawPoint: function (x, y) {

             var item = twiVars.paper.image("../JS/Twilight/resources/images/flag_greed.png", x, y, twiVars.iconWidth, twiVars.iconHeight);

             twiSelf.addListeners(item);

             twiVars.paperSet.push(item);

             return item;

         }

         , drawPhone: function (x, y) {

             var item = twiVars.paper.image("../JS/Twilight/resources/images/phone_sound.png", x, y, twiVars.iconWidth, twiVars.iconHeight);

             twiSelf.addListeners(item);

             twiVars.paperSet.push(item);

             return item;

         }

         , drawPosition: function (x, y) {

             var item = twiVars.paper.image("../resources/images/camerfile32.png", x, y, twiVars.iconWidth, twiVars.iconHeight);

             twiSelf.addListeners(item);

             twiVars.paperSet.push(item);

             return item;

         }

         , drawText: function (x, y) {

             var text = prompt("文字描述:", "这里是文字描述...");

             if (text) {

                 var item = twiVars.paper.text(x, y, text);

                 item.attr({

                     "font-size": "16px",

                     "font-weight": "bold"

                 });

                 twiSelf.addListeners(item);

                 twiVars.paperSet.push(item);

                 return item;

             }

         }

         , drawLine: function (pageX, pageY) {

             pageX -= twiVars.tbWidth;

             if (twiVars.drawingLine) {

                 if (twiVars.isMoving) {

                     twiVars.lineTo = "L" + pageX + "," + pageY;

                     twiVars.currentLine.attr({

                         "stroke-dasharray": "--",

                         "arrow-end": "open-wide-long",

                         path: twiVars.moveTo + twiVars.lineTo

                     });

                 }

                 else {

                     twiVars.moveTo = "M" + pageX + "," + pageY;

                     var tmp = "L" + (pageX + 2) + "," + (pageY + 2);

                     twiVars.currentLine = twiVars.paper.path(twiVars.moveTo + tmp);

                     twiVars.currentLine.attr({

                         'stroke-width': 3,

                         stroke: "red"

                     });

                     twiVars.currentLine.data("Mx", pageX);

                     twiVars.currentLine.data("My", pageY);

                 }

             }

             else {

                 twiVars.lineTo = "L" + pageX + "," + pageY;

                 twiVars.currentLine.attr({

                     "stroke-dasharray": "",

                     "arrow-end": "open-wide-long",

                     path: twiVars.moveTo + twiVars.lineTo

                 });

                 twiVars.currentLine.data("Lx", pageX);

                 twiVars.currentLine.data("Ly", pageY);

                 twiSelf.addLineListeners(twiVars.currentLine);

                 twiVars.paperSet.push(twiVars.currentLine);

             }

         }

     }

 

     , addListeners: function (item) {

         var onmove = function (dx, dy, x, y, event) {

             if (twiVars.tbSltItmId == "tb_cursor") {

                 item.attr({

                     x: x - twiVars.tbWidth - twiVars.iconWidth / 2,

                     y: y - twiVars.iconHeight / 2

                 });

             }

         }

         var onend = function () {

             twiSelf.drawBBox(item);

         }

         item.drag(onmove, null, onend);

         item.mouseover(function () {

             if (twiVars.tbSltItmId == "tb_cursor") {

                 item.attr("cursor", "move");

             }

             else {

                 item.attr("cursor", "default");

             }

         });

         item.click(function () {

             twiSelf.drawBBox(item);

         });

 

         if (item.type == "text") {

             item.dblclick(function () {

                 var newText = prompt("文字修改:", item.attr("text"));

                 if (newText) {

                     item.attr("text", newText);

                 }

             });

         }

 

         return item;

     }

 

     , addLineListeners: function (item) {

         var onmove = function (dx, dy, x, y, event) {

             if (twiVars.tbSltItmId == "tb_cursor") {

                 item.data("dx", dx);

                 item.data("dy", dy);

                 item.attr({

                     path: "M" + item.data("Mx") + "," + item.data("My") + "L" + (item.data("Lx") + dx) + "," + (item.data("Ly") + dy)

                 });

             }

         }

         var onstart = function () {

             twiVars.currentLine.data("dx", 0);

             twiVars.currentLine.data("dy", 0);

         }

         var onend = function () {

             item.data("Lx", item.data("Lx") + item.data("dx"));

             item.data("Ly", item.data("Ly") + item.data("dy"));

             twiVars.currentLine.data("dx", 0);

             twiVars.currentLine.data("dy", 0);

         }

         item.drag(onmove, onstart, onend);

         item.mouseover(function () {

             if (twiVars.tbSltItmId == "tb_cursor") {

                 item.attr("cursor", "move");

             }

             else {

                 item.attr("cursor", "default");

             }

         });

         item.click(function () {

             twiSelf.drawBBox(item);

         });

         return item;

     }

 

     , drawing: function (pageX, pageY) {

         var x = pageX - twiVars.tbWidth - twiVars.iconWidth / 2;

         var y = pageY - twiVars.iconHeight / 2;

         if (twiVars.tbSltItmId == "tb_cursor") {

 

         }

         else if (twiVars.tbSltItmId == "tb_camera") {

             twiVars.sltItem = twiSelf.Toolbox.drawCamera(x, y);

             twiSelf.setTbDefault();

             twiSelf.drawBBox(twiVars.sltItem);

         }

         else if (twiVars.tbSltItmId == "tb_line") {

             twiVars.drawingLine = !twiVars.drawingLine;

             twiVars.isMoving = false;

             twiSelf.Toolbox.drawLine(pageX, pageY);

             if (!twiVars.drawingLine) { twiSelf.setTbDefault(); }

         }

         else if (twiVars.tbSltItmId == "tb_point") {

             twiVars.sltItem = twiSelf.Toolbox.drawPoint(x, y);

             twiSelf.setTbDefault();

             twiSelf.drawBBox(twiVars.sltItem);

         }

         else if (twiVars.tbSltItmId == "tb_phone") {

             twiVars.sltItem = twiSelf.Toolbox.drawPhone(x, y);

             twiSelf.setTbDefault();

             twiSelf.drawBBox(twiVars.sltItem);

         }

         else if (twiVars.tbSltItmId == "tb_del") {

             twiSelf.setTbDefault();

         }

         else if (twiVars.tbSltItmId == "tb_position") {

             twiVars.sltItem = twiSelf.Toolbox.drawPosition(x, y);

             twiSelf.setTbDefault();

             twiSelf.drawBBox(twiVars.sltItem);

         }

         else if (twiVars.tbSltItmId == "tb_text") {

             twiVars.sltItem = twiSelf.Toolbox.drawText(x, y);

             twiSelf.setTbDefault();

             twiSelf.drawBBox(twiVars.sltItem);

         }

     }

 

     , drawBBox: function (item) {

         if (twiVars.sltBBox) {

             twiVars.sltBBox.remove();

         }

         var bbox = item.getBBox();

         twiVars.sltBBox = twiVars.paper.rect(bbox.x, bbox.y, bbox.width, bbox.height);

         twiVars.sltItem = item;

         twiVars.sltBBox.attr({

             stroke: "blue",

             "stroke-width": 2

         });

     }

 

     , setTbDefault: function () {

         if (!$("#isReuse").attr("checked")) {

             twiVars.tbSltItmId = "tb_cursor";

             $("#toolbox .tb_itm").removeClass("tb_itm_slt");

             $("#tb_cursor").addClass("tb_itm_slt");

         }

     }

 

    , getDrawData: function () {

        var obj = { items: [] };

        twiVars.paperSet.forEach(function (el) {

            var item = {

                type: el.type,

                attrs: el.attrs

            }

            obj.items.push(item);

        });

        obj.length = obj.items.length;

        twiVars.submitData.pathData = JSON.stringify(obj);

        return twiVars.submitData.pathData;

    }

};

 

var twiSelf =  Twi.CVMS.Pages.DrawPathRaphael;

var twiVars = twiSelf.Vars;

 

                                飞天心宏 2013-02-28

  评论这张
 
阅读(15727)| 评论(5)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017