精品女厕厕露p撒尿,欧美日韩成人综合在线一区二区,午夜精品影院在线观看

版權(quán)所有： (xiaodaoxiaodao) 藍(lán)小刀 ?? xiaodaoxiaodao@gmail.com

http://www.aygfsteel.com/xiaodaoxiaodao/articles/103445.html

轉(zhuǎn)載請(qǐng)注明來(lái)源 / 作者

鼠標(biāo)拖曳實(shí)現(xiàn) svg 矩形的任意切分

關(guān)于SVG查看需要裝一個(gè)瀏覽器插件，可以從adobe網(wǎng)站下載

http://www.adobe.com/svg/viewer/install/mainframed.html

最近要實(shí)現(xiàn)一個(gè)關(guān)于矩形任意拆分的問題，當(dāng)鼠標(biāo)在矩形上拖曳一段長(zhǎng)度松開，要求矩形可以被切分成兩塊，實(shí)現(xiàn)原理很簡(jiǎn)單，就是切分前是一個(gè)矩形，切分后根據(jù)鼠標(biāo)起始和結(jié)束坐標(biāo)生成兩個(gè)多邊形。

中間有個(gè)問題稍微麻煩一點(diǎn)，就是鼠標(biāo)在矩形內(nèi)部拖曳時(shí)，我只能得到它在矩形內(nèi)部的起始和結(jié)束坐標(biāo)，而實(shí)際切分時(shí)要知道切分后邊界的坐標(biāo)，所以在實(shí)際中要用斜率去計(jì)算切分后邊界的坐標(biāo)，用var xbegin = 0;var ybegin = 0;var xend = 0;var yend = 0; 來(lái)表示。

本來(lái)想給代碼加一點(diǎn)注釋，可注釋成中文總是提示報(bào)錯(cuò)，后來(lái)查到SVG對(duì)中文的支持不是很好，搞了半天也沒有搞好，所以下面的注釋只能用e文來(lái)寫，呵呵，e文太差，注釋省略很多了，代碼copy下來(lái)就可以跑了。

<script><![CDATA[

// record the coordinates on mousedown and mouseup event in rect element

var xbefore = 0;

var ybefore = 0;

var xafter = 0;

var yafter = 0;

// count the coordinates to do split_event

var xbegin = 0;

var ybegin = 0;

var xend = 0;

var yend = 0;

// properties value of rect element

var x = 50;

var y = 50;

var w = 100;

var h = 50;

// move step after one rect splitted into two polygons

var step = 5;

function creat_event(evt){

??? svgdoc = evt.target.ownerDocument;

??? node = svgdoc.createElement('rect');

??? node.setAttribute('x',x);node.setAttribute('y',y);

??? node.setAttribute('width',w);node.setAttribute('height',h);

??? node.setAttribute('style','fill:red');

??? node.addEventListener('mousedown',store_before,false);

??? node.addEventListener('mouseup',store_after,false);

??? ou = svgdoc.getElementById('graph');

??? ou.appendChild(node);

}

function split_event(evt){

??? svgdoc = evt.target.ownerDocument;

??? ou = svgdoc.getElementById('graph');

??? objet = evt.target;

??? // when do click event no action should be executed

??? if(xbefore != xafter){

??? // remove the origin rect object

??? ou.removeChild(objet);

??? var k = (yafter - ybefore)/(xafter - xbefore);

??? xbegin = xafter + (y - yafter)/k;

??? xend = xafter + ((y + h) - yafter)/k;

??? if(xend <= x && (xbegin >=x && xbegin <=(x + w)) ){

??? ??? xend = x;

??? ??? yend = yafter + (xend - xafter)*k;

??? ??? var coordinate1 = x + ',' + y + ' ' + xbegin + ',' + y + ' '

??????? ??? + xend + ',' + yend;

??? ??? var coordinate2 = (xbegin + step) + ',' + y + ' ' + ( x + w + step) + ',' + y + ' '

??????? ??? + (x + w + step) + ',' + (y + h) + ' ' + ?(xend + step) + ',' + (y + h)+ ' '

??????? ??? + (xend+step) + ',' + yend;

??? ??? node1 = svgdoc.createElement('polygon');

??? ??? node1.setAttribute('points',coordinate1);

??? ??? node1.setAttribute('style','fill:red');

??? ??? node2 = svgdoc.createElement('polygon');

??? ??? node2.setAttribute('points',coordinate2);

??? ??? node2.setAttribute('style','fill:blue');

??? }else if(xend >= (x+w) && (xbegin >=x && xbegin <=(x + w)) ){

??? ??? xend = x + w;

??? ??? yend = yafter + (xend - xafter)*k;

??? ??? var coordinate1 = xbegin + ',' + y + ' ' + (x + w) + ',' + y + ' '

??????? ??? + (x + w) + ',' + yend;

??? ??? var coordinate2 = (xbegin - step) + ',' + y + ' ' + ( x - step) + ',' + y + ' '

??????? ??? + (x - step) + ',' + (y + h) + ' ' + ?(xend - step) + ',' + (y + h)+ ' '

??????? ??? + (xend - step) + ',' + yend;

??? ??? node1 = svgdoc.createElement('polygon');

??? ??? node1.setAttribute('points',coordinate1);

??? ??? node1.setAttribute('style','fill:red');

??? ??? node2 = svgdoc.createElement('polygon');

??? ??? node2.setAttribute('points',coordinate2);

??? ??? node2.setAttribute('style','fill:blue');

??? }else if(xend <= x && (xbegin >(x + w)) ){

??? ??? // the logic of this else block is the same as the next

??? ??? xbegin = x + w;

??? ??? xend = x;

??? ??? ybegin = yafter + (xbegin - xafter)*k;

??? ??? yend = yafter + (xend - xafter)*k;

??? ??? var coordinate1 = x + ',' + y + ' ' + xbegin + ',' + y + ' '

??????? ??? + xbegin + ',' + ybegin + ' ' + ?xend + ',' + yend;

??? ??? var coordinate2 = x + ',' + (yend + step) + ' ' + xbegin + ',' + (ybegin + step) + ' '

??????? ??? + xbegin + ',' + (y + h + step) + ' ' + xend + ',' + (y + h + step);

??? ??? node1 = svgdoc.createElement('polygon');

??? ??? node1.setAttribute('points',coordinate1);

??? ??? node1.setAttribute('style','fill:red');

??? ??? node2 = svgdoc.createElement('polygon');

??? ??? node2.setAttribute('points',coordinate2);

??? ??? node2.setAttribute('style','fill:blue');

??? }else if(xend >= (x+w) && (xbegin < x) ){

??? ??? xbegin = x + w;

??? ??? xend = x;

??? ??? ybegin = yafter + (xbegin - xafter)*k;

??? ??? yend = yafter + (xend - xafter)*k;

??? ??? var coordinate1 = x + ',' + y + ' ' + xbegin + ',' + y + ' '

??????? ??? + xbegin + ',' + ybegin + ' ' + ?xend + ',' + yend;

??? ??? var coordinate2 = x + ',' + (yend + step) + ' ' + xbegin + ',' + (ybegin + step) + ' '

??????? ??? + xbegin + ',' + (y + h + step) + ' ' + xend + ',' + (y + h + step);

??? ??? node1 = svgdoc.createElement('polygon');

??? ??? node1.setAttribute('points',coordinate1);

??? ??? node1.setAttribute('style','fill:red');

??? ??? node2 = svgdoc.createElement('polygon');

??? ??? node2.setAttribute('points',coordinate2);

??? ??? node2.setAttribute('style','fill:blue');

??? }else if( (xend >=x && xend <=(x + w)) && (xbegin >(x + w)) ){

??? ??? xbegin = x + w;

??? ??? ybegin = yafter + (xbegin - xafter)*k;

??? ??? var coordinate1 = xbegin + ',' + ybegin + ' ' + (x + w) + ',' + (y + h) + ' '

??????? ??? + xend + ',' + (y + h);

??? ??? var coordinate2 = (x - step) + ',' + y + ' ' + ( x + w - step) + ',' + y + ' '

??????? ??? + (x + w - step) + ',' + ybegin + ' ' + ?(xend - step) + ',' + (y + h)+ ' '

??????? ??? + (x - step) + ',' + (y + h);

??? ??? node1 = svgdoc.createElement('polygon');

??? ??? node1.setAttribute('points',coordinate1);

??? ??? node1.setAttribute('style','fill:red');

??? ??? node2 = svgdoc.createElement('polygon');

??? ??? node2.setAttribute('points',coordinate2);

??? ??? node2.setAttribute('style','fill:blue');

??? }else if( (xend >=x && xend <=(x + w)) && xbegin <x ){

??? ??? xbegin = x;

??? ??? ybegin = yafter + (xbegin - xafter)*k;

??? ??? var coordinate1 = x + ',' + ybegin + ' ' + xend + ',' + (y + h) + ' '

??????? ??? + x + ',' + (y + h);

??? ??? var coordinate2 = (x + step) + ',' + y + ' ' + ( x + w + step) + ',' + y + ' '

??????? ??? + (x + w + step) + ',' + (y + h) + ' ' + ?(xend + step) + ',' + (y + h)+ ' '

??????? ??? + (xbegin + step) + ',' + ybegin;

??? ??? node1 = svgdoc.createElement('polygon');

??? ??? node1.setAttribute('points',coordinate1);

??? ??? node1.setAttribute('style','fill:red');

??? ??? node2 = svgdoc.createElement('polygon');

??? ??? node2.setAttribute('points',coordinate2);

??? ??? node2.setAttribute('style','fill:blue');

??? }else{

??? ??? var coordinate1 = x + ',' + y + ' ' + xbegin + ',' + y + ' '

??????? ??? + xend + ',' + (y + h) + ' ' + ?x + ',' + (y + h);

??? ??? var coordinate2 = (xbegin + step) + ',' + y + ' ' + ( x + w + step) + ',' + y + ' '

??????? ??? + (x + w + step) + ',' + (y + h) + ' ' + (xend + step) + ',' + (y + h);

??? ??? node1 = svgdoc.createElement('polygon');

??? ??? node1.setAttribute('points',coordinate1);

??? ??? node1.setAttribute('style','fill:red');

??? ??? node2 = svgdoc.createElement('polygon');

??? ??? node2.setAttribute('points',coordinate2);

??? ??? node2.setAttribute('style','fill:blue');

??? }

??? ou = svgdoc.getElementById('graph');

??? // create two new polygons

??? ou.appendChild(node1);

??? ou.appendChild(node2);

??? }

}

function store_before(evt){

??? // reset before value in case of doing mousedown event inside the rect element more times

??? xbefore = 0;

??? ybefore = 0;

??? if(xbefore == 0 && ybefore == 0){

??? ??? xbefore = evt.clientX;

??? ??? ybefore = evt.clientY;

??? ??? //alert(xbefore + '*' + ybefore);

??? }

}

function store_after(evt){

??? // reset after value in case of doing mousedown event inside the rect element more times

??? xafter = 0;

??? yafter = 0;

??? if(xafter == 0 && yafter == 0){

??? ??? xafter = evt.clientX;

??? ??? yafter = evt.clientY;

??? ??? //alert(xafter + '*' + yafter);

??? }

??? split_event(evt);

}

]]></script>

Mouse down and up inside the red rectangle then it will be splitted</text>

</g>

</svg>

版權(quán)所有： (xiaodaoxiaodao) 藍(lán)小刀 ?? xiaodaoxiaodao@gmail.com

發(fā)表于 2006-09-16 03:58 藍(lán)小刀閱讀(330) 評(píng)論(0) 編輯收藏所屬分類: 技術(shù)相關(guān)

鼠標(biāo)拖曳實(shí)現(xiàn)svg矩形的任意切分

公告

留言簿(6)

隨筆分類(53)

隨筆檔案(42)

往日空間，棄之可惜

藍(lán)小刀個(gè)人空間

最新隨筆

搜索

積分與排名

最新評(píng)論

閱讀排行榜

評(píng)論排行榜

xiaodaoxiaodao——藍(lán)小刀的自言自語(yǔ) 黑夜給了我寂寞的心情，我卻用它來(lái)尋找愛情~~
BlogJava \| 首頁(yè) \| 發(fā)新隨筆 \| 發(fā)新文章 \| 聯(lián)系 \| 聚合 \| 管理	隨筆：42 文章：0 評(píng)論：228 引用：0