Change Center Point of Shape

GoJS
1

Hello, I am trying to find how I can change the center point of a shape that way I can have the rotation axis be at the bottom. I’m trying to create something very similar to how a clock works. In a clock, the hour and minute handles have a rotation axis at the bottom center. Below is what I have so far.

   dia.add(
      $(go.Part, "Position",
      {
        locationSpot: go.Spot.Bottom
      },
        $(go.Shape, "lineV", {
          fill:"red",
          position: new go.Point(25,-25),
          angle:90,
          
        }),
        $(go.Shape, "Circle", {
          fill:"green",
        }),

      )
    )

LineV angle set at 0
image

LineV angle set at 90
image

2

Are you trying to do something like the indicators in An Instrument Gauge ?

Note how that red Shape is defined, so that the center is at 0,0.

$(go.Shape,
    {
      fill: "red", strokeWidth: 0,
      geometryString: "F1 M-6 0 L0 -6 100 0 0 6z x M-100 0"
     },
    new go.Binding("angle", "value", convertValueToAngle)),
3

Yes something similar to that. The problem I’m having right now is the rotation point seems to be in the center which is why the lineV is sitting above the circle. Where in the example you provided it seems like the shape is consistently rotating at the bottom.

Current Rotation point
image

Accurate Rotation Point
image

4

I also took a look at the Control Gauges example and am seeing how the rotation point is also correct for the Needle Meeter and Circular Meter. I’m not trying to create a “Meter,” but I do need something similar to this functionality that allows me to rotate the line like the needle in the meter.

image
image1217×916 120 KB

5

Note how the Geometry is 200 wide, so that as the Shape is rotated about the middle point just by setting/binding the angle, the middle point stays the same within the Shape.