<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript" src="raphael.inline_text_editing.js"></script>
<script type="text/javascript">
$(function(){
//定义全局变量，用于存放数据
var rectHeight = 50;//默认矩形的高度为50px
var rectIndex = 0;//默认矩形列表的下标为0
var rectList = new Array();//装所有矩形类的集合
var paper = Raphael("holder", 620, 420),discattr={fill:"red", stroke:"none"};
//矩形
$("#draw_rect").click(function(){
var startX = 130;//外部矩形起点的横坐标
var rectW = 200;//外部矩形的宽
var rectH = 50;//外部矩形的高
var rectBorderSize = 1;//外部矩形的边框大小
var leftText = "双击输入文字";
var rightText = "双击输入数字";
var rectStr = "1@"+startX+"_"+rectHeight+"_"+(startX+rectW)+"_"+(rectHeight+rectH)+"_"+leftText+"_"+rightText+"";
listAdd(rectList,rectStr);
//画布,外部矩形横坐标,外部矩形纵坐标,外部矩形的宽,外部矩形的高,内部矩形的宽，内部矩形的高,外部矩形的边框大小,
//矩形列表的下标,左边文字,右边文字,左上角横坐标，左上角纵坐标,右上角横坐标，右上角纵坐标
var entity = new EntityBar(paper, startX, rectHeight, rectW, rectH,11,11,rectBorderSize,rectIndex,leftText,rightText,startX,rectHeight,startX+rectW,rectHeight+rectH);
rectHeight += 80;//每个矩形的创建位置间距，默认80px,可更具实际情况修改
rectIndex += 1;//每增加一个矩形列表的下标加1
});
/*
* 画矩形
* params:画布,外部矩形横坐标,外部矩形纵坐标,外部矩形的宽,外部矩形的高,内部矩形的宽，内部矩形的高,
* 矩形列表的下标,左边文字,右边文字,左上角横坐标，左上角纵坐标,右上角横坐标，右上角纵坐标
*/
function EntityBar(paper, startX , startY , outW, outH , inW ,inH , outBorderSize , rectIndex,leftText,rightText,leftX,leftY,rightX,rightY){
var rectString = "";
//创建内部矩形
var inRect = paper.rect(startX+outW-inW, startY+outH-inH , inW-outBorderSize , inH-outBorderSize).attr({"fill":"none","stroke":"#fff",'stroke-width':'0','cursor':'se-resize'}).drag(inMove,inStartMove,inEndMove).toBack();
//创建矩形右边文字(数字)
var rect_right_text = paper.text(outW, startY, rightText).attr({'text-anchor': 'start', 'font-size': '18px'}).transform(['t', 130, 20]);
paper.inlineTextEditing(rect_right_text);
rect_right_text.dblclick(function(){
// Retrieve created <input type=text> field
var input = this.inlineTextEditing.startEditing();
input.addEventListener("blur", function(e){
// Stop inline editing after blur on the text field
rect_right_text.inlineTextEditing.stopEditing();
//文字发生改变时,修改矩形列表中对应下标元素的值
rightText = rect_right_text.attr("text");
rectString = "1@"+leftX+"_"+leftY+"_"+rightX+"_"+rightY+"_"+leftText+"_"+rightText+"";
rectList[rectIndex] = rectString;
}, true);
});
//创建矩形左边文字(名字)
var rect_left_text = paper.text(10, startY, leftText).attr({'text-anchor': 'start', 'font-size': '18px'}).transform(['t', 0, 20]);
paper.inlineTextEditing(rect_left_text);
rect_left_text.dblclick(function(){
// Retrieve created <input type=text> field
var input = this.inlineTextEditing.startEditing();
input.addEventListener("blur", function(e){
// Stop inline editing after blur on the text field
rect_left_text.inlineTextEditing.stopEditing();
//文字发生改变时,修改矩形列表中对应下标元素的值
leftText = rect_left_text.attr("text");
rectString = "1@"+leftX+"_"+leftY+"_"+rightX+"_"+rightY+"_"+leftText+"_"+rightText+"";
rectList[rectIndex] = rectString;
}, true);
});
//创建外部矩形
var outRect = paper.rect(startX, startY , outW , outH).attr({'fill':'white', 'stroke':'#666','stroke-width':outBorderSize}).data({"cooperative":inRect,"rt_right_text":rect_right_text,"rt_left_text":rect_left_text}).drag(outMove,outStartMove,outEndMove).toBack();
//对文字的操作
var rect_right_text_x = 0;//定义变量，存放矩形右边文字的x坐标
var rect_right_text_y = 0;//定义变量，存放矩形右边文字的y坐标
var rect_left_text_x = 0;//定义变量，存放矩形左边文字的x坐标
var rect_left_text_y = 0;//定义变量，存放矩形左边文字的y坐标
/*
* 定义拖动外部矩形的开始移动，移动和结束移动事件
* 注：dx：相对起始点的x位移,dy:相对起始点的y位移,x:鼠标的 x轴位置,y:鼠标的 y轴位置,event:DOM事件对象,e.clientX:当前鼠标x坐标,e.clientY：当前鼠标Y坐标
*/
function outStartMove(dx,dy){
//为元素(外部矩形outRect)自定义属性并赋值
this.tempx = this.attr("x");
this.tempy = this.attr("y");
//拖动元素之前,保存文本text的位子,方便拖动时文字像素的计算
rect_right_text_x = rect_right_text.attr('x');
rect_right_text_y = rect_right_text.attr('y');
rect_left_text_x = rect_left_text.attr('x');
rect_left_text_y = rect_left_text.attr('y');
}
function outMove(dx,dy,x,y){
//拖动外部矩形时改变外部矩形的位置
var attr = {
'x': this.tempx + dx,
'y': this.tempy + dy
};
this.attr(attr);
//获取存放的数据对象
var temp_rect = this.data("cooperative");
//拖动外部矩形时改变内部矩形的位置
var temp_attr = {
x: this.tempx + dx + this.attr("width") -inW,
y: this.tempy + dy + this.attr("height") -inH
};
temp_rect.attr(temp_attr);
//更新可输入文本框的位置
rect_right_text.attr({'x': rect_right_text_x + dx});
rect_right_text.attr({'y': rect_right_text_y + dy});
rect_left_text.attr({'x': rect_left_text_x + dx});
rect_left_text.attr({'y': rect_left_text_y + dy});
}
function outEndMove(){
this.animate({"fill-opacity": 1}, 300);
if(this.attr("x")>600){
if(confirm("确定要删除该元素？")){
var mm = this.getBBox();
this.remove();
inRect.remove();
rect_right_text.remove();
rect_left_text.remove();
}else{
alert("你选择了不删除");
}
}
}
//对内部矩形的操作
var beforeMoveX_in = 0;//拖动内部矩形之前内部矩形的X坐标点
var beforeMoveY_in = 0;//拖动内部矩形之前内部矩形的Y坐标点
var beforeMoveW_out = 0;//拖动内部矩形之前外部矩形的宽度
var beforeMoveH_out = 0;//拖动内部矩形之前外部矩形的高度
/*
* 定义拖动内部矩形的开始移动，移动和结束移动事件
*/
function inStartMove(){
//为当前元素(矩形inRect)自定义属性并赋值
this.mx = this.attr("x");
this.my = this.attr("y");
//获取内部矩形拖动之前的x坐标并赋值给变量beforeMoveX_in
beforeMoveX_in = this.attr("x");
//获取内部矩形拖动之前的y坐标并赋值给变量beforeMoveY_in
beforeMoveY_in = this.attr("y");
//获取内部矩形拖动之前外部矩形的宽度
beforeMoveW_out = outRect.attr("width");
//获取内部矩形拖动之前外部矩形的高度
beforeMoveH_out = outRect.attr("height");
}
function inMove(dx,dy,x,y){
//当拖动内部矩形时，改变外部矩形的宽高
outRect.attr({
'width' : beforeMoveW_out + dx,//拖动后的宽度 = 拖动前的宽度 + x轴的位移
'height' : beforeMoveH_out + dy//拖动后的高度 = 拖动前的高度 + y轴的位移
});
//对内部矩形重新定位
this.attr('x',x - inW);
this.attr('y',y - inH);
//更新可输入文本框的位置
rect_right_text.attr({'x': x-startX});
$("#bar_x").val(beforeMoveW_out + dx);
$("#bar_y").val(beforeMoveH_out + dy);
}
function inEndMove(e){
//拖动结束时，重新改变外部矩形的宽高
outRect.attr({
'width' : beforeMoveW_out + (e.clientX-beforeMoveX_in)-inW,
'height' : beforeMoveH_out + (e.clientY-beforeMoveY_in)-inH
});
//当外部矩形的位置发生改变时,修改矩形列表中对应下标元素的值
- 1
- 2
- 3
- 4
- 5
- 6
前往页