JointJs: Scale benutzerdefinierte Form html zusammen mit Element (mit paperScroller.zoom)

Question

Mit etwas wie paperScroller.zoom(0.2, { max: 5 }); verursacht nur svg Elemente gezoomt werden, während in meiner benutzerdefinierten Form habe ich auch HTML, die nicht skaliert verwendet Tandem.

Da bei der Skalierung kein model.change -Ereignis ausgelöst wird, wird die updateBox-Methode in ElementView nicht aufgerufen, und daher werden die Dimensionen und Positionierung der HTML-Elemente nicht synchronisiert. Gibt es eine Möglichkeit, dies zu umgehen?

Answer 1

Ich habe einen Workaround für diejenigen gefunden, die nicht verwenden rappid.js (paperScroller ist nur verfügbar für rappid).

Sie haben Angenommen, ein Element ähnlich wie diese: http://jointjs.com/tutorial/html-elements

Meine Antwort von Murasame Antwort des von How to scale jonitjs graphs? inspiriert und setzen voraus, dass Sie Skala Ihres paper auf mousewheel (+0,1 -0,1) aktualisieren.

• Zuerst in Ihrem benutzerdefinierten ElementView Speicher eine numerische Eigenschaft (initialisiert auf 1), die den Maßstab gespeichert werden, lassen Sie uns nennen es scale (Zugriff über this.scale).

• Weiter im overrided Methode render (Ihre cutom ElementView) hören mousewheel Ereignisse des Papiers: this.paper.$el.on('mousewheel',…) im Handler die scale Eigenschaft aktualisieren (+ = 0,1 oder - = 0,1), dann rufe updateBox

• schließlich im updateBox Verfahren an dieser Linie:

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

  Multiply width, height, x, y von this.scale zu erhalten:

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

Ich denke, es ist für die Umsetzung dieses Verhalten ein guter Start ist, sollten Sie Größe auch den Inhalt des Elements.

Answer 2

Erweitern auf Marc_Alx Antwort.

Durch den Aufruf von paper.translate() und paper.scale() werden die Ereignisse 'translate' und 'scale' auf dem Papier ausgelöst.

Benutzerdefinierte Elemente können diese Ereignisse auf ihrem benutzerdefinierten ElementView abhören.

Zum Beispiel, wenn Sie auf dem Mausrad Event Scale:

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

außer Kraft setzen Methoden der benutzerdefinierten machen ElementView zu 'Skala' Ereignis auf dem Papier zu hören.

Und die updateBox der benutzerdefinierten ElementView sollte den Skalierungswert vom Papier abrufen.

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