1

問題文：

div に背景画像があり、背景画像の上に別の画像がある画面スペースが必要です。背景画像の上にある画像はドラッグ可能でサイズ変更可能である必要があり、追加すると背景画像のズーム率に合わせて自動的にサイズ変更されます。また、背景と他の画像は比例してズームインおよびズームアウトする必要があります。

助けてください！

私のアプローチ：

2つの部門があります。1 つの div には、背景として機能する画像があります。2 番目の div には、ドラッグ可能な別の画像があります。

私ができないことは、これらの div の両方を同期して、比例してズームインおよびズームアウトできるようにすることです。

前もって感謝します ：）

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jquery.iviewer test</title>
        <link href="jquery.iviewer.css"  rel="stylesheet" type="text/css" /ss>
        <script type="text/javascript" src="jquery.js" ></script>
        <script type="text/javascript" src="jqueryui.js" ></script>
        <script type="text/javascript" src="jquery.mousewheel.min.js" ></script>
        <script type="text/javascript" src="jquery.iviewer.js" ></script>
        <script type="text/javascript">
            var $ = jQuery;
            $(document).ready(function(){
                  var iv1 = $("#viewer").iviewer({
                       src: "meditation.png", 
                       update_on_resize: true,
                       zoom_animation: true,
                       mousewheel: true,
                       onMouseMove: function(ev, coords) { },
                       onStartDrag: function(ev, coords) { return false; }, //this image can be dragged
                       onDrag: function(ev, coords) { }
                  });

                   $("#in").click(function(){ iv1.iviewer('zoom_by', 1); }); 
                   $("#out").click(function(){ iv1.iviewer('zoom_by', -1); }); 
                   $("#fit").click(function(){ iv1.iviewer('fit'); }); 
                   $("#orig").click(function(){ iv1.iviewer('set_zoom', 100); }); 
                   $("#update").click(function(){ iv1.iviewer('update_container_info'); });
            });
        </script>


        <link rel="stylesheet" type="text/css" href="common/common.css"/>

        <script language="JavaScript" type="text/javascript" src="core.js"></script>
        <script language="JavaScript" type="text/javascript" src="events.js"></script>
        <script language="JavaScript" type="text/javascript" src="css.js"></script>
        <script language="JavaScript" type="text/javascript" src="coordinates.js"></script>
        <script language="JavaScript" type="text/javascript" src="drag.js"></script>

        <script language="JavaScript"><!--
        window.onload = function() {
        var group
        var coordinates = ToolMan.coordinates()
        var drag = ToolMan.drag()

        var boxDrag = document.getElementById("boxDrag")
        drag.createSimpleGroup(boxDrag)

        var boxVerticalOnly = document.getElementById("boxVerticalOnly")
        group = drag.createSimpleGroup(boxVerticalOnly)
        group.verticalOnly()

        var boxHorizontalOnly = document.getElementById("boxHorizontalOnly")
        group = drag.createSimpleGroup(boxHorizontalOnly)
        group.horizontalOnly()

        var boxRegionConstraint = document.getElementById("boxRegionConstraint")
        group = drag.createSimpleGroup(boxRegionConstraint)
        var origin = coordinates.create(0, 0)
        group.addTransform(function(coordinate, dragEvent) {
        var originalTopLeftOffset = 
                dragEvent.topLeftOffset.minus(dragEvent.topLeftPosition)
        return coordinate.constrainTo(origin, originalTopLeftOffset)

            })

        var boxThreshold = document.getElementById("boxThreshold")
        group = drag.createSimpleGroup(boxThreshold)
        group.setThreshold(25)

        var boxHandle = document.getElementById("boxHandle")
        group = drag.createSimpleGroup(boxHandle, document.getElementById("handle"))

        var boxAbsolute = document.getElementById("boxAbsolute")
        group = drag.createSimpleGroup(boxAbsolute)
        group.verticalOnly()
        group.addTransform(function(coordinate, dragEvent) {
            var scrollOffset = coordinates.scrollOffset()
            if (coordinate.y < scrollOffset.y)
                return coordinates.create(coordinate.x, scrollOffset.y)

            var clientHeight = coordinates.clientSize().y
            var boxHeight = coordinates._size(boxAbsolute).y
            if ((coordinate.y + boxHeight) > (scrollOffset.y + clientHeight))
                return coordinates.create(coordinate.x, 
                        (scrollOffset.y + clientHeight) - boxHeight)

            return coordinate
            })
        }
        </script>

        <link rel="stylesheet" href="/jquery.iviewer.css" />

        <style>
            .viewer
            {
                width: 75%;
                height: 800px;
                border: 1px solid black;
                position: relative;
                overflow:scroll;
            }

            .wrapper
            {
                overflow: hidden;
            }

            div {
                margin: 0px;
                padding: 0px;
            }
            .verticalgridline {
                padding-top: 27px;
            }
            .box {
                float: left;
                padding: 0px;
            }

            #boxDrag, #boxVerticalOnly, #boxHorizontalOnly, #boxRegionConstraint, 
            #boxThreshold, #boxAbsolute {
                cursor: move;
            }
            #boxAbsolute {
                position: absolute;
                bottom: 0px;
                right: 0px;
            }
        </style>

    </head>

    <body>
        <h1>Design Page</h1>
        <!-- wrapper div is needed for opera because it shows scroll bars for reason -->
        <div class="wrapper">
            <div id="viewer" class="viewer" >
                <div id="boxDrag" class="box">
                    <img src="4.png" />
                </div>
            </div>
        </div>

    </body>
</html>
4

0 に答える 0