JointJs：随元素一起缩放自定义形状 html（使用 paperScroller.zoom）

Question

使用类似的东西paperScroller.zoom(0.2, { max: 5 });只会导致 svg 元素被缩放，而在我的自定义形状中，我也使用了 html，它不会同时缩放。

由于在缩放时没有触发 model.change 事件，因此不会调用 ElementView 中的 updateBox 方法，因此 html 元素不会相应地同步它们的尺寸和定位。有没有办法解决这个问题？

Answer 1

我为那些不使用的人找到了解决方法rappid.js（paperScroller仅适用于rappid）。

\n\n

假设您有一个与此类似的元素： http: //jointjs.com/tutorial/html-elements

\n\n

我的答案受到 Murasame 答案的启发，来自如何缩放 jonitjs 图表？并假设您更新了 (+0.1 -0.1) 的paper比例mousewheel。

\n\n

\n

• 首先在您的自定义ElementView存储中存储一个用于存储比例的数字属性（初始化为 1），让我们为其命名scale（通过 访问this.scale）。

\n

• render接下来在（您的 cutom 的）重写方法中ElementView侦听mousewheel纸张事件：this.paper.$el.on(\'mousewheel\',\xe2\x80\xa6)在处理程序中更新scale属性（+=0.1 或 -=0.1），然后调用updateBox

\n

• 最后在updateBox这一行的方法中：

  \n\n

  this.$box.css({ width: bbox.width, height: bbox.height, left: bbox.x, top: bbox.y, transform: \'rotate(\' + (this.model.get(\'angle\') || 0) + \'deg)\' });

  \n\n

  乘以width​height​x​y​this.scale：

  \n\n

  this.$box.css({ width: bbox.width*this.scale, height: bbox.height*this.scale, left: bbox.x*this.scale, top: bbox.y*this.scale, transform: \'rotate(\' + (this.model.get(\'angle\') || 0) + \'deg)\' });

\n

\n\n

我认为这是实现此行为的良好开端，您还应该调整元素内容的大小。

\n