Я хотел бы создать контейнер с функцией масштабирования.Проблема в том, что когда я нажимал кнопку увеличения, 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, чтобы я могпосмотрите, работает ли масштабирование.То, что происходит сейчас, это масштабирование работает, но положение теперь другое.Также размер контейнера отличается.
Я также хотел бы разрешить пользователю перетаскивать рабочее пространство при увеличении.Как я могу это сделать?