Разметка областей на изображении
Здравствуйте! Передо мной стоит следующая задача:
На странице находится изображение и текстовое поле. На изображении отмечаем область и в текстовое поле вводим название. сама страница (язык ASP.NET C#): <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Безымянная страница</title> <script type='text/javascript' src='jsDraw2D.js'></script> <script type='text/javascript' src='canvas.js'></script> </head> <body> <form id="form1" runat="server"> <div id="del"> <script type="text/javascript"> window.onload('Image1'); </script> <table> <tr> <td> <asp:Image ID="Image1" runat="server" Height="473px" ImageUrl="~/Иоанн Креститель.png" Width="721px" /> </td> </tr> <tr> <td> <asp:TextBox ID="tbText" runat="server" Width="152px" onKeyUp="Change();"></asp:TextBox> </td> </tr> </table> </div> </form> </body> </html> скрипт canvas.js: var ox=0; var oy=0; var clic = 0; //начало области window.onload = function (id) { function curve(pt1, pt2) { var gr = new jsGraphics(document.getElementById(id)); //Create jsColor object var col = new jsColor("red"); //Create jsPen object var pen = new jsPen(col,1); //Draw a Line between 2 points gr.drawLine(pen,pt1,pt2); } document.images[0].onclick = function(event) { var event = event || window.event; var x=event.clientX; var y=event.clientY; var pt1 = new jsPoint(ox,oy); var pt2 = new jsPoint(x,y); //если не первый клик мыши на картинке, то соединяем точки прямой if (clic > 0) curve(pt1, pt2); ox=x; oy=y; clic++; } }; function Change() { clic = 0; // в pt1 положить координаты первой точки новой области //здесь считывается название области, которую только что выделили на картинке }; Как координаты области и ее название хранить? Каким образом передать эти данные на сервер? |
Часовой пояс GMT +3, время: 02:56. |