JavaScript панорамирование на изображение ASP - PullRequest
Новая
       26

JavaScript панорамирование на изображение ASP

0 голосов
/ 25 октября 2010

есть небольшая проблема здесь.Я попытался реализовать некоторый JavaScript, который должен добавить некоторые функциональные возможности на стороне клиента в компонент ASP Image.На самом деле этот компонент изображения является одним из компонентов DevExpress, который называется «AspxBinaryImage».Это всего лишь немного модифицированный ASP-образ, с еще большим количеством CSS и прочим, но в основе все еще лежит HTML и много строк JavaScript.

Хорошо, теперь моя проблема: я попытался реализовать панорамирование на этом изображении.Если я пропущу любой тип ASP-компонентов и просто назову сайт простой HTML-страницей, с IE проблем не возникнет, но Mozilla вообще не работает.Если я попытаюсь использовать этот JavaScript в контексте страницы ASP, ничего не будет работать вообще.

Я обнаружил следующее: Панорамирование изображения с использованием Javascript в ASP.Net Page переполнения страницы Div и адаптировал многие частиэто в мои функции.Я также попытался «настроить» в одном из ответов, но это не сработало.На самом деле консоль JavaScript Firefox, а также консоль FireBug, похоже, не обнаруживают ошибок, конфликтов или проблем в исходном коде.

Вот мой полный код страницы ASP, который не работает ни в одномbrowser: 

<!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 runat="server">
    <title></title>
    <script language="JavaScript" type="text/javascript" src="/JavaScript/MouseWheelZooming.js">
    </script>

    <script type="text/javascript">

        document.onmousemove = mouseMove;
        document.onmouseup = mouseUp;

        var dragObject = null;
        var mouseOffset = null;

        function mouseCoords(ev) {
            if (ev.pageX || ev.pageY) {
                return { x: ev.pageX, y: ev.pageY };
            }
            return {
                x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
                y: ev.clientY + document.body.scrollTop - document.body.clientTop
            };
        }

        function getMouseOffset(target, ev) {
            ev = ev || window.event;

            var docPos = getPosition(target);
            var mousePos = mouseCoords(ev);
            return { x: mousePos.x - docPos.x, y: mousePos.y - docPos.y };
        }

        function getPosition(e) {
            var left = 0;
            var top = 0;

            while (e.offsetParent) {
                left += e.offsetLeft;
                top += e.offsetTop;
                e = e.offsetParent;
            }

            left += e.offsetLeft;
            top += e.offsetTop;

            return { x: left, y: top };
        }

        function mouseMove(ev) {
            ev = ev || window.event;
            var mousePos = mouseCoords(ev);

            if (dragObject) {
                dragObject.style.position = 'absolute';
                dragObject.style.top = mousePos.y - mouseOffset.y;
                dragObject.style.left = mousePos.x - mouseOffset.x;

                return false;
            }
        }
        function mouseUp() {
            dragObject = null;
        }

        function makeDraggable(item) {
            if (!item) return;
            item.onmousedown = function(ev) {
                dragObject = this;
                mouseOffset = getMouseOffset(this, ev);
                return false;
            }
        }

        function main() {
            alert("foo");
            initWheelZoomEventhandler();
            makeDraggable(document.getElementById("Mapimage"));
        }


    </script> 

</head>
<body onload="javascript:main();">
    <form id="form1" runat="server">
    <div id="Container">
        <table border="0">
            <tr>
                <td>
                    <dx:ASPxButton ID="ASPxButton1" runat="server" AutoPostBack="False" Text="Refresh">
                        <ClientSideEvents Click="function (r,s){Callback.PerformCallback();}" />
                    </dx:ASPxButton>
                </td>
                <td>
                    <dx:ASPxButton ID="ASPxButton2" runat="server" AutoPostBack="False" Text="Pan">
                        <ClientSideEvents Click="function (r, s){Callback.PerformCallback();}" />
                    </dx:ASPxButton>
                </td>
                <td>
                    <dx:ASPxButton ID="ASPxButton3" runat="server" AutoPostBack="False" Text="Zoom In">
                        <ClientSideEvents Click="function (r, s){Callback.PerformCallback();}" />
                    </dx:ASPxButton>
                </td>
                <td>
                    <dx:ASPxButton ID="ASPxButton4" runat="server" AutoPostBack="False" Text="Zoom Out"
                        HorizontalAlign="Center">
                        <ClientSideEvents Click="function (r, s){Callback.PerformCallback();}" />
                    </dx:ASPxButton>
                </td>
                <td>
                    <dx:ASPxButton ID="ASPxButton5" runat="server" AutoPostBack="False" Text="Zoom Rec"
                        HorizontalAlign="Center">
                        <ClientSideEvents Click="function (r, s){Callback.PerformCallback();}" />
                    </dx:ASPxButton>
                </td>
            </tr>
        </table>
    </div>


        <dx:ASPxCallbackPanel ID="Callback" runat="server" ClientInstanceName="Callback"
            OnCallback="Callback_Callback" HideContentOnCallback="False" ShowLoadingPanel="False"
            style="overflow:scroll; width: 300px; height: 400px; cursor: move; position: relative;">
            <PanelCollection>
                <dx:PanelContent runat="server">
                    <%--<div id="divInnerDiv" >--%>
                        <dx:ASPxBinaryImage ID="Mapimage" runat="server" ClientInstanceName="Mapimage">
                        </dx:ASPxBinaryImage> <%--style="position : absolute;" --%>
                    <%--</div>--%>
                </dx:PanelContent>
            </PanelCollection>
            <ClientSideEvents EndCallback="function(s, e) {
             alert(&quot;moin, main&quot;);
                makeDraggable(document.getElementById(&quot;Mapimage&quot;));
            }" />
        </dx:ASPxCallbackPanel>

    </form>
</body>
</html>

Imo, обработка событий (особенно значения, получаемые от действия над элементом HTML), кажется, отличается в зависимости от браузера ...

Надеюсь, что вы, ребята, можете помочьменя с этим.

Привет,

Алекс

Ответы [ 2 ]

1 голос
/ 25 октября 2010

Вы на самом деле не определяете, в чем проблема, и трудно что-либо отладить, не имея возможности запустить веб-сайт.

Однако, возможно, function main() не может найти элемент управления изображением. ASP.NET автоматически переименовывает ваши идентификаторы, чтобы гарантировать их уникальность. Так что идентификатор элемента MapImage на самом деле будет Callback_Mapimage. 

function main() {
        alert("foo");
        initWheelZoomEventhandler();
        makeDraggable(document.getElementById("Callback_Mapimage"));
    }

В Asp.net 4 вы можете установить ClientIdMode="static" на изображении, чтобы предотвратить это переименование.

0 голосов
/ 25 октября 2010

@ geoff: Хорошо, исправил это после некоторого удара головой о мой стол.Ключом к решению стало переименование идентификатора, который я не знал, и правильное выравнивание компонентов divs / DevExpress.Мне также пришлось иметь дело с различными типами браузеров.

Это рабочий код JavaScript, протестированный в Chrome, Opera, IE и Mozilla: 

document.onmousemove = mouseMove;
document.onmouseup = mouseUp;

var dragObject = null;
var mouseOffset = null;
var imgStartLoc = null;


function mouseCoords(ev)
{
  if (ev.pageX || ev.pageY)
  {
    return { x: ev.pageX, y: ev.pageY };
  }
  return {
    x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
    y: ev.clientY + document.body.scrollTop - document.body.clientTop
  };
}

function getMouseOffset(target, ev)
{
  ev = ev || window.event;

  var docPos = getPosition(target);
  var mousePos = mouseCoords(ev);

  return { x: mousePos.x - docPos.x, y: mousePos.y - docPos.y };
}

function getPosition(e)
{
  var left = 0;
  var top = 0;

  while (e.offsetParent)
  {
    left += e.offsetLeft;
    top += e.offsetTop;
    e = e.offsetParent;
  }

  left += e.offsetLeft;
  top += e.offsetTop;

  return { x: left, y: top };
}

function mouseMove(ev)
{
  ev = ev || window.event;
  var mousePos = mouseCoords(ev);


  if (dragObject)
  {
    dragObject.style.position = 'absolute';
    var mouseDelta = { x: mousePos.x - mouseOffset.x, y: mousePos.y - mouseOffset.y }
    dragObject.style.top = (imgStartLoc.y + mouseDelta.y).toString() + 'px';
    dragObject.style.left = (imgStartLoc.x + mouseDelta.x).toString() + 'px';

    return false;
  }
}

function mouseUp()
{
  dragObject = null;

}

function makeDraggable(item)
{
  if (!item)
  {
    return;
  }

  item.onmousedown = function(ev)
  {
    dragObject = this;
    ev = ev || window.event;
    mouseOffset = mouseCoords(ev);

    imgStartLoc = {
      x: isNaN(parseInt(dragObject.style.left)) ? 0 : parseInt(dragObject.style.left),
      y: isNaN(parseInt(dragObject.style.top)) ? 0 : parseInt(dragObject.style.top)
    };

    return false;
  }

}

. И использование в HTML: 

 <script type="text/javascript">

        // initialize the eventlisteners for user-interaction
        function init()
        {
          makeDraggable(document.getElementById("Callback_Mapimage"));
        }

  </script>
* 1008.ваша помощь!
...