• <tr id="yyy80"></tr>
  • <sup id="yyy80"></sup>
  • <tfoot id="yyy80"><noscript id="yyy80"></noscript></tfoot>
  • 99热精品在线国产_美女午夜性视频免费_国产精品国产高清国产av_av欧美777_自拍偷自拍亚洲精品老妇_亚洲熟女精品中文字幕_www日本黄色视频网_国产精品野战在线观看 ?

    基于SVG的思維導(dǎo)圖的系統(tǒng)實現(xiàn)

    2016-05-11 06:58:37任志豪賴源勁
    現(xiàn)代計算機 2016年9期
    關(guān)鍵詞:實現(xiàn)思維導(dǎo)圖

    任志豪,賴源勁

    (華南師范大學軟件學院,廣州 510631)

    ?

    基于SVG的思維導(dǎo)圖的系統(tǒng)實現(xiàn)

    任志豪,賴源勁

    (華南師范大學軟件學院,廣州510631)

    摘要:基于SVG實現(xiàn)的繪圖技術(shù),具有對象化和易于交互的特點,適合用于思維導(dǎo)圖在線繪制的實現(xiàn)?;赟VG實現(xiàn)的思維導(dǎo)圖繪制系統(tǒng),其基礎(chǔ)功能有思維導(dǎo)圖節(jié)點及邊的繪制、增刪、位置變換和拖動,其中的關(guān)鍵技術(shù)點包括圖形的位置計算和渲染等。

    關(guān)鍵詞:思維導(dǎo)圖;SVG;實現(xiàn)

    0 引言

    隨著信息時代的飛速發(fā)展,人們在日常工作或者學習中越來越需要記錄信息和知識,使用思維導(dǎo)圖可為人們更高效地記錄和歸納信息。思維導(dǎo)圖又稱心智圖,它從中心主題出發(fā),發(fā)散關(guān)鍵點,以簡潔的信息表示整個結(jié)構(gòu)。一個典型的思維導(dǎo)圖由多個節(jié)點所組成,一個節(jié)點也可引申出多個子節(jié)點,體現(xiàn)了更清晰的分類思想,通過合理的分類方法,可以清晰地整理任務(wù)和快速定位信息的關(guān)鍵點。本文的主要內(nèi)容則是如何實現(xiàn)一個思維導(dǎo)圖的Web應(yīng)用。

    該系統(tǒng)使用SVG技術(shù)繪制思維導(dǎo)圖的圖形。SVG是可伸縮矢量圖形(Scalable Vector Graphics),用于描述二維矢量的一種圖形格式。SVG是一種基于XML的語言,可以在XML或者HTML中嵌入SVG。SVG的事件模型基于SVG圖形元素上,所以SVG具有很好的交互性。目前的已有的思維導(dǎo)圖Web應(yīng)用中,某些網(wǎng)站的思維導(dǎo)圖應(yīng)用使用了Canvas技術(shù),而Canvas是像素級別的圖形繪制技術(shù),不太適合于思維導(dǎo)圖這種對象級別的圖形繪制中;另外一些網(wǎng)站的思維導(dǎo)圖應(yīng)用使用了Flash技術(shù),但Flash技術(shù)比較繁瑣,性能不高,而且Flash需要下載插件,在一部分的操作系統(tǒng)不能使用。與上述兩種技術(shù)相比,SVG將圖像當成對象,可將思維導(dǎo)圖中節(jié)點和線等圖形表現(xiàn)為對象,事件模型基于圖形元素上的特性使得SVG更適合用于動態(tài)交互的應(yīng)用。目前兼容SVG的瀏覽器有IE9以及其他主流的瀏覽器,使得SVG的應(yīng)用具有較好的移植性。該系統(tǒng)使用一個SVG圖形庫——Raphael.js提供的API來繪制思維導(dǎo)圖應(yīng)用。

    1 系統(tǒng)功能與系統(tǒng)結(jié)構(gòu)

    該系統(tǒng)的主要功能有:添加節(jié)點、刪除節(jié)點和拖動節(jié)點。

    該系統(tǒng)采用面向?qū)ο蟮脑O(shè)計方式,如圖1所示,當中有4個主要的對象類型:Node、Edge、Graph和Renderer,前3個對象類型屬于數(shù)據(jù)層,第4個對象類型屬于渲染層。Node和Edge分別對應(yīng)于思維導(dǎo)圖的節(jié)點和邊,每一個節(jié)點都有一個父節(jié)點引用與父節(jié)點相連的父邊引用,用于表示節(jié)點與節(jié)點之間的關(guān)系。Graph 與Node之間是聚合關(guān)系,它擁有思維導(dǎo)圖根節(jié)點和所有節(jié)點的列表。Renderer用于渲染圖像,只有Graph擁有一個Render,Render負責具體的渲染操作,使得在數(shù)據(jù)有改變時才做出相應(yīng)的渲染,這樣的層次劃分可以使得數(shù)據(jù)操作和視圖渲染不會耦合在一起。只有Graph模塊暴露給客戶端使用,減少了繪圖系統(tǒng)和客戶端的耦合度。

    圖1 

    2 繪制基礎(chǔ)元素圖形的實現(xiàn)

    Raphael.js提供繪制基本圖形的功能,例如長方形,圓形。這些基本圖形可以組在一起形成集合,對這個集合進行的操作即對集合內(nèi)所有元素進行操作,在Raphael.js中,這個集合稱為Set。

    2.1節(jié)點的繪制

    一個節(jié)點由一個文本和長方形組成,節(jié)點的位置由左上角坐標決定。為了讓文本在長方形中在長方形區(qū)域里水平垂直居中,先繪制文本,求得文本所占區(qū)域的寬度和長度,然后加上長方形的上下補白,即可求得長方形的寬度和長度,再將文本位移二分之一的長方形寬度和高度即可讓文本在長方形區(qū)域中水平垂直居中。最后將長方形設(shè)置為新的寬度和高度。實現(xiàn)代碼如下:

    function drawNode(paper, x, y){ // paper為Raphael對象

    var label = paper.text(x, y, '節(jié)點');

    var textBox = label.getBBox();

    var nodeXPadding = 40; //長方形的x補白

    var nodeYPadding = 20; //長方形的y補白

    //得到矩形的長度

    var rectWidth = textBox.width + nodeXPadding;

    var rectHeight = textBox.height + nodeYPadding;

    var rect = paper.rect(x, y, 1, 1, 4);

    label.toFront();

    label.attr({

    x: x + rectWidth * 0.5,

    y: y + rectHeight * 0.5,

    'font-size': 14

    });

    rect.attr({

    width: rectWidth,

    height: rectHeight,

    'stroke': '#808080',

    'stroke-width': 1

    });

    return paper.set().push(label).push(rect);

    }

    2.2連線的繪制

    如果節(jié)點間的連線都用直線,思維導(dǎo)圖整體上會不太美觀。于是,為了讓連線更好看,在根結(jié)點與第一層節(jié)點間使用貝塞爾曲線,其他的連線都使用“三段連線”。

    (1)貝塞爾曲線的繪制

    ①貝塞爾曲線

    貝塞爾曲線是應(yīng)用于二維圖形應(yīng)用程序的數(shù)學曲線,通過計算貝塞爾曲線的計算公式,即可精確地繪制出復(fù)雜的曲線。貝塞爾曲線有三種重要的點:起始點、終止點和控制點。下面以二階貝塞爾曲線為例說明其原理,如圖2所示,設(shè)P0為起始點,P1為控制點,P2為終止點,在P0到P1的線段上作點Q0,在P1到P2的線段上作點Q1,在Q0和Q1的線段上作點Q2

    圖2 

    引入?yún)?shù)t,使以下比例成立

    求得Q2為:

    Q2=(1-t)2P0+2t(1-t)P1+

    當t的范圍在0到1時,表示由三個頂點P0、P1、P2即可描繪一條二階的貝塞爾曲線。

    ②根節(jié)點與第一層節(jié)點的連線

    為了美觀,根結(jié)點與第一層節(jié)點使用貝塞爾曲線,起始點為根節(jié)點的中心點,終止點為第一層節(jié)點的中心點,引入?yún)?shù)k1和k2,再加上起始點和終止點的坐標來求出控制點。Raphael.js的Paper.path()提供了繪制貝塞爾曲線的方法。實現(xiàn)代碼如下:

    // paper為Raphael對象,source為源節(jié)點的set集合

    // target為目標節(jié)點的set集合

    function drawCurve(paper, source, target){

    var sourceBox = source.getBBox();

    var targetBox = target.getBBox();

    //求出起始點、控制點、終止點

    var x1 =(sourceBox.x + sourceBox.x2)/2;

    var y1 =(sourceBox.y + sourceBox.y2)/2;

    var x2 =(targetBox.x + targetBox.x2)/2;

    var y2 =(targetBox.y + targetBox.y2)/2;

    var k1 = 0.8;

    var k2 = 0.2;

    var pathPoints = {

    x1: x1,

    y1: y1,

    x2: x2,

    y2: y2,

    x3: x2 - k1 *(x2 - x1),

    y3: y2 - k2 *(y2 - y1)

    };

    var edgePath = paper.path(Raphael.fullfill(

    "M{x1},{y1}Q{x3},{y3},{x2},{y2}",pathPoints)); edgePath.attr({

    'stroke': '#999',

    'stroke-width': 2

    });

    edgePath.toBack();

    return paper.set().push(edgePath);

    }

    (2)“三段連線”的繪制

    除了根節(jié)點與第一層的連線,其他連線都采用“三段連線”。如圖3所示,“三段連線”由path1、path2、path3組成,這樣的連線可以使得兩層以外的節(jié)點看起來更緊湊,更美觀。

    圖3 

    3 添加和刪除節(jié)點時節(jié)點位置渲染

    3.1添加和刪除節(jié)點時的渲染

    添加和刪除節(jié)點功能的實現(xiàn)的關(guān)鍵點在于如何計算出新增的節(jié)點及剩余節(jié)點的新的坐標位置。在該系統(tǒng)的實現(xiàn)中,某一節(jié)點的位置僅受到父節(jié)點的當前位置、兄弟節(jié)點的數(shù)目和子節(jié)點的數(shù)目的影響。當添加一個新節(jié)點的時候,需要計算出新節(jié)點的位置和新節(jié)點的兄弟節(jié)點的新位置。當刪除一個節(jié)點的時候,需要計算剩余兄弟節(jié)點的新位置。

    3.2渲染子節(jié)點的垂直位置

    當添加或刪除一個節(jié)點時,為了使該節(jié)點所在層次的所有子節(jié)點相對于父節(jié)點垂直居中,會重新渲染子節(jié)點的位置,子節(jié)點的位置具體計算方式如下。

    圖4 

    如圖4所示,設(shè)父節(jié)點的中心點F坐標為(hfx, hfy),父節(jié)點與子節(jié)點的橫向距離interval,父節(jié)點的寬為parentWidth。作水平線段FC,C點的橫坐標即為子節(jié)點的橫坐標childX。

    每個子節(jié)點上下之間都有補白padding。設(shè)area-Height的值為所有子節(jié)點的高度和補白的高度,迭代所有子節(jié)點,即可求得areaHeight。然后在線段FC的C點上作一條高度為areaHeight的垂直平分線AB。

    通過迭代子節(jié)點的高度可以求出每個子節(jié)點的垂直位置childY。設(shè)一個節(jié)點的高度加上上下補白稱為節(jié)點區(qū)域,startY為每一輪迭代中當前子節(jié)點的節(jié)點區(qū)域垂直坐標。在每一輪迭代中,當前子節(jié)點的childY等于當前子節(jié)點的startY加上一個padding。根據(jù)求得每個子節(jié)點的左上角坐標(childX, childY)即可渲染對應(yīng)子節(jié)點。實現(xiàn)代碼如下:

    function renderChild(father, padding, interval){

    var hfx, //父節(jié)點的中心x軸坐標

    hfy, //父節(jié)點的中心y軸坐標

    chilldren, //子節(jié)點數(shù)組

    childX, //子節(jié)點的x軸坐標

    startY, //子節(jié)點區(qū)域的起始坐標

    areaHeight = 0; //所有子節(jié)點的高度加補白

    hfx = father.x + interval;

    hfy = father.y + interval;

    children.forEach(function(child){

    "use strict";

    var childY = startY + padding;

    //已經(jīng)求得當前子節(jié)點坐標(childX, childY),在這里作渲染操作

    renderNode(child, childX, childY);

    startY += getNodeHeight(child)+ padding * 2;

    });

    }

    function getNodeHeight(){} //獲取節(jié)點高度

    function renderNode(node, x, y){} //渲染節(jié)點,如果節(jié)點不存在則新建節(jié)點,否則移動節(jié)

    3.3調(diào)整父節(jié)點的同級節(jié)點的垂直位置

    添加或刪除節(jié)點會影響父節(jié)點的同級節(jié)點的垂直位置。如圖5所示,當添加一個節(jié)點時,該節(jié)點的父節(jié)點的同級節(jié)點需要被“撐開”:設(shè)該節(jié)點的1/2的區(qū)域高度為moveY,父節(jié)點的同級節(jié)點中,比父節(jié)點高的向上偏移一個moveY,比其低的向下偏移一個moveY,偏移操作可以調(diào)用svg的transform方法垂直平移節(jié)點。父節(jié)點的父節(jié)點的同級節(jié)點也做相同的處理,一直遞歸到根節(jié)點為止。當刪除一個節(jié)點時,節(jié)點的父節(jié)點的同級節(jié)點會被“壓低”,“壓低”操作和上述操作相似。注意,當增加第一個子節(jié)點和刪除最后一個節(jié)點時,不會進行“撐開”或者“壓低”操作。

    圖5 

    4 拖動節(jié)點

    4.1根節(jié)點的拖動

    當拖動根節(jié)點時,整個思維導(dǎo)圖也會移動。實現(xiàn)這種效果的其中一個方案就是移動整個思維導(dǎo)圖內(nèi)的節(jié)點和連線。單個svg圖形的移動操作需要綁定mouseup、mousedown和mousemove三個事件,在移動時會不斷地觸發(fā)mousemove事件重新渲染svg圖形的位置,因此,移動svg圖形操作的性能并不高。移動單個svg對象不會有很大的性能瓶頸,但是如果一次性移動多個svg對象,在移動時會有明顯的“卡頓”感覺,嚴重影響用戶體驗。

    實現(xiàn)整個思維導(dǎo)圖移動的另一個方案就是改變svg區(qū)域的視野。在svg中,視野是觀察世界的一個矩形區(qū)域,而世界是無窮大的。當改變視野的坐標時,視野中觀察到的物體的位置看上去好像是改變了,實際上是物體在世界上的位置沒有改變,而是觀察世界的矩形區(qū)域移動到了另外一個位置。如圖6和圖7所示,一開始物體在視野內(nèi)的中央,當將視野向右下移動時,物體的位置變成了在視野內(nèi)的左上角,效果上和將整個視圖左上角拖動是一樣的。

    svg標簽提供了viewbox屬性來控制視野的范圍,而Raphale.js提供一個setViewBox的方法更便捷地控制視野。拖動根結(jié)點時改變svg視野的實現(xiàn)與上一個方案相比,既能達到拖動整個思維導(dǎo)圖的效果,性能上又能大幅度地提高。

    4.2非根節(jié)點的拖動

    本文實現(xiàn)的系統(tǒng)將拖動非根節(jié)點用于改變父子關(guān)系:節(jié)點拖動結(jié)束后,如果該節(jié)點與另一個節(jié)點重疊,則使重疊節(jié)點變?yōu)樵摴?jié)點的父節(jié)點,否則,節(jié)點回到原來的位置。

    圖6 

    圖7 

    一個節(jié)點是Raphael.js的set對象,set對象可以監(jiān)聽鼠標事件。監(jiān)聽每個非根節(jié)點的mouseup、mousemove和movedown事件,分別對應(yīng)按下鼠標、鼠標移動、放下鼠標三個狀態(tài)。在按下鼠標狀態(tài)下,會以當前節(jié)點為原型克隆一個節(jié)點用于占位。在拖動鼠標狀態(tài)下,通過改變節(jié)點的坐標實現(xiàn)節(jié)點位置改變。在放下鼠標狀態(tài)下,會判斷當前拖動的節(jié)點是否與其他節(jié)點重疊,通過Raphael.js的isBBoxIntersect函數(shù)即可判斷兩個節(jié)點是否重疊,如果重疊,則改變節(jié)點的父子關(guān)系,實現(xiàn)流程如圖8:

    圖8 

    5 結(jié)語

    本文主要闡述了如何使用SVG實現(xiàn)思維導(dǎo)圖,SVG具有對象化的特點,使得很容易地將思維導(dǎo)圖的節(jié)點與SVG對象對應(yīng)起來,且基于SVG對象所實現(xiàn)的事件機制,令繪圖時的交互實現(xiàn)變得簡單和高效。本文實現(xiàn)的系統(tǒng)將數(shù)據(jù)層和渲染層分離開來,讓數(shù)據(jù)和視圖解耦開來。本文介紹了如何繪制思維導(dǎo)圖的兩個基本元素——節(jié)點和邊;添加或刪除節(jié)點時各個節(jié)點位置都會有所改變,如何計算和渲染節(jié)點的位置是實現(xiàn)添刪節(jié)點功能的關(guān)鍵;本文還闡述了實現(xiàn)拖動節(jié)點改變父子關(guān)系的關(guān)鍵點。

    參考文獻:

    [1]高科.基于HTML5的數(shù)據(jù)可視化實現(xiàn)方法研究[J].科技傳播,2013,01:186-187.

    [2]朱文.基于HTML5Canvas技術(shù)的在線圖像處理方法的研究[D].華南理工大學,2013.

    [3]高峰,談俊忠. Java Script在基于SVG的網(wǎng)絡(luò)地圖中的應(yīng)用[J].江西師范大學學報(自然科學版),2004,03:262-265.

    [4]徐曼.基于HTML5的統(tǒng)計圖表系統(tǒng)的研究與設(shè)計[D].武漢科技大學,2012.

    [5]管英祥,任淵博,向為鋒.基于HTML Canvas的電磁態(tài)勢繪制方法[J].電腦知識與技術(shù),2015,14:68-70.

    [6]王喬俊,何原榮,李佳楠.基于SVG的旅游地圖符號庫的設(shè)計與實現(xiàn)[J].湖北科技學院學報,2015,08:21-23.

    [7]宋善德,熊展志,李衛(wèi)國,唐咸峰.基于SVG的矢量圖形編輯器的設(shè)計與實現(xiàn)[J].計算機工程與科學,2003,02:91-94.

    任志豪(1993-),男,廣東花都人,本科生,現(xiàn)就讀于華南師范大學,研究方向為軟件工程

    賴源勁(1994-),男,廣東番禺人,本科生,現(xiàn)就讀于華南師范大學,研究方向為數(shù)據(jù)庫

    Implementation of Mind Map System Based on SVG

    REN Zhi-hao,LAI Yuan-jin
    (Software College, South China Normal University, Guangzhou 501631)

    Abstract:The graphics technology which based on SVG, has characteristics of objectivity and convenient interaction, so it is suitable for the realization of the online mind map drawing. The basics functions of the mind map system based on the SVG include rendering node and edge, adding and removing nodes, changing nodes' position, dragging nodes. The key technical points of theses functions include calculating and rendering the nodes position.

    Keywords:Mind Map; SVG; Realization

    收稿日期:2015-12-31修稿日期:2016-03-02

    作者簡介:book=75,ebook=76

    文章編號:1007-1423(2016)09-0070-06

    DOI:10.3969/j.issn.1007-1423.2016.09.018

    基金項目:國家級大學生創(chuàng)新訓(xùn)練計劃(No.2014115)

    猜你喜歡
    實現(xiàn)思維導(dǎo)圖
    信息系統(tǒng)安全評價系統(tǒng)設(shè)計及實現(xiàn)
    高校聲像檔案數(shù)字化管理的實現(xiàn)路徑
    辦公室人員尚需制定個人發(fā)展規(guī)劃
    蘇州信息學院教務(wù)管理系統(tǒng)的設(shè)計與實現(xiàn)
    思維可視化技術(shù)應(yīng)用于課堂教學
    科技視界(2016年18期)2016-11-03 21:55:21
    論思維導(dǎo)圖在初中英語閱讀教學的應(yīng)用
    人間(2016年26期)2016-11-03 17:10:11
    思維導(dǎo)圖在初中物理概念課教學中的應(yīng)用
    思維導(dǎo)圖軟件輔助初中數(shù)學教學的應(yīng)用研究
    巧用思維導(dǎo)圖提高初中英語課堂教學有效性的探究
    如何實現(xiàn)人企合一
    国产精品日韩av在线免费观看| 女生性感内裤真人,穿戴方法视频| 亚洲人成网站高清观看| 变态另类丝袜制服| 美女大奶头视频| 搞女人的毛片| 久久精品国产99精品国产亚洲性色| 成熟少妇高潮喷水视频| 国产一区在线观看成人免费| 欧美日韩瑟瑟在线播放| 可以在线观看毛片的网站| 蜜桃久久精品国产亚洲av| 97超级碰碰碰精品色视频在线观看| 88av欧美| 久久久久免费精品人妻一区二区| 成年人黄色毛片网站| 长腿黑丝高跟| 日韩人妻高清精品专区| 午夜久久久久精精品| 给我免费播放毛片高清在线观看| 香蕉av资源在线| 神马国产精品三级电影在线观看| 在线a可以看的网站| 国产成人精品久久二区二区免费| 国产97色在线日韩免费| 69av精品久久久久久| 久久久国产欧美日韩av| 久久久久国产一级毛片高清牌| 色综合亚洲欧美另类图片| 少妇人妻一区二区三区视频| 中文资源天堂在线| 久久人妻av系列| 久久精品91无色码中文字幕| 国产成人精品无人区| 亚洲精品中文字幕一二三四区| 99久久久亚洲精品蜜臀av| 两个人看的免费小视频| 日本黄色片子视频| 午夜福利在线观看吧| 欧美zozozo另类| 老鸭窝网址在线观看| 亚洲激情在线av| 国产一区二区在线观看日韩 | 大型黄色视频在线免费观看| 欧美不卡视频在线免费观看| 亚洲欧美日韩东京热| 成人永久免费在线观看视频| 搞女人的毛片| 国产成+人综合+亚洲专区| 精品日产1卡2卡| 欧美日本亚洲视频在线播放| 麻豆成人av在线观看| 一卡2卡三卡四卡精品乱码亚洲| 亚洲 国产 在线| 一区二区三区激情视频| 老熟妇乱子伦视频在线观看| 色综合婷婷激情| 亚洲成av人片在线播放无| 可以在线观看毛片的网站| 制服人妻中文乱码| 一个人免费在线观看的高清视频| 欧美+亚洲+日韩+国产| 久久久久国产精品人妻aⅴ院| 在线观看免费午夜福利视频| 亚洲av美国av| 97人妻精品一区二区三区麻豆| 亚洲欧美日韩东京热| 18禁黄网站禁片午夜丰满| 综合色av麻豆| 欧美成人一区二区免费高清观看 | 制服丝袜大香蕉在线| 亚洲熟妇中文字幕五十中出| 美女高潮喷水抽搐中文字幕| 一二三四社区在线视频社区8| 99精品欧美一区二区三区四区| 欧美+亚洲+日韩+国产| 国产伦在线观看视频一区| 成熟少妇高潮喷水视频| 成年女人永久免费观看视频| 免费看a级黄色片| 真人做人爱边吃奶动态| 精品无人区乱码1区二区| e午夜精品久久久久久久| 日韩 欧美 亚洲 中文字幕| 亚洲专区中文字幕在线| 午夜日韩欧美国产| 色尼玛亚洲综合影院| 一本一本综合久久| 亚洲av熟女| 99在线人妻在线中文字幕| 午夜免费成人在线视频| 看免费av毛片| 真人一进一出gif抽搐免费| av在线天堂中文字幕| 淫秽高清视频在线观看| 免费看美女性在线毛片视频| 亚洲欧美一区二区三区黑人| av视频在线观看入口| 日本a在线网址| 啪啪无遮挡十八禁网站| 中亚洲国语对白在线视频| 日本精品一区二区三区蜜桃| 97碰自拍视频| 欧美日韩精品网址| 最近最新中文字幕大全电影3| 熟女少妇亚洲综合色aaa.| 亚洲av电影不卡..在线观看| 亚洲欧美激情综合另类| 性色avwww在线观看| 狂野欧美白嫩少妇大欣赏| 国产精品亚洲av一区麻豆| svipshipincom国产片| 制服人妻中文乱码| 国产av麻豆久久久久久久| 麻豆一二三区av精品| 亚洲自偷自拍图片 自拍| 亚洲无线观看免费| 免费看光身美女| 白带黄色成豆腐渣| 亚洲av片天天在线观看| 亚洲在线观看片| 欧美精品啪啪一区二区三区| 小蜜桃在线观看免费完整版高清| 九色国产91popny在线| 国产激情偷乱视频一区二区| 一本精品99久久精品77| 99精品久久久久人妻精品| 久久久久久久午夜电影| 精品人妻1区二区| ponron亚洲| 一本综合久久免费| 亚洲欧美激情综合另类| 国产亚洲精品久久久com| 久久中文字幕一级| 美女午夜性视频免费| 在线视频色国产色| 欧美日本亚洲视频在线播放| 日本五十路高清| 男女下面进入的视频免费午夜| 香蕉av资源在线| 天堂√8在线中文| 日韩三级视频一区二区三区| 日韩三级视频一区二区三区| 观看美女的网站| 久久精品91无色码中文字幕| 精品熟女少妇八av免费久了| 首页视频小说图片口味搜索| www.精华液| 国产单亲对白刺激| 香蕉国产在线看| 老鸭窝网址在线观看| 久久中文字幕人妻熟女| 97碰自拍视频| 亚洲专区字幕在线| 亚洲av片天天在线观看| 看片在线看免费视频| 日韩欧美在线乱码| 久久久久免费精品人妻一区二区| 久久久久久久亚洲中文字幕| 精品久久久久久久久久久久久| 青春草国产在线视频| 亚洲人与动物交配视频| 青春草国产在线视频| 久久久久性生活片| 欧美xxxx性猛交bbbb| 中文乱码字字幕精品一区二区三区 | 干丝袜人妻中文字幕| 中文字幕人妻熟人妻熟丝袜美| 秋霞伦理黄片| 伦精品一区二区三区| 欧美日韩一区二区视频在线观看视频在线 | 少妇熟女欧美另类| 99在线人妻在线中文字幕| 99久国产av精品| 一级毛片久久久久久久久女| 卡戴珊不雅视频在线播放| 好男人在线观看高清免费视频| 91在线精品国自产拍蜜月| 欧美成人a在线观看| 成人av在线播放网站| 亚洲国产精品久久男人天堂| 中文字幕人妻熟人妻熟丝袜美| 看黄色毛片网站| 国产精品一区二区三区四区免费观看| 国产午夜精品论理片| 天天躁夜夜躁狠狠久久av| 99久久精品热视频| 舔av片在线| 亚洲婷婷狠狠爱综合网| 99久久精品国产国产毛片| 99热6这里只有精品| 久久精品熟女亚洲av麻豆精品 | 简卡轻食公司| 欧美成人a在线观看| 中文字幕熟女人妻在线| 亚洲乱码一区二区免费版| 国产在线男女| 卡戴珊不雅视频在线播放| 人妻夜夜爽99麻豆av| 色5月婷婷丁香| 亚洲五月天丁香| 日韩精品青青久久久久久| .国产精品久久| 蜜桃久久精品国产亚洲av| 欧美成人一区二区免费高清观看| 淫秽高清视频在线观看| 综合色av麻豆| av又黄又爽大尺度在线免费看 | 亚洲中文字幕一区二区三区有码在线看| 麻豆成人av视频| 欧美成人精品欧美一级黄| 中国国产av一级| 2021天堂中文幕一二区在线观| 亚洲av二区三区四区| 久久亚洲国产成人精品v| 国产乱人偷精品视频| 亚洲美女搞黄在线观看| 午夜福利成人在线免费观看| 成人av在线播放网站| 简卡轻食公司| 中文字幕精品亚洲无线码一区| 好男人视频免费观看在线| 卡戴珊不雅视频在线播放| 国模一区二区三区四区视频| 一级毛片我不卡| 一本一本综合久久| 久久人人爽人人片av| 免费看日本二区| 亚洲精品一区蜜桃| 国产色爽女视频免费观看| 日韩一区二区视频免费看| 麻豆成人av视频| 在线a可以看的网站| 亚洲av日韩在线播放| 日本黄大片高清| av在线蜜桃| 纵有疾风起免费观看全集完整版 | 乱系列少妇在线播放| 亚洲精品一区蜜桃| 免费看光身美女| 国产精品国产三级专区第一集| av免费在线看不卡| 精品久久久久久久末码| a级毛色黄片| 啦啦啦韩国在线观看视频| 久久久久国产网址| 婷婷色麻豆天堂久久 | 尤物成人国产欧美一区二区三区| 一卡2卡三卡四卡精品乱码亚洲| 人妻系列 视频| 桃色一区二区三区在线观看| 亚洲美女搞黄在线观看| 亚洲人成网站高清观看| 亚洲成色77777| 91aial.com中文字幕在线观看| 国产私拍福利视频在线观看| 长腿黑丝高跟| 女人十人毛片免费观看3o分钟| 国产69精品久久久久777片| 中文字幕人妻熟人妻熟丝袜美| 精品少妇黑人巨大在线播放 | 精品久久久久久久久av| 最后的刺客免费高清国语| 又爽又黄无遮挡网站| 免费人成在线观看视频色| 夫妻性生交免费视频一级片| 97人妻精品一区二区三区麻豆| 亚洲国产欧美人成| 久久久国产成人免费| 大话2 男鬼变身卡| 三级国产精品欧美在线观看| 精品久久久久久电影网 | 亚洲精品影视一区二区三区av| 国产精品美女特级片免费视频播放器| 亚洲av免费高清在线观看| 国产真实乱freesex| 大香蕉97超碰在线| 亚洲欧美日韩高清专用| 午夜精品在线福利| 亚洲av免费高清在线观看| 成年免费大片在线观看| 韩国av在线不卡| 非洲黑人性xxxx精品又粗又长| 久久久国产成人精品二区| 高清在线视频一区二区三区 | 男的添女的下面高潮视频| 麻豆国产97在线/欧美| 日本免费a在线| 狂野欧美白嫩少妇大欣赏| 国产一区有黄有色的免费视频 | 国产精品美女特级片免费视频播放器| 免费黄网站久久成人精品| 国产亚洲精品av在线| 国内精品一区二区在线观看| 十八禁国产超污无遮挡网站| 三级男女做爰猛烈吃奶摸视频| 热99在线观看视频| 狂野欧美激情性xxxx在线观看| 国产亚洲av嫩草精品影院| 国产一区二区在线av高清观看| 久久久久久伊人网av| 嫩草影院新地址| 人妻少妇偷人精品九色| 老司机福利观看| 国产又色又爽无遮挡免| h日本视频在线播放| 婷婷色麻豆天堂久久 | 午夜福利成人在线免费观看| 欧美潮喷喷水| 亚洲成人av在线免费| 国产精品无大码| 亚洲国产欧洲综合997久久,| 日韩制服骚丝袜av| 国产精品久久久久久久电影| 国产一区二区三区av在线| av视频在线观看入口| 亚洲欧美精品综合久久99| 国产伦一二天堂av在线观看| 国产精品综合久久久久久久免费| 99久久精品热视频| 最近中文字幕高清免费大全6| 国产视频内射| 国产又色又爽无遮挡免| 国内精品美女久久久久久| 国产成人91sexporn| 99国产精品一区二区蜜桃av| 国产乱来视频区| 18+在线观看网站| 欧美精品一区二区大全| 免费电影在线观看免费观看| 少妇猛男粗大的猛烈进出视频 | 人妻夜夜爽99麻豆av| 乱人视频在线观看| 亚洲一区高清亚洲精品| 久久久久国产网址| 丰满人妻一区二区三区视频av| 午夜福利视频1000在线观看| 中文在线观看免费www的网站| 精品一区二区三区人妻视频| 久久精品影院6| 99久国产av精品| 成人美女网站在线观看视频| 身体一侧抽搐| 国国产精品蜜臀av免费| 国产精品一区www在线观看| 日韩成人伦理影院| 纵有疾风起免费观看全集完整版 | 白带黄色成豆腐渣| av在线观看视频网站免费| 免费大片18禁| 极品教师在线视频| 伦理电影大哥的女人| 最近最新中文字幕免费大全7| 2021少妇久久久久久久久久久| 麻豆乱淫一区二区| 91精品一卡2卡3卡4卡| 99久久精品热视频| 热99re8久久精品国产| 亚洲国产精品合色在线| 日产精品乱码卡一卡2卡三| 狂野欧美激情性xxxx在线观看| 成人av在线播放网站| 精品久久久久久久人妻蜜臀av| 亚洲精品久久久久久婷婷小说 | 91精品伊人久久大香线蕉| 精品99又大又爽又粗少妇毛片| 国产精品1区2区在线观看.| 亚洲怡红院男人天堂| 欧美xxxx黑人xx丫x性爽| 国产又黄又爽又无遮挡在线| 全区人妻精品视频| 亚洲av成人av| 99热6这里只有精品| 午夜视频国产福利| 边亲边吃奶的免费视频| 少妇的逼好多水| 最近2019中文字幕mv第一页| 国产伦在线观看视频一区| 久久亚洲精品不卡| 卡戴珊不雅视频在线播放| 久久精品国产鲁丝片午夜精品| 国产午夜精品论理片| 国产av在哪里看| 国产私拍福利视频在线观看| 春色校园在线视频观看| 一级爰片在线观看| 男的添女的下面高潮视频| 国产高清国产精品国产三级 | 国产精品美女特级片免费视频播放器| 91精品国产九色| 九草在线视频观看| 日韩中字成人| 亚洲国产精品成人综合色| 又爽又黄a免费视频| 欧美一区二区精品小视频在线| 美女xxoo啪啪120秒动态图| 又爽又黄无遮挡网站| 精品酒店卫生间| 亚洲av免费在线观看| 91久久精品国产一区二区成人| 91久久精品国产一区二区成人| av线在线观看网站| 网址你懂的国产日韩在线| av又黄又爽大尺度在线免费看 | 乱码一卡2卡4卡精品| 久久精品人妻少妇| 日韩av在线大香蕉| 一级爰片在线观看| 汤姆久久久久久久影院中文字幕 | 国产亚洲5aaaaa淫片| 毛片一级片免费看久久久久| 亚洲天堂国产精品一区在线| 在线观看av片永久免费下载| 免费大片18禁| 日本三级黄在线观看| 亚洲精品aⅴ在线观看| 一夜夜www| 国产高清三级在线| av在线观看视频网站免费| 亚洲婷婷狠狠爱综合网| 国产午夜精品一二区理论片| 99久久精品热视频| 天美传媒精品一区二区| 日韩欧美国产在线观看| 亚洲精品自拍成人| 欧美成人a在线观看| 成人一区二区视频在线观看| 亚洲欧美日韩无卡精品| 熟妇人妻久久中文字幕3abv| 免费播放大片免费观看视频在线观看 | 淫秽高清视频在线观看| 99久久成人亚洲精品观看| av.在线天堂| 欧美一区二区亚洲| 国产大屁股一区二区在线视频| 男人舔奶头视频| 69人妻影院| 国产又黄又爽又无遮挡在线| 久久久久久九九精品二区国产| 18禁在线播放成人免费| 亚洲天堂国产精品一区在线| 亚洲精品自拍成人| av卡一久久| 99热这里只有是精品50| av在线观看视频网站免费| 久久午夜福利片| 欧美潮喷喷水| 亚洲成人精品中文字幕电影| 91在线精品国自产拍蜜月| 国产 一区 欧美 日韩| 神马国产精品三级电影在线观看| 色播亚洲综合网| 亚洲在线自拍视频| 中文天堂在线官网| 日韩成人av中文字幕在线观看| 婷婷六月久久综合丁香| 国产成人福利小说| 桃色一区二区三区在线观看| 亚洲电影在线观看av| 乱人视频在线观看| 国产色婷婷99| 一级黄片播放器| 全区人妻精品视频| 久久人人爽人人爽人人片va| 综合色av麻豆| 国产成人aa在线观看| 欧美不卡视频在线免费观看| 色哟哟·www| 久热久热在线精品观看| 九九在线视频观看精品| 97在线视频观看| 如何舔出高潮| 国产三级中文精品| 成人漫画全彩无遮挡| 丝袜喷水一区| 22中文网久久字幕| 性色avwww在线观看| 国产精品电影一区二区三区| 国产三级在线视频| 丰满少妇做爰视频| 亚洲国产日韩欧美精品在线观看| 久久精品久久久久久噜噜老黄 | av视频在线观看入口| 日韩欧美国产在线观看| 深夜a级毛片| 一本一本综合久久| 黄色日韩在线| av在线天堂中文字幕| 晚上一个人看的免费电影| 我的老师免费观看完整版| 99九九线精品视频在线观看视频| 国产又黄又爽又无遮挡在线| 两性午夜刺激爽爽歪歪视频在线观看| av在线观看视频网站免费| 女人十人毛片免费观看3o分钟| 大又大粗又爽又黄少妇毛片口| 精品人妻视频免费看| 欧美成人a在线观看| 国产亚洲av片在线观看秒播厂 | 欧美性猛交╳xxx乱大交人| 秋霞在线观看毛片| 成年女人看的毛片在线观看| 精品久久国产蜜桃| 国产久久久一区二区三区| 成人亚洲欧美一区二区av| 最近中文字幕高清免费大全6| 老师上课跳d突然被开到最大视频| 国产熟女欧美一区二区| 亚洲国产欧美在线一区| 建设人人有责人人尽责人人享有的 | av在线蜜桃| 久久久久久国产a免费观看| 欧美3d第一页| 国内少妇人妻偷人精品xxx网站| 久久99热这里只频精品6学生 | 久久人妻av系列| 91aial.com中文字幕在线观看| 亚洲国产精品成人综合色| 久久久精品大字幕| 美女大奶头视频| 久久精品国产亚洲网站| 精品酒店卫生间| 我要搜黄色片| 成人无遮挡网站| 精品不卡国产一区二区三区| 国产黄片视频在线免费观看| 日韩欧美国产在线观看| 在线观看av片永久免费下载| 亚洲av成人精品一二三区| 2021少妇久久久久久久久久久| 久久久亚洲精品成人影院| 日韩欧美 国产精品| 精品久久久久久久久亚洲| 一本久久精品| 久久精品国产鲁丝片午夜精品| 日韩精品青青久久久久久| 欧美成人a在线观看| 亚洲精品乱码久久久v下载方式| 边亲边吃奶的免费视频| 天美传媒精品一区二区| 久久这里有精品视频免费| 色噜噜av男人的天堂激情| 99久国产av精品| 日本免费在线观看一区| 男女边吃奶边做爰视频| 午夜福利在线观看吧| 老司机福利观看| 国产成人精品久久久久久| 欧美激情在线99| 日韩一区二区三区影片| 在线a可以看的网站| 一区二区三区四区激情视频| av专区在线播放| 26uuu在线亚洲综合色| 狂野欧美白嫩少妇大欣赏| 大香蕉久久网| or卡值多少钱| 精品99又大又爽又粗少妇毛片| 日本五十路高清| 美女内射精品一级片tv| 国产成人一区二区在线| 七月丁香在线播放| 国产黄色视频一区二区在线观看 | 国产乱来视频区| 日本黄大片高清| 日韩成人av中文字幕在线观看| 少妇的逼水好多| 国产私拍福利视频在线观看| 一本一本综合久久| 两性午夜刺激爽爽歪歪视频在线观看| 亚洲精品色激情综合| 久久久久久久国产电影| 国产伦一二天堂av在线观看| 国产精品人妻久久久影院| 少妇熟女欧美另类| 久久精品人妻少妇| 亚洲国产色片| 黄色一级大片看看| 日日摸夜夜添夜夜爱| 赤兔流量卡办理| 亚洲精品乱久久久久久| 久久99热6这里只有精品| 成人毛片a级毛片在线播放| 午夜亚洲福利在线播放| 精品久久久久久久人妻蜜臀av| 婷婷六月久久综合丁香| 中文字幕亚洲精品专区| 小说图片视频综合网站| av视频在线观看入口| 成人二区视频| 一个人看视频在线观看www免费| 五月玫瑰六月丁香| 建设人人有责人人尽责人人享有的 | 干丝袜人妻中文字幕| 国产成人一区二区在线| 国产精品国产三级国产av玫瑰| 蜜桃久久精品国产亚洲av| 自拍偷自拍亚洲精品老妇| 一级毛片我不卡| 两性午夜刺激爽爽歪歪视频在线观看| 亚洲成人中文字幕在线播放| 午夜激情福利司机影院| 小说图片视频综合网站| 淫秽高清视频在线观看| 精品国内亚洲2022精品成人| 村上凉子中文字幕在线| 国产成人aa在线观看| 亚洲av二区三区四区| 久久精品久久精品一区二区三区| 内射极品少妇av片p| 国产国拍精品亚洲av在线观看| 国产单亲对白刺激| 91av网一区二区| 国产视频内射| 国产免费一级a男人的天堂|