鼠标拖曳实现svg矩形的任意切分

http://www.blogjava.net/xiaodaoxiaodao/articles/103445.html

转载请注明来源 / 作者

鼠标拖曳实现 svg 矩形的任意切分

关于SVG查看需要装一个浏览器插件，可以从adobe网站下载

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

最近要实现一个关于矩形任意拆分的问题，当鼠标在矩形上拖曳一段长度松开，要求矩形可以被切分成两块，实现原理很简单，就是切分前是一个矩形，切分后根据鼠标起始和结束坐标生成两个多边形。

中间有个问题稍微麻烦一点，就是鼠标在矩形内部拖曳时，我只能得到它在矩形内部的起始和结束坐标，而实际切分时要知道切分后边界的坐标，所以在实际中要用斜率去计算切分后边界的坐标，用var xbegin = 0;var ybegin = 0;var xend = 0;var yend = 0; 来表示。

本来想给代码加一点注释，可注释成中文总是提示报错，后来查到SVG对中文的支持不是很好，搞了半天也没有搞好，所以下面的注释只能用e文来写，呵呵，e文太差，注释省略很多了，代码copy下来就可以跑了。

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

发表于 2006-09-16 03:58 蓝小刀阅读(326) 评论(0) 编辑收藏所属分类: 技术相关

公告

留言簿(6)

随笔分类(53)

随笔档案(42)

往日空间，弃之可惜

蓝小刀个人空间

最新随笔

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜

xiaodaoxiaodao——蓝小刀的自言自语黑夜给了我寂寞的心情，我却用它来寻找爱情~~
BlogJava \| 首页 \| 发新随笔 \| 发新文章 \| 联系 \| 聚合 \| 管理	随笔：42 文章：0 评论：228 引用：0