Zooming 缩放

tags:jsPlumb

A fairly common requirement with the sorts of applications that use jsPlumb is the ability to zoom in and out. As of release 1.5.0 there is a way to do this for browsers that support CSS3 (meaning, essentially, everything except IE < 9). 使用 jsPlumb 的应用大多都希望能放大或者缩小，从1.5.0版本开始，在支持 CSS3 的浏览器可以放大或者缩小（除了 IE<9 以外的浏览器）。

Changing zoom requires that you do two things: 缩放需要做两件事：

• Set a transform property on an appropriate container
• Tell jsPlumb what the zoom level is.
• 在容器上设置 transform 属性
• 告诉 jsPlumb 缩放的大小

Container

容器

You need to identify some element that is the parent of all of your nodes and the jsPlumb artefacts. This is probably fairly obvious. What you might not know about, though, is the Container concept in jsPlumb. If you don't, I'd encourage you to go and read this page just quickly, because the best thing to do is to correctly configure a Container and then manipulate the transform property of that element. 一些元素是所有节点和 jsPlumb 工件的父元素，这很明显。但是你可能不知道 Container 在 jsPlumb 中的概念，如果你不这么做，我希望你阅读这个页面，因为最好的做法是正确配置一个 Container 然后操作该元素的 transform 属性。

Let's say we have some div whose id is drawing, and we're going to use that as the Container: 假设我们有一个 div ID 为 drawing，我们将它作为 Container 。

jsPlumb.setContainer("drawing");

CSS transform property

CSS transform 属性

Now to set the zoom to 0.75, say, we change the transform property accordingly. Remember that transform is one of those properties that have several vendor prefix versions, so there are several ways to do what I've got here, and, given that you're probably a computer programmer, you've most likely got a favourite. But anyway, here's something. 现在要把缩放设置为 0.75 ，因此我们要修改 transform 属性，记住 transform 有几个不同的浏览器前缀版本，所以有几个方法来修改，而且你是一个开发者，你可以看下面：

$("#drawing").css({
  "-webkit-transform":"scale(0.75)",
  "-moz-transform":"scale(0.75)",
  "-ms-transform":"scale(0.75)",
  "-o-transform":"scale(0.75)",
  "transform":"scale(0.75)"
});

jsPlumb.setZoom

You now need to tell jsPlumb about the new zoom level: 你需要告诉jsPlumb关系新的缩放级别。

jsPlumb.setZoom(0.75);

A Helper Function

帮助函数

Maybe you'd like to just grab this: 可能你想要这样做：

window.setZoom = function(zoom, instance, transformOrigin, el) {
  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);    
};

Notes 笔记

• el is a DOM element. You don't have to pass in el; if you do not, it uses the Container from the jsPlumb instance.
• transformOrigin is optional; it defaults to [0.5, 0.5] - the middle of the element (this is the browser default too)
• instance is an instance of jsPlumb - either jsPlumb, the static instance, or some instance you got through jsPlumb.newInstance(...). The function will default to using the static instance of jsPlumb if you do not provide one.

• zoom is a decimal where 1 means 100%.

• el 是一个DOM元素，你不需要通过传入 el，如果你不传入，它将会使用来自 jsPlumb 实例的 Container 。

• transformOrigin 是可以选择的，他默认值是 0.5 , 0.5
• instance 是 jsPlumb 的一个实例- jsPlumb 静态实例，或者你通过一些新的实例 jsPlumb.newInstance(...) 。如果不提供jsPlumb，改函数将默认使用静态实例。
• zoom 是小数，其中 1 表示 100%。