给图片加热点是web开发中经常用到的一个功能。这方面的工具也不少。
为了更好的满足自己的需求,写了一个winform程序。
可以方便的给图片加热点,更方便灵活!
源码下载 http://download.csdn.net/download/qq_29939347/10150681
生成的代码:
1 <img src = "D:12.jpg" usemap = "#Map_2017-12-08-10-49-17" > 2 <map name="Map_2017-12-08-10-49-17" > 3 <area shape="polygon" coords="144,229,228,198,266,152,305,181,319,247,405,288,396,324,353,348,340,381,307,391,278,395,280,422,291,427,279,444,284,453,264,461,225,444,187,452,133,465,102,454,90,459,55,459,50,432,17,412,15,395,0,373,11,372,13,310,45,320,83,311,122,301,136,278" href = "http://www.sina.com.cn/" > 4 <area shape="polygon" coords="784,426,768,475,787,491,815,491,833,475,854,452,863,435,881,418,903,396,867,390,855,408,842,416,830,401" href = "https://www.cnblogs.com/" > 5 <area shape="polygon" coords="39,474,322,474,322,663,39,663" href = "" > 6 <area shape="polygon" coords="427,322,567,341,623,322,673,295,681,275,672,257,698,248,746,227,803,173,770,154,721,165,732,126,766,99,768,48,759,22,779,12,786,39,806,49,824,55,844,50,855,87,857,99,821,154,842,181,831,198,889,260,845,301,817,321,740,318,722,348,676,389,655,413,640,433,591,422,589,472,543,432,550,400,505,417,467,382,435,370" href = "" > 7 </map>
技术要点
1 画图
热点图形有 矩形,多边形,圆形等。为了统一处理,定义了接口:
1 interface IDrwaShap 2 { 3 void Draw(System.Drawing.Graphics g); 4 string GetLink(); 5 bool Hit(int x, int y); 6 bool IsChecked(); 7 void SetChecked(bool sel); 8 void SetEndPoint(System.Drawing.Point end); 9 void SetLink(string link); 10 11 void AddPoint(int x,int y); 12 13 void SetStartMovePoint(int x, int y); 14 void SetCurMovePoint(int x, int y); 15 16 int GetShapId(); 17 18 List<Point> GetPoint(); 19 20 }
矩形实现类为HotShapRect,多边形为HotShapPoly。
1 class HotShapPoly : PicHot.IDrwaShap 2 { 3 static Pen _drawPen = new Pen(Color.Red, 2); 4 static Pen _checkedPen = new Pen(Color.Blue, 2); 5 6 public int _shapId = 0; 7 private bool _checked = false; 8 private bool _startMove = false; 9 10 private Point _moveStartPoint = new Point(0, 0); 11 string _linkText = string.Empty; 12 13 List<Point> _listPoint = new List<Point>(); 14 public HotShapPoly() 15 { 16 _shapId = AppNum.GetId(); 17 } 18 public int GetShapId() 19 { 20 return _shapId; 21 } 22 23 public List<Point> GetPoint() 24 { 25 return _listPoint; 26 } 27 public void AddPoint(int x, int y) 28 { 29 Point newPt = new Point(x,y); 30 foreach (Point p in _listPoint) 31 { 32 if (p == newPt) 33 return; 34 } 35 36 _listPoint.Add(new Point(x, y)); 37 } 38 39 public void SetLink(string link) 40 { 41 _linkText = link; 42 } 43 public string GetLink() 44 { 45 return _linkText; 46 } 47 public void SetEndPoint(Point end) 48 { 49 AddPoint(end.X, end.Y); 50 } 51 52 public void SetChecked(bool sel) 53 { 54 _checked = sel; 55 _startMove = _checked; 56 } 57 58 public bool IsChecked() 59 { 60 return _checked; 61 } 62 63 public void SetStartMovePoint(int x, int y) 64 { 65 _moveStartPoint = new Point(x, y); 66 } 67 public void SetCurMovePoint(int x, int y) 68 { 69 if (!_startMove) 70 return; 71 72 Point moveEndPoint = new Point(x, y); 73 List<Point> _listPointNew = new List<Point>(); 74 foreach (Point p in _listPoint) 75 { 76 int m = p.X + (moveEndPoint.X - _moveStartPoint.X); 77 int n = p.Y + (moveEndPoint.Y - _moveStartPoint.Y); 78 _listPointNew.Add(new Point(m,n)); 79 } 80 _listPoint = _listPointNew; 81 82 _moveStartPoint = moveEndPoint; 83 } 84 85 86 106 107 public void Draw(Graphics g) 108 { 109 if (_listPoint.Count <= 2) 110 return ; 111 112 Pen pen = _checked ? _checkedPen : _drawPen; 113 114 g.DrawPolygon(pen, _listPoint.ToArray()); 115 } 116 117 internal bool IsValidate() 118 { 119 if (_listPoint.Count <= 2) 120 return false; 121 return true; 122 } 123 124 }
2 生成代码
1 private void buttonCreateHtml_Click(object sender, EventArgs e) 2 { 3 StringBuilder sb = new StringBuilder(); 416 17 MessageBox.Show(this, "代码已复制到剪贴板!"); 18 }