Question

我想创建一个具有缩放功能的容器。问题是，当我单击“缩放”按钮时，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示例，以便可以查看缩放是否有效。目前正在发生的事情是，缩放有效，但位置现在不同。容器的大小也不同。

我还希望允许用户在缩放时拖动工作区。我该怎么办？

HTML，JS和CSS上的缩放功能

0 个答案: