Hi
I want to ask is it possible in GoJS to create a single custom shape that is a combination of two predefined shapes?
like DoubleCircle custom shape that is a circle inside another circle?
thanks
There are several choices, depending on what you need.
You can combine two separate Shapes into a single Panel. That way you can retain independent control over the shape’s stroke and fill and size and position.
You can combine two separate Shapes into a single Shape if you combine their Geometry objects into a single Geometry object. Usually that is a matter of creating a new Geometry that has the combined PathFigures of both. But you’ll need to adjust the points of the PathFigures/PathSegments so that their relative positions are as you want them to be. And of course, a single Shape can have only a single Shape.fill and a Shape.stroke.
Thank you very much for your quick response
Is there an example showing similar to this? Because
I am compeletly new to gojs
There are several samples that demonstrate creating Geometry objects dynamically. For example, in the Candlestick Chart sample:
function produceRange(d) {
var h = 12; // total height for the markers
var w = 3; // half width for the median marker
// using constructors is more efficient than calling go.GraphObject.make:
return new go.Geometry()
.add(new go.PathFigure(d.min, h / 2, false)
.add(new go.PathSegment(go.PathSegment.Line, d.max, h / 2)))
.add(new go.PathFigure(d.min, 0, false)
.add(new go.PathSegment(go.PathSegment.Line, d.min, h)))
.add(new go.PathFigure(d.max, 0, false)
.add(new go.PathSegment(go.PathSegment.Line, d.max, h)))
.add(new go.PathFigure(d.val-w, 0)
.add(new go.PathSegment(go.PathSegment.Line, d.val+w, 0))
.add(new go.PathSegment(go.PathSegment.Line, d.val + w, h))
.add(new go.PathSegment(go.PathSegment.Line, d.val - w, h).close()));
}
You’ll want to follow this pattern for building the two (or more?) PathFigures in your one Geometry.
sorry but I tried to find what is pathFigure for circle but I could not
is it this?
var geo = new go.Geometry(go.Geometry.Ellipse);
geo.startX = 0;
geo.startY = 0;
geo.endX = w;
geo.endY = h;
geo.spot1 = GeneratorEllipseSpot1;
geo.spot2 = GeneratorEllipseSpot2;
geo.defaultStretch = go.GraphObject.Uniform;
return geo;
and I have to choosec type arc right?
(go.PathSegment.Arc, startAngle, sweepAngle, centerX, centerY, radiusX, radiusY)
I tried this but it is wrong =(
go.Shape.defineFigureGenerator(‘DoubleCircle’, function (shape, w, h) {
var path = new go.PathFigure(0, 0);
path.add((go.PathSegment.Arc, 0, 90, 40, 40, 60, 60).close());
var geo = new go.Geometry();
geo.add(path);
geo.spot1 = new go.Spot(0.156, 0.156);
geo.spot2 = new go.Spot(0.844, 0.844);
return geo;
});Here’s the code for the “Ring” figure, which you can probably adapt to get what you want:
go.Shape.defineFigureGenerator("Ring", function(shape, w, h) {
var param1 = shape ? shape.parameter1 : NaN;
if (isNaN(param1) || param1 < 0) param1 = 8;
var rad = w / 2;
var geo = new go.Geometry();
var fig = new go.PathFigure(w, w / 2, true); // clockwise
geo.add(fig);
fig.add(new go.PathSegment(go.PathSegment.Arc, 0, 360, rad, rad, rad, rad).close());
var rad2 = Math.max(rad - param1, 0);
if (rad2 > 0) { // counter-clockwise
fig.add(new go.PathSegment(go.PathSegment.Move, w / 2 + rad2, w / 2))
fig.add(new go.PathSegment(go.PathSegment.Arc, 0, -360, rad, rad, rad2, rad2).close());
}
geo.spot1 = new go.Spot(0.156, 0.156);
geo.spot2 = new go.Spot(0.844, 0.844);
geo.defaultStretch = go.GraphObject.Uniform;
return geo;
});
You probably want to change the second arc to be clockwise so the whole figure gets filled, and maybe the way the rings are sized.
thankkkk you it worked
what about if I want to add different shapes beside each other to be considered as one shape, is there any link explaining how to choose the coordination and
other neccessary information?
https://gojs.net/latest/intro/geometry.html
But really, you should read Paths — SVG 2 and maybe some other websites that talk about SVG geometries. GoJS geometries are a superset of the SVG geometries, but most of it is pretty much the same.
Hello, I am new to gojs.
How to make a custom shape with circles ? I am trying to make a venn diagram shape but no success
It depends on whether you need a single Geometry or not – do you need to show a single Shape or not?
If you do, you need to write the geometry path string for that. GoJS Geometry Path Strings -- Northwoods Software If you have trouble with that, you can use any drawing tool that can generate a single SVG path string.
If you do not, you could use a “Position” Panel holding some number of “Circle” Shapes.
Thanks for the response.
I need to show a single shape. I am trying to refer the above ‘Ring’ shape example. Just i am not getting to change the center of the 2nd circle so that the two circle co-incides.
Also, i have added the 3rd circle in the Ring Shape which i am trying to make it co-incide with the above two circles.
Do i have any provision to shift the center of the circle.
This i am trying to make as a single shape.
You need to have a PathSegment.Move that goes to where you want to start drawing the circle.
i am triyng with the below code:
go.Shape.defineFigureGenerator(“Venn”, function(shape,w,h) {
var param1 = 10;
var rad = w / 2;
var geo = new go.Geometry();
var fig = new go.PathFigure(w, w / 2, true);
geo.add(fig);
fig.add(new go.PathSegment(go.PathSegment.Arc, 0, 360, rad, rad, rad, rad).close());
var rad2 = 30;
fig.add(new go.PathSegment(go.PathSegment.Move,80, 70))
fig.add(new go.PathSegment(go.PathSegment.Arc, 0, 360, rad, rad, rad2, rad2).close());
var rad3 = 25;
fig.add(new go.PathSegment(go.PathSegment.Move,30, 40))
fig.add(new go.PathSegment(go.PathSegment.Arc, 0, 360, rad2, rad2, rad3, rad3).close());
return geo;
});
Current o/p:
Expected o/p:
Thanks for the help. Changing of centers worked.
Hello, With pathfigure, I am getting a radius line in the circles. I do not want that. When I am adding the pathSegment directly in the go.Geometry object, it gives me a error. “Cannot read property ‘s’ of undefined.”
Please help in this if you can