ASP.NET 多媒体电子报刊设计（二）
在将PDF转换为一张一张图片之后，我们现在可以对每张图片进行矩形定位，也就是对每个图片里面的所有新闻进行定位。
一个矩形具有4个坐标点，我们在后期需要使用VML将其勾画出来，然后通过JS的控制，当移动到某个矩形里面的时候，才现在该矩形。因此，在这一步骤需要保存VML勾画的Point，以及X轴的最小值和最大值，还有Y轴的最小值和最大值。
HTML代码如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>编辑报刊</title>
<script language="javascript" type="text/javascript">
function ShowTechPaperDetails(val)
{
var varTechPaperName = document.getElementById("txtTechPaperName").value;
var varTechPaperDName = val;
var varTechPaperDId = document.getElementById(val).title;
document.getElementById("txtTechPaperDId").value = varTechPaperDId;
var varImageUrl = "TechheroPaper/"+varTechPaperName+"/"+varTechPaperDName;
document.getElementById("divRight").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+varImageUrl+"',sizingMethod= 'scale')";
varRectCount = 0;
document.getElementById("divPaper").innerHTML = "";
document.getElementById("divRight").innerHTML = "";
}
var varRectCount = 0;
var Rect = {
//当前正在画的矩形对象
obj: null,
//画布
container: null,
//初始化函数
init: function(containerId){
Rect.container = document.getElementById(containerId);
if(Rect.container){
//鼠标按下时开始画
Rect.container.onmousedown = Rect.start;
}
else{
alert('不存在该区域!');
}
},
start: function(e){
//矩形计数变量
varRectCount = varRectCount + 1;
var o = Rect.obj = document.createElement('div');
o.style.position = "absolute";
//mouseBeginX，mouseBeginY是辅助变量，记录下鼠标按下时的位置
o.style.left = o.mouseBeginX = Rect.getEvent(e).x;
o.style.top = o.mouseBeginY = Rect.getEvent(e).y;
o.id = "divRect"+varRectCount;//矩形ID
o.mouseBeginOffSetX = event.offsetX;
o.mouseBeginOffSetY = event.offsetY;
o.style.height = 0;
o.style.width = 0;
o.style.border = "solid red 1px";
//向o添加一个叉叉，点击叉叉可以删除这个矩形
var deleteLink = document.createElement('a');
deleteLink.id = "del"+varRectCount;
deleteLink.href = "#";
deleteLink.style.fontSize = "20px";
deleteLink.onclick = function(){
Rect.container.removeChild(this.parentNode);
//varRectCount = varRectCount - 1;
var varDivPointId = "divPoint"+this.id.substr(3);
var varDivPoint = document.getElementById(varDivPointId);
document.getElementById("divPaper").removeChild(varDivPoint);
//this.parentNode.style.display = "none";
//alert(this.tagName);
}
deleteLink.innerText = "x";
o.appendChild(deleteLink);
//把当前画出的对象加入到画布中
Rect.container.appendChild(o);
//处理onmousemove事件
Rect.container.onmousemove = Rect.move;
//处理onmouseup事件
Rect.container.onmouseup = Rect.end;
},
move: function(e){
var o = Rect.obj;
//dx，dy是鼠标移动的距离
var dx = Rect.getEvent(e).x - o.mouseBeginX;
var dy = Rect.getEvent(e).y - o.mouseBeginY;
//如果dx，dy <0，说明鼠标朝左上角移动，需要做特别的处理
if(dx<0){
o.style.left = Rect.getEvent(e).x;
}
if(dy<0){
o.style.top = Rect.getEvent(e).y;
}
o.style.height = Math.abs(dy);
o.style.width = Math.abs(dx);
},
end: function(e){
//在新增一个矩形焦点时候同时记录起始坐标点
var o = Rect.obj;
var varDivPoint = document.createElement("<div id='divPoint"+varRectCount+"'></div>");
var varPoint = document.createElement("<input type='text' style='width:300px;' />");
var varBr = document.createElement("<br />");
var varPointX1 = document.createElement("<input type='text' />");
var varPointX2 = document.createElement("<input type='text' />");
var varPointY1 = document.createElement("<input type='text' />");
var varPointY2 = document.createElement("<input type='text' />");
var varTechPaperRName = document.createElement("<input type='text' />");
//获取divRight的top以及left
var varRightTop = document.getElementById("divRight").offsetTop;
var varRightLeft = document.getElementById("divRight").offsetLeft;
var varX = event.x - varRightLeft;
var varY = event.y - varRightTop;
varPoint.value = o.mouseBeginOffSetX+","+o.mouseBeginOffSetY+" "
+varX+","+o.mouseBeginOffSetY+" "
+varX+","+varY+" "
+o.mouseBeginOffSetX+","+varY+" "
+o.mouseBeginOffSetX+","+o.mouseBeginOffSetY;
varPointX1.value = o.mouseBeginOffSetX;//X最小值
varPointX2.value = varX;//X最大值
varPointY1.value = o.mouseBeginOffSetY;//Y最小值
varPointY2.value = varY;//Y最大值
varDivPoint.appendChild(varPoint);
varDivPoint.appendChild(varBr);
varDivPoint.appendChild(varPointX1);
varDivPoint.appendChild(varPointX2);
varDivPoint.appendChild(varPointY1);
varDivPoint.appendChild(varPointY2);
varDivPoint.appendChild(varTechPaperRName);
document.getElementById("divPaper").appendChild(varDivPoint);
//onmouseup时释放onmousemove，onmouseup事件句柄
Rect.container.onmousemove = null;
Rect.container.onmouseup = null;
Rect.obj = null;
Rect.container.onmousemove = ShowXY;
},
//辅助方法，处理IE和FF不同的事件模型
getEvent: function(e){
if (typeof e == 'undefined'){
e = window.event;
}
//alert(e.x?e.x : e.layerX);
if(typeof e.x == 'undefined'){
e.x = e.layerX;
}
if(typeof e.y == 'undefined'){
e.y = e.layerY;
}
return e;
}
};
function StartDraw()
{
Rect.init("divRight");
}
function StopDraw()
{
Rect.container.onmousedown = null;
}
function SaveDraw()
{
var varRectInfo = "";
for(var i=1;i<=varRectCount;i++)
{
var varDivPoint = document.getElementById("divPoint"+i);
if(varDivPoint == null)
{
continue;
}
for(var j=0;j<varDivPoint.childNodes.length;j++)
{
if(varDivPoint.childNodes[j].tagName != "INPUT")
{
continue;
}
if(j == 0)
{
varRectInfo = varRectInfo + varDivPoint.childNodes[j].value;
}
else
{
varRectInfo = varRectInfo + "&" + varDivPoint.childNodes[j].value;
}
}
if(i != varRectCount)
{
varRectInfo = varRectInfo + "|";
}
}
//alert(varRectInfo);
var varTechPaperDId = document.getElementById("txtTechPaperDId").value;
var varResult = FlexPaperExample.WebDemo.SavePaper.SaveTechPaperRects(varTechPaperDId,varRectInfo).value;
alert(varResult);
}
</script>
</head>
<body style="margin:0px;">
<form id="form1" runat="server">
<asp:HiddenField ID="txtTechPaperName" runat="server" />
<asp:HiddenField ID="txtTechPaperDId" runat="server" />
<div id="divLeft" style="float: left; width: 200px;">
<asp:Repeater ID="rptTechPapers" runat="server">
<ItemTemplate>
<div>
<asp:LinkButton ID="lbtnTechPaperName" ToolTip='<%# Eval("TechPaperId") %>' OnClick="lbtnTechPaperName_Click"
runat="server" Text='<%# Eval("TechPaperName") %>'>
</asp:LinkButton>
</div>
</ItemTemplate>
</asp:Repeater>
<br />
<br />
<asp:Repeater ID="rptTechPaperDetails" runat="server">
<ItemTemplate>
<div>
<a onclick="ShowTechPaperDetails(this.id);" href="#" id='<%# Eval("TechPaperDName") %>'
title='<%# Eval("TechPaperDId") %>'>
<%# Eval("TechPaperDName")%>
</a>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
<div id="divRight" onmousemove="ShowXY();" style="float: left; width: 400px; height: 550px; border: 1px solid black;">
</div>
<div>
<input id="btnStart" value="开始" type="button" onclick="StartDraw();" />
<input id="btnStop" value="停止" type="button" onclick="StopDraw();" />
<input id="btnSave" value="保存" type="button" onclick="SaveDraw();" />
<div id="divPaper">
</div>
</div>
<div>
<a href="Default.aspx">回到首页</a>
</div>
<input id="txtX" type="text" />
<input id="txtY" type="text" />
</form>
</body>
</html>
C#代码如下：
public partial class SavePaper : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(SavePaper));
if (!IsPostBack)
{
DataTable dt = SqlHelper.ExcuteDataTable("SELECT * FROM tb_TechPapers");
rptTechPapers.DataSource = dt;
rptTechPapers.DataBind();
}
}
protected void lbtnTechPaperName_Click(object sender, EventArgs e)
{
LinkButton lbtn = (LinkButton)sender;
txtTechPaperName.Value = lbtn.Text;
DataTable dt = SqlHelper.ExcuteDataTable("SELECT * FROM tb_TechPaperDetails WHERE TechPaperId = " + lbtn.ToolTip);
rptTechPaperDetails.DataSource = dt;
rptTechPaperDetails.DataBind();
}
[AjaxPro.AjaxMethod(AjaxPro.HttpSessionStateRequirement.ReadWrite)]
public string SaveTechPaperRects(string strTechPaperDId, string strTechPaperRects)
{
string strSql = "";
//1.删除原有图片对应的矩形数据
strSql = "DELETE tb_TechPaperRects WHERE TechPaperDId = " + strTechPaperDId;
SqlHelper.ExecuteSql(strSql);
//2.保存每一个新的矩形信息
string[] strArrayTechPaperRects = strTechPaperRects.Split('|');
foreach (string strTechPaperRect in strArrayTechPaperRects)
{
string[] strArrayTechPaperRect = strTechPaperRect.Split('&');
TechPaperRects mTechPaperRects = new TechPaperRects();
mTechPaperRects.TechPaperRId = mTechPaperRects.GetMaxId();
mTechPaperRects.TechPaperDId = Convert.ToInt32(strTechPaperDId);
mTechPaperRects.TechPaperRPoint = strArrayTechPaperRect[0];
mTechPaperRects.TechPaperRMinX = strArrayTechPaperRect[1];
mTechPaperRects.TechPaperRMaxX = strArrayTechPaperRect[2];
mTechPaperRects.TechPaperRMinY = strArrayTechPaperRect[3];
mTechPaperRects.TechPaperRMaxY = strArrayTechPaperRect[4];
mTechPaperRects.TechPaperRName = strArrayTechPaperRect[5];
mTechPaperRects.Add();
}
return "成功!";
}
}
若有疑问或不正之处，欢迎提出指正和讨论。
