形状切割html,JointJs：将自定义形状html与元素一起缩放（使用paperScroller.zoom）

扩展到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,

});

}