前天有人问了一个问题,说的是“ 我现在的需求就是给一张工厂平面图,我传到服务器上做底层,然后在图层上标注特殊内容,比如仓库,办公室等!,这些特殊内容都是已经存在的标记,比如三脚架代表危险源 然后放在图中相应位置~”,正好我也在做类似的东西,所以说一下我的思路。
我的任务是做一个设备状态图,做之前不知道有哪些设备,也不知道具体是怎么连的,要求呢用户能自定义的添加,修改设备,如改变大小啊,改变位置什么的。
作为一个只会拖控件的新人,我表示压力很大,最后在领导的帮助下找到了办法,那就是不用画图,而是用自定义控件。
画不出来,我就把设备一个一个的拖上去,那样只要一个设备树TreeView就可以了.
首先做一个生成设备样子的控件,就叫ImageBox好了,然后添加事件使其可以自由改变大小和位置;
加上一个contextMenuStrip来控制,在鼠标事件里面代码很简单几句就可以搞定
private bool _mouseflag = false;
private Point _locationp;
private void ctrImageBox_MouseDown(object sender, MouseEventArgs e)
{
_mouseflag = true;
_locationp.X = MousePosition.X;
_locationp.Y = MousePosition.Y;
} private void ctrImageBox_MouseMove(object sender, MouseEventArgs e)
{
if (_mouseflag)
{
if (ChangeSizeToolStripMenuItem.Text == "调整位置")
{
this.Width += MousePosition.X - _locationp.X;
this.Height += MousePosition.Y - _locationp.Y;
}
if (ChangeSizeToolStripMenuItem.Text == "调整大小")
{
this.Left += MousePosition.X - _locationp.X;
this.Top += MousePosition.Y - _locationp.Y;
}
_locationp.X = MousePosition.X;
_locationp.Y = MousePosition.Y;
}
} private void ctrImageBox_MouseUp(object sender, MouseEventArgs e)
{
_mouseflag = false;
_locationp = new Point(0, 0);
} private void ctrImageBox_MouseLeave(object sender, EventArgs e)
{
_mouseflag = false;
} private void RemoveToolStripMenuItem_Click(object sender, EventArgs e)
{
this.Visible = false;
} private void ChangeSizeToolStripMenuItem_Click(object sender, EventArgs e)
{
if (ChangeSizeToolStripMenuItem.Text == "调整位置")
{
ChangeSizeToolStripMenuItem.Text = "调整大小";
}
else
{
if (ChangeSizeToolStripMenuItem.Text == "调整大小")
{
ChangeSizeToolStripMenuItem.Text = "调整位置";
}
else
{
ChangeSizeToolStripMenuItem.Text = "调整大小";
}
}
}
第二步就是做生成图控件了,因为我只会拖控件,那怎么办呢,那就在这里加上拖动生成的代码, private void EquipmentImage_DragEnter(object sender, DragEventArgs e)
{
e.Effect = DragDropEffects.Copy;
m_dragnode = (TreeNode)(e.Data.GetData(typeof(TreeNode)));
m_imageindex = m_dragnode.ImageIndex;
filename = path + m_dragnode.Text + ".jpeg";
} private void EquipmentImage_DragDrop(object sender, DragEventArgs e)
{
try
{
OperationAndMaintenance.Control.ctrImageBox imagebox = new OperationAndMaintenance.Control.ctrImageBox();
this.Controls.Add(imagebox);
ImageIDMax++;
imagebox.Name = m_dragnode.Text + "-" + ImageIDMax.ToString();
Image myimage = Image.FromFile(filename);
imagebox.Size = new Size(myimage.Width, myimage.Height);
imagebox.BackgroundImage = myimage;
imagebox.Location = PointToClient(MousePosition);
imagebox.Show();
EquipmentList.Add(imagebox);
filename = path;
}
catch (Exception ex)
{
MessageBox.Show(ex.ToString());
}
}
好了,现在就可以生成设备图了,接着就是保存的问题,画图的话只要保存图片就可以了,可是现在全是控件,怎么办呢,那就保存控件的信息就好了Size Location BackgroundImage Name,为了方便,就用xml好了,加个保存按钮。XmlNode node = doc.SelectSingleNode("/Equipment/Image");
XmlElement element = doc.CreateElement(ctr.Name); XmlElement el = doc.CreateElement("id");
string[] str = ctr.Name.Split('-');
el.InnerText = str[1];
element.AppendChild(el); XmlElement el1 = doc.CreateElement("name");
el1.InnerText = str[0];
element.AppendChild(el1); XmlElement el2 = doc.CreateElement("location");
el2.InnerText = ctr.Location.ToString();
element.AppendChild(el2); XmlElement el3 = doc.CreateElement("size");
el3.InnerText = ctr.Size.ToString();
element.AppendChild(el3); XmlElement el4 = doc.CreateElement("ratio");
el4.InnerText = ratio;
element.AppendChild(el4); node.AppendChild(element);
doc.Save(path + "Equipment.xml");搞定了,现在建立工程,将控件包含进去,弄个Treeview将设备图片弄上去,添加一个事件写上 private void treeView1_ItemDrag(object sender, ItemDragEventArgs e)
{
DoDragDrop(e.Item,DragDropEffects.Copy);
}自己试下,看看效果,先做一个头进来然后是身体
改改大小和位置,当当当,合体成功
现在完成设备图没问题了,没有测试太多,反正向下图这样的绝对不会卡的就这样不用考虑什么布局啊,重绘啊,满意就拖一个,不满意就去掉,很是简单,反正图片什么的美工会去弄来的
我的任务是做一个设备状态图,做之前不知道有哪些设备,也不知道具体是怎么连的,要求呢用户能自定义的添加,修改设备,如改变大小啊,改变位置什么的。
作为一个只会拖控件的新人,我表示压力很大,最后在领导的帮助下找到了办法,那就是不用画图,而是用自定义控件。
画不出来,我就把设备一个一个的拖上去,那样只要一个设备树TreeView就可以了.
首先做一个生成设备样子的控件,就叫ImageBox好了,然后添加事件使其可以自由改变大小和位置;
加上一个contextMenuStrip来控制,在鼠标事件里面代码很简单几句就可以搞定
private bool _mouseflag = false;
private Point _locationp;
private void ctrImageBox_MouseDown(object sender, MouseEventArgs e)
{
_mouseflag = true;
_locationp.X = MousePosition.X;
_locationp.Y = MousePosition.Y;
} private void ctrImageBox_MouseMove(object sender, MouseEventArgs e)
{
if (_mouseflag)
{
if (ChangeSizeToolStripMenuItem.Text == "调整位置")
{
this.Width += MousePosition.X - _locationp.X;
this.Height += MousePosition.Y - _locationp.Y;
}
if (ChangeSizeToolStripMenuItem.Text == "调整大小")
{
this.Left += MousePosition.X - _locationp.X;
this.Top += MousePosition.Y - _locationp.Y;
}
_locationp.X = MousePosition.X;
_locationp.Y = MousePosition.Y;
}
} private void ctrImageBox_MouseUp(object sender, MouseEventArgs e)
{
_mouseflag = false;
_locationp = new Point(0, 0);
} private void ctrImageBox_MouseLeave(object sender, EventArgs e)
{
_mouseflag = false;
} private void RemoveToolStripMenuItem_Click(object sender, EventArgs e)
{
this.Visible = false;
} private void ChangeSizeToolStripMenuItem_Click(object sender, EventArgs e)
{
if (ChangeSizeToolStripMenuItem.Text == "调整位置")
{
ChangeSizeToolStripMenuItem.Text = "调整大小";
}
else
{
if (ChangeSizeToolStripMenuItem.Text == "调整大小")
{
ChangeSizeToolStripMenuItem.Text = "调整位置";
}
else
{
ChangeSizeToolStripMenuItem.Text = "调整大小";
}
}
}
第二步就是做生成图控件了,因为我只会拖控件,那怎么办呢,那就在这里加上拖动生成的代码, private void EquipmentImage_DragEnter(object sender, DragEventArgs e)
{
e.Effect = DragDropEffects.Copy;
m_dragnode = (TreeNode)(e.Data.GetData(typeof(TreeNode)));
m_imageindex = m_dragnode.ImageIndex;
filename = path + m_dragnode.Text + ".jpeg";
} private void EquipmentImage_DragDrop(object sender, DragEventArgs e)
{
try
{
OperationAndMaintenance.Control.ctrImageBox imagebox = new OperationAndMaintenance.Control.ctrImageBox();
this.Controls.Add(imagebox);
ImageIDMax++;
imagebox.Name = m_dragnode.Text + "-" + ImageIDMax.ToString();
Image myimage = Image.FromFile(filename);
imagebox.Size = new Size(myimage.Width, myimage.Height);
imagebox.BackgroundImage = myimage;
imagebox.Location = PointToClient(MousePosition);
imagebox.Show();
EquipmentList.Add(imagebox);
filename = path;
}
catch (Exception ex)
{
MessageBox.Show(ex.ToString());
}
}
好了,现在就可以生成设备图了,接着就是保存的问题,画图的话只要保存图片就可以了,可是现在全是控件,怎么办呢,那就保存控件的信息就好了Size Location BackgroundImage Name,为了方便,就用xml好了,加个保存按钮。XmlNode node = doc.SelectSingleNode("/Equipment/Image");
XmlElement element = doc.CreateElement(ctr.Name); XmlElement el = doc.CreateElement("id");
string[] str = ctr.Name.Split('-');
el.InnerText = str[1];
element.AppendChild(el); XmlElement el1 = doc.CreateElement("name");
el1.InnerText = str[0];
element.AppendChild(el1); XmlElement el2 = doc.CreateElement("location");
el2.InnerText = ctr.Location.ToString();
element.AppendChild(el2); XmlElement el3 = doc.CreateElement("size");
el3.InnerText = ctr.Size.ToString();
element.AppendChild(el3); XmlElement el4 = doc.CreateElement("ratio");
el4.InnerText = ratio;
element.AppendChild(el4); node.AppendChild(element);
doc.Save(path + "Equipment.xml");搞定了,现在建立工程,将控件包含进去,弄个Treeview将设备图片弄上去,添加一个事件写上 private void treeView1_ItemDrag(object sender, ItemDragEventArgs e)
{
DoDragDrop(e.Item,DragDropEffects.Copy);
}自己试下,看看效果,先做一个头进来然后是身体
改改大小和位置,当当当,合体成功
现在完成设备图没问题了,没有测试太多,反正向下图这样的绝对不会卡的就这样不用考虑什么布局啊,重绘啊,满意就拖一个,不满意就去掉,很是简单,反正图片什么的美工会去弄来的
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货