Question

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

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

Answer 1

我找到了未使用$api = MailAPI::withUsernameAndPassword($host, $username, $password); $folder1 = $api->getFolderByDisplayName('Folder1', Enumeration\DistinguishedFolderIdNameType::PUBLICFOLDERSROOT); $subFolder1 = $api->getFolderByDisplayName('Subfolder1', $folder1->getFolderId()); $subFolder2 = $api->getFolderByDisplayName('Subfolder2', $subfolder1->getFolderId()); $subFolder3 = $api->getFolderByDisplayName('Subfolder3', $subfolder2->getFolderId()); $api->setFolderId($subFolder3->getFolderId());的人的解决方法（rappid.js仅适用于paperScroller）。

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

我的答案来自How to scale jonitjs graphs?的Murasame答案，并假设您更新了rappid paper上的mousewheel（+0.1 -0.1）。

首先在自定义ElementView内存储一个数字属性（已初始化为1），用于存储比例，我们将其命名为scale（通过this.scale访问）。
接下来在覆盖方法render（你的cutom ElementView）中听取论文的mousewheel个事件：处理程序中的this.paper.$el.on('mousewheel',…)更新scale 1}} property（+ = 0.1或 - = 0.1），然后调用updateBox
最后在此行的updateBox方法中：

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

width乘height，x，y，this.scale得到：

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)' });

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

Answer 2

延伸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,
    });
  }

Answer 3

回答这个问题，因为我花了数小时试图为此找到解决方案。事实证明，这是关于JointJS的完美演示（但是Google总是以某种方式为您提供过时的教程。请参见：https://github.com/clientIO/joint/issues/1220）。不过，这与Raunak Mukhia的答案非常相似。

https://github.com/clientIO/joint/blob/master/demo/shapes/src/html.js

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

3 个答案: