Ich versuche, ein Diagramm mit JointJS zu erstellen, wobei Link vom Ausgangsport od 1 Element startet und mit dem ganzen anderen Element (oder dem aktuellen Element selbst) verbunden werden kann - nicht nur mit dem Eingangsport. Meine Idee ist es, Eingabe-Port-Stil zu ändern, um Element zu decken, das gehört, aber ich habe Probleme, Port-Form in irgendeiner Weise zu ändern, es ist immer ein kleiner Kreis auf der linken Seite des Elements und keiner meiner CSS funktioniert. Kann jemand einen Rat geben?Port-Design in JointJS ändern
1
A
Antwort
1
können Sie die Port attrib0utes wie folgt aktualisieren:
var a = new joint.shapes.devs.Model({
position: { x: 50, y: 50 },
size: { width: 100, height: 100 },
attrs: {
'.port-label': {
fill: 'red'
},
// change position and size of the 'a' port
'.inPorts .port0 circle': {
r: 15,
'ref-x': -20,
'ref-y': 10,
stroke: 'red',
'stroke-width': 5
},
// change color on a single port
'.inPorts .port0 .port-label': {
fill: 'blue',
}
},
inPorts: ['a', 'aa', 'aaa'],
outPorts: ['b']
https://jsfiddle.net/vtalas/43sthc6g/
Allerdings brauchen Sie nicht-Ports zu verwenden, um dies zu erreichen, können Sie auf das gesamte Element verbinden kann direkt wie folgt aus:
var a = new joint.shapes.basic.Rect({
size: { width: 100, height: 100 },
position: { x: 300, y: 300 },
attrs: {
'rect': { magnet: true }
}
}).addTo(graph);
var b = new joint.shapes.basic.Rect({
size: { width: 100, height: 100 },
position: { x: 100, y: 100 },
attrs: {
'rect': { magnet: true }
}
}).addTo(graph);
new joint.dia.Link({ source: { id: b.id }, target: { id: a.id } }).addTo(graph);
Ergebnis: https://jsfiddle.net/vtalas/davLzsng/
Verwandte Themen
- 1. Ändern Anschlussposition in benutzerdefinierten Element in JointJS
- 2. Treelayout in Jointjs
- 3. JointJS Grundverständnis
- 4. JointJS/Rappid Leistungsprobleme in IE
- 5. JointJs - Ereignis onConnect Link
- 6. jointjs rect text Überlauf
- 7. Dynamic JointJS Elementgröße
- 8. JointJS Links: Benutzerdefinierte Markup? So
- 9. Anzeigefeld basierend auf einem anderen in JointJS
- 10. JointJs-Diagramm in einem modalen Bootstrap?
- 11. Ich kann Dialog nicht schließen in JointJS
- 12. Wie man einen Untergraphen "kopiert/einfügt" - JointJS
- 13. Wie kann ich die Attribute eines benutzerdefinierten Objekts in JointJS ändern?
- 14. Erstellen Sie eine Gruppe von Elementen JointJS
- 15. Jointjs-Positionstext oben statt Mitte für Rechteck
- 16. JointJS Erstellen von benutzerdefinierten Formen, Diamant, Hexagon
- 17. JointJs: Scale benutzerdefinierte Form html zusammen mit Element (mit paperScroller.zoom)
- 18. JointJS Zeichnen von mehreren benutzerdefinierten Konnektoren zu einem Element
- 19. JointJS: Hinzufügen eines Labels für das validateConnection-Ereignis?
- 20. JointJS: Link-Label über den Link selbst beweglich machen
- 21. Wie JointJs Elemente/Links mit Typoskript zu erweitern
- 22. jointjs: verhindern Hinzufügen von Vertex durch Klicken auf den Link
- 23. jointjs Reset eine Zelle auf die Maus nach unten
- 24. Wie fügt man einen Link mit Krähenfuß Erd-Notation in Jointjs
- 25. In JointJS bekomme ich die Fehlereigenschaft html existiert nicht beim Typ 'typeof shapes'
- 26. Verwenden vordefinierte SVG-Datei zum Erstellen einer benutzerdefinierten JointJS Form mit Ports
- 27. Laden Sie ein Diagramm herunter JOINTJS Image | SVG ==> PNG mit Javascript
- 28. URL in Dateipfad ändern
- 29. Bild in Widget ändern
- 30. Ändern Ringtone in Android
Was jo intjs v1? – ram4nd