svg - JointJs:随元素一起缩放自定义形状 html(使用 paperScroller.zoom)

Question

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

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

Answer 1

扩展 Marc_Alx 的回答。

调用 paper.translate() 和 paper.scale() 在纸上触发 'translate' 和 'scale' 事件。

自定义元素可以在其自定义 ElementView 上监听这些事件。

例如，如果您缩放鼠标滚轮事件:

  paper.on('blank:mousewheel', (event, x, y, delta) => {
    const scale = paper.scale();
    paper.scale(scale.sx + (delta * 0.01), scale.sy + (delta * 0.01),);
  });

覆盖自定义 ElementView 的渲染方法以监听纸上的“缩放”事件。

  render(...args) {
    joint.dia.ElementView.prototype.render.apply(this, args);

    this.listenTo(this.paper, 'scale', this.updateBox);
    this.listenTo(this.paper, 'translate', this.updateBox);

    this.paper.$el.prepend(this.$box);

    this.updateBox();

    return this;
},

自定义 ElementView 的 updateBox 应该从论文中检索比例值。

  updateBox() {
    if (!this.paper) return;
    const bbox = this.getBBox({ useModelGeometry: true });
    const scale = joint.V(this.paper.viewport).scale();

    // custom html updates
    this.$box.find('label').text(this.model.get('label'));
    this.$box.find('p').text(this.model.get('response'));
    // end of custom html updates

    this.$box.css({
      transform: `scale(${scale.sx},${scale.sy})`,
      transformOrigin: '0 0',
      width: bbox.width / scale.sx,
      height: bbox.height / scale.sy,
      left: bbox.x,
      top: bbox.y,
    });
  }