Функция масштабирования и перетаскивания в HTML, JS и CSS - PullRequest
0 голосов
/ 20 сентября 2018

Я хотел бы создать контейнер с функцией масштабирования.Проблема в том, что когда я нажимал кнопку увеличения, div становится больше, чем размер контейнера.

То, что я хотел бы сделать, это увеличить и уменьшить контейнер.

Вот мой код,

<!doctype html>
<html>
<head>
<script src="jsplumb.min.js "></script>
<script>
var instance = null;
var setZoom = null;
jsPlumb.bind("ready", function() {
    instance = jsPlumb.getInstance();
    instance.setContainer("drawing");
    setZoom = function() {
        let zoom = 1.75; 
        let transformOrigin = null;
        let el = null;
      transformOrigin = transformOrigin || [ 0.5, 0.5 ];
      instance = instance || jsPlumb;
      el = el || instance.getContainer();
      var p = [ "webkit", "moz", "ms", "o" ],
          s = "scale(" + zoom + ")",
          oString = (transformOrigin[0] * 100) + "% " + (transformOrigin[1] * 100) + "%";

      for (var i = 0; i < p.length; i++) {
        el.style[p[i] + "Transform"] = s;
        el.style[p[i] + "TransformOrigin"] = oString;
      }

      el.style["transform"] = s;
      el.style["transformOrigin"] = oString;

      instance.setZoom(zoom);    
    };
    instance.registerConnectionType("connector", {
      paintStyle:{ stroke:"blue", strokeWidth:5  },
    });
    instance.registerEndpointTypes({
      "connector":{         
        paintStyle:{fill:"blue"}
      }
    });
    instance.draggable(["el1","el2"], {containment: true});
    instance.addEndpoint("el1", { 
        anchors:"TopLeft",
        type: "connector",
        isTarget: true,
        connectorStyle : { stroke:"blue", strokeWidth:5 },
    });
    instance.addEndpoint("el2", { 
        anchors:"TopLeft",
        type: "connector",
        isTarget: true
    });
    instance.addEndpoint("el1", { 
        anchors:"Bottom",
        type: "connector",
        connector: "Flowchart",
        isSource: true,
        connectorStyle : { stroke:"blue", strokeWidth:5 },
    });
    instance.addEndpoint("el2", { 
        anchors:"Bottom",
        type: "connector",
        connector: "Flowchart",
        isSource: true,
        connectorStyle : { stroke:"blue", strokeWidth:5 },
    });
    instance.connect({
      source:"el1", 
      target:"el2",
      connector: "Flowchart",
      anchors:["Bottom","TopLeft"],
      endpoint:"Dot",
      endpointStyle:{ fill: "blue" },
      type: "connector"
    });
});
</script>
<style>
    #drawing{
        position: absolute;
        height:400px;
        width:400px;
        background-image: url(grid.png);
        background-repeat:repeat;
        overflow-y: auto;
        overflow-x: auto;
        left: 100px;
    }
    .item{
        position:absolute;
        top: 10px;
        left: 20px;
        width:100px;
        height:100px;
        background-color:red;
    }
</style>
</head>
<body>
<button onClick={setZoom()}>zoom</button>
<div id="drawing">
    <div id="el1" class="item" style="top: 200px;">
        test
    </div>
    <div id="el2" class="item">
        test
    </div>
</div>
</body>
 </html>

Здесь я добавил пример JSPlumb, чтобы я могпосмотрите, работает ли масштабирование.То, что происходит сейчас, это масштабирование работает, но положение теперь другое.Также размер контейнера отличается.

Я также хотел бы разрешить пользователю перетаскивать рабочее пространство при увеличении.Как я могу это сделать?

...