0
151
VistasPintar paneles de nodos en gojs
Hola, quiero pintar mi nodo como el nodo correcto, hay alguna idea de cómo puedo hacerlo con GOjs
en el nodo izquierdo, esto es lo que obtengo cuando trato de pintarlo. el nodo derecho es lo que realmente quiero pintar.
parece que se pierde algunas partes.
Intenté construir 2 paneles en el nodo, pero debido a que la forma es redondeada, no puedo pintar todo el panel.
var simpleNode = $( go.Node, "Auto", new go.Binding("layerName", "category"), $( go.Panel, "Auto", $( go.Shape, "RoundedRectangle", { portId: "", // this Shape is the Node's port, not the whole Node fromLinkable: true, fromLinkableDuplicates: false, toLinkableDuplicates: false, toLinkable: true, cursor: "pointer", }, new go.Binding("fill", "color"), ), $( go.Panel, "Horizontal", { alignment: go.Spot.Left, minSize: new go.Size(160, 0), }, $( go.Panel, "Horizontal", { background: "#800080", stretch: go.GraphObject.Fill, margin: new go.Margin(0, 0, 0, 0), }, $( go.Shape, { margin: new go.Margin(0, 15, 2, 15), fill: "white", strokeWidth: 0, background: "transparent", maxSize: new go.Size(20, 20), cursor: "pointer", }, new go.Binding("geometry", geoFunc) ) ), $( go.Panel, "Vertical", { background: "transparent", }, $( go.TextBlock, { margin: new go.Margin(15, 15, 0, 15), editable: false, // editing the text automatically updates the model data stroke: "white", font: "14px Segoe UI", }, ), $( go.TextBlock, { margin: new go.Margin(0, 15, 15, 15), editable: false, // editing the text automatically updates the model data stroke: "white", font: "12px Segoe UI", alignment: go.Spot.Left, }, new go.Binding("text", "id") ) ) ) ) );
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Si define dos formas que son los lados izquierdo y derecho de un rectángulo redondeado, puede hacerlo fácilmente:
myDiagram.nodeTemplate = $(go.Node, "Auto", $(go.Shape, "RoundedRectangle", { strokeWidth: 0 }, new go.Binding("fill", "color")), $(go.Panel, "Horizontal", { margin: 3 }, // Margin will control how big the border is $(go.Shape, "RoundedLeftRectangle", { strokeWidth: 0, fill: 'red', width: 30, height: 60 }), $(go.Shape, "RoundedRightRectangle", { strokeWidth: 0, fill: 'purple', width: 100, height: 60 }) ) );Las definiciones para esas formas:
go.Shape.defineFigureGenerator("RoundedLeftRectangle", function (shape, w, h) { // this figure takes one parameter, the size of the corner var p1 = 5; // default corner size if (shape !== null) { var param1 = shape.parameter1; if (!isNaN(param1) && param1 >= 0) p1 = param1; // can't be negative or NaN } p1 = Math.min(p1, w); // limit by width & height p1 = Math.min(p1, h/3); var geo = new go.Geometry(); // a single figure consisting of straight lines and quarter-circle arcs geo.add(new go.PathFigure(w, 0) .add(new go.PathSegment(go.PathSegment.Line, w, h)) .add(new go.PathSegment(go.PathSegment.Line, p1, h)) .add(new go.PathSegment(go.PathSegment.Arc, 90, 90, p1, h - p1, p1, p1)) .add(new go.PathSegment(go.PathSegment.Line, 0, p1)) .add(new go.PathSegment(go.PathSegment.Arc, 180, 90, p1, p1, p1, p1).close())); // don't intersect with two top corners when used in an "Auto" Panel geo.spot1 = new go.Spot(0, 0, 0.3 * p1, 0.3 * p1); geo.spot2 = new go.Spot(1, 1, -0.3 * p1, 0); return geo; }); go.Shape.defineFigureGenerator("RoundedRightRectangle", function (shape, w, h) { // this figure takes one parameter, the size of the corner var p1 = 5; // default corner size if (shape !== null) { var param1 = shape.parameter1; if (!isNaN(param1) && param1 >= 0) p1 = param1; // can't be negative or NaN } p1 = Math.min(p1, w); // limit by width & height p1 = Math.min(p1, h/3); var geo = new go.Geometry(); // a single figure consisting of straight lines and quarter-circle arcs geo.add(new go.PathFigure(0, 0) .add(new go.PathSegment(go.PathSegment.Line, w - p1, 0)) .add(new go.PathSegment(go.PathSegment.Arc, 270, 90, w - p1, p1, p1, p1)) .add(new go.PathSegment(go.PathSegment.Line, w, h - p1)) .add(new go.PathSegment(go.PathSegment.Arc, 0, 90, w - p1, h - p1, p1, p1)) .add(new go.PathSegment(go.PathSegment.Line, 0, h).close())); // don't intersect with two bottom corners when used in an "Auto" Panel geo.spot1 = new go.Spot(0, 0, 0.3 * p1, 0); geo.spot2 = new go.Spot(1, 1, -0.3 * p1, -0.3 * p1); return geo; });Ejemplo en vivo: https://codepen.io/simonsarris/pen/RwLZxwp
·
Juan Pablo Isaza
Denunciar
Responde la pregunta