Позиционирование вложенных фигур GoJS

#javascript #gojs

#javascript #gojs

Вопрос:

Я пытаюсь рисовать вложенные фигуры с помощью библиотеки GoJS. На данный момент у меня есть прямоугольник с одной строкой внутри. Весь объект представляет собой панель с двумя фигурами, прямоугольником и линией минус. На данный момент все в порядке, MinusLine отображается в центре прямоугольника.

Чего я хочу добиться, так это расположить / изменить местоположение минимума сверху вниз и т. Д. На основе некоторых условий, которые я получил, однако я никак не могу его переместить. Например, переместите идеально центрированную ЖЕЛТУЮ линию в положение КРАСНОГО или КОРИЧНЕВОГО
введите описание изображения здесь

Код выглядит следующим образом:

 GO(go.Node, "Table",
    {
        layerName: "AfterForeground",
        movable: false,
        locationObjectName: "BODY",
        locationSpot: go.Spot.parse("0.5 0 0 0 "),
        selectionObjectName: "MAIN_SHAPE",
        selectionObjectName: "MAIN_SHAPE",
    },
    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),

    GO(go.Panel,go.Panel.Position, "Auto", {
        row: 1,
        column: 1,
        name: "BODY",
        stretch: go.GraphObject.Fill
    },
        GO(go.Shape, "Rectangle", {
            fill: wellColor,
            name: "MAIN_SHAPE",
            stroke: myColor,
            strokeWidth: 0.4,

        }, new go.Binding("fill", "wellColor"),
        ) , new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify)
        ,GO(go.Shape, "MinusLine", {}), // <-- Move this YELLOW line vertically somehere inside Rectangle 
    )
  

Ответ №1:

Действительно ли вам нужна панель таблиц (для типа панели узла)?

Пока у вас есть панель таблицы с одной ячейкой, и по умолчанию все объекты в ячейке будут располагаться в центре. Вы можете легко перемещать их, добавляя alignment свойство к элементам.

Вот пример вашей таблицы с двумя вложенными панелями, добавленными к узлу, одна выровнена по верху, другая выровнена по центру со смещением y, равным 30: https://codepen.io/simonsarris/pen/zYBrLaX?editors=1011

Здесь приведены другие примеры позиционирования для панели таблицы:

https://gojs.net/latest/intro/tablePanels.html

https://gojs.net/latest/intro/tablePanels.html#StretchAndAlignmente

Обратите внимание, что, поскольку вы определили шаблон, фигура занимает все пространство таблицы, с минусовой линией в центре фигуры. Вероятно, это не то, что вы хотите. Я указываю ширину и высоту фигуры и (большую) высоту таблицы, чтобы сделать демонстрацию понятной.