Коннектор

Коннектор PowerPoint — это специальная линия, которая соединяет две фигуры и остаётся привязанной к фигурам даже при их перемещении или переустановке на данном слайде.

Коннекторы обычно соединяются с точками соединения (зелёными точками), которые по умолчанию присутствуют на всех фигурах. Точки соединения появляются, когда курсор приближается к ним.

Точки регулировки (оранжевые точки), которые существуют только у некоторых коннекторов, используются для изменения положения и формы коннекторов.

Типы коннекторов

В PowerPoint можно использовать прямые, локтевые (угловые) и изогнутые коннекторы.

Aspose.Slides предоставляет следующие коннекторы:

Коннектор Изображение Количество точек регулировки
ShapeType.Line shapetype-lineconnector 0
ShapeType.StraightConnector1 shapetype-straightconnector1 0
ShapeType.BentConnector2 shapetype-bent-connector2 0
ShapeType.BentConnector3 shapetype-bentconnector3 1
ShapeType.BentConnector4 shapetype-bentconnector4 2
ShapeType.BentConnector5 shapetype-bentconnector5 3
ShapeType.CurvedConnector2 shapetype-curvedconnector2 0
ShapeType.CurvedConnector3 shapetype-curvedconnector3 1
ShapeType.CurvedConnector4 shapetype-curvedconnector4 2
ShapeType.CurvedConnector5 shapetype.curvedconnector5 3

Соединение фигур с помощью коннекторов

  1. Создайте экземпляр класса Presentation.
  2. Получите ссылку на слайд по его индексу.
  3. Добавьте две AutoShape на слайд, используя метод addAutoShape, предоставляемый объектом Shapes.
  4. Добавьте коннектор, используя метод addConnector, предоставляемый объектом Shapes, указав тип коннектора.
  5. Соедините фигуры с помощью коннектора.
  6. Вызовите метод reroute, чтобы применить кратчайший путь соединения.
  7. Сохраните презентацию.

В этом коде JavaScript показано, как добавить коннектор (изогнутый коннектор) между двумя фигурами (эллипсом и прямоугольником):

// Создает экземпляр класса презентации, представляющего файл PPTX
var pres = new aspose.slides.Presentation();
try {
    // Получает коллекцию фигур для конкретного слайда
    var shapes = pres.getSlides().get_Item(0).getShapes();
    // Добавляет автоконтур в виде эллипса
    var ellipse = shapes.addAutoShape(aspose.slides.ShapeType.Ellipse, 0, 100, 100, 100);
    // Добавляет автоконтур в виде прямоугольника
    var rectangle = shapes.addAutoShape(aspose.slides.ShapeType.Rectangle, 100, 300, 100, 100);
    // Добавляет форму‑коннектор в коллекцию фигур слайда
    var connector = shapes.addConnector(aspose.slides.ShapeType.BentConnector2, 0, 0, 10, 10);
    // Соединяет фигуры с помощью коннектора
    connector.setStartShapeConnectedTo(ellipse);
    connector.setEndShapeConnectedTo(rectangle);
    // Вызывает reroute, который устанавливает автоматически кратчайший путь между фигурами
    connector.reroute();
    // Сохраняет презентацию
    pres.save("output.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Указание точки соединения

Если вы хотите, чтобы коннектор соединял две фигуры, используя определённые точки на фигурах, необходимо указать желаемые точки соединения следующим образом:

  1. Создайте экземпляр класса Presentation.
  2. Получите ссылку на слайд по его индексу.
  3. Добавьте две AutoShape на слайд, используя метод addAutoShape, предоставляемый объектом Shapes.
  4. Добавьте коннектор, используя метод addConnector, предоставляемый объектом Shapes, указав тип коннектора.
  5. Соедините фигуры с помощью коннектора.
  6. Установите желаемые точки соединения на фигурах.
  7. Сохраните презентацию.

В этом коде JavaScript продемонстрирована операция, где указана предпочтительная точка соединения:

// Создает экземпляр класса презентации, представляющего файл PPTX
var pres = new aspose.slides.Presentation();
try {
    // Получает коллекцию фигур для конкретного слайда
    var shapes = pres.getSlides().get_Item(0).getShapes();
    // Добавляет автоконтур в виде эллипса
    var ellipse = shapes.addAutoShape(aspose.slides.ShapeType.Ellipse, 0, 100, 100, 100);
    // Добавляет автоконтур в виде прямоугольника
    var rectangle = shapes.addAutoShape(aspose.slides.ShapeType.Rectangle, 100, 300, 100, 100);
    // Добавляет форму‑коннектор в коллекцию фигур слайда
    var connector = shapes.addConnector(aspose.slides.ShapeType.BentConnector2, 0, 0, 10, 10);
    // Соединяет фигуры с помощью коннектора
    connector.setStartShapeConnectedTo(ellipse);
    connector.setEndShapeConnectedTo(rectangle);
    // Устанавливает индекс предпочтительной точки соединения для фигуры Эллипс
    var wantedIndex = 6;
    // Проверяет, меньше ли предпочтительный индекс максимального количества точек соединения
    if (ellipse.getConnectionSiteCount() > wantedIndex) {
        // Устанавливает предпочтительную точку соединения на автоконтуре Эллипс
        connector.setStartShapeConnectionSiteIndex(wantedIndex);
    }
    // Сохраняет презентацию
    pres.save("output.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Регулировка точки коннектора

Вы можете отрегулировать существующий коннектор с помощью его точек регулировки. Только коннекторы с точками регулировки можно изменять таким образом. Смотрите таблицу в разделе Типы коннекторов.

Простой случай

Рассмотрите случай, когда коннектор между двумя фигурами (A и B) проходит через третью фигуру (C):

connector-obstruction

var pres = new aspose.slides.Presentation();
try {
    var sld = pres.getSlides().get_Item(0);
    var shape = sld.getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, 300, 150, 150, 75);
    var shapeFrom = sld.getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, 500, 400, 100, 50);
    var shapeTo = sld.getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, 100, 100, 70, 30);
    var connector = sld.getShapes().addConnector(aspose.slides.ShapeType.BentConnector5, 20, 20, 400, 300);
    connector.getLineFormat().setEndArrowheadStyle(aspose.slides.LineArrowheadStyle.Triangle);
    connector.getLineFormat().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Solid));
    connector.getLineFormat().getFillFormat().getSolidFillColor().setColor(java.getStaticFieldValue("java.awt.Color", "BLACK"));
    connector.setStartShapeConnectedTo(shapeFrom);
    connector.setEndShapeConnectedTo(shapeTo);
    connector.setStartShapeConnectionSiteIndex(2);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Чтобы избежать или обойти третью фигуру, мы можем отрегулировать коннектор, переместив его вертикальную линию влево следующим образом:

connector-obstruction-fixed

var adj2 = connector.getAdjustments().get_Item(1);
adj2.setRawValue(adj2.getRawValue() + 10000);

Сложные случаи

Для выполнения более сложных регулировок необходимо учитывать следующее:

  • Точка регулировки коннектора тесно связана с формулой, которая вычисляет и определяет её положение. Поэтому изменения местоположения точки могут изменить форму коннектора.
  • Точки регулировки коннектора определены в строгом порядке в массиве. Точки регулировки нумеруются от начальной точки коннектора к конечной.
  • Значения точек регулировки отражают процент ширины/высоты формы коннектора.
    • Форма ограничена начальной и конечной точками коннектора, умноженными на 1000.
    • Первая точка, вторая точка и третья точка соответственно определяют процент от ширины, процент от высоты и снова процент от ширины.
  • Для вычислений, определяющих координаты точек регулировки коннектора, необходимо учитывать вращение коннектора и его отражение. Примечание: угол вращения всех коннекторов, показанных в разделе Типы коннекторов, равен 0.

Случай 1

Рассмотрите случай, когда два текстовых фрейма связаны друг с другом через коннектор:

connector-shape-complex

// Создает экземпляр класса презентации, представляющего файл PPTX
var pres = new aspose.slides.Presentation();
try {
    // Получает первый слайд в презентации
    var sld = pres.getSlides().get_Item(0);
    // Добавляет фигуры, которые будут соединены коннектором
    var shapeFrom = sld.getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, 100, 100, 60, 25);
    shapeFrom.getTextFrame().setText("From");
    var shapeTo = sld.getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, 500, 100, 60, 25);
    shapeTo.getTextFrame().setText("To");
    // Добавляет коннектор
    var connector = sld.getShapes().addConnector(aspose.slides.ShapeType.BentConnector4, 20, 20, 400, 300);
    // Указывает направление коннектора
    connector.getLineFormat().setEndArrowheadStyle(aspose.slides.LineArrowheadStyle.Triangle);
    // Указывает цвет коннектора
    connector.getLineFormat().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Solid));
    connector.getLineFormat().getFillFormat().getSolidFillColor().setColor(java.getStaticFieldValue("java.awt.Color", "RED"));
    // Указывает толщину линии коннектора
    connector.getLineFormat().setWidth(3);
    // Связывает фигуры вместе с помощью коннектора
    connector.setStartShapeConnectedTo(shapeFrom);
    connector.setStartShapeConnectionSiteIndex(3);
    connector.setEndShapeConnectedTo(shapeTo);
    connector.setEndShapeConnectionSiteIndex(2);
    // Получает точки регулировки для коннектора
    var adjValue_0 = connector.getAdjustments().get_Item(0);
    var adjValue_1 = connector.getAdjustments().get_Item(1);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Регулировка

Мы можем изменить значения точек регулировки коннектора, увеличив соответствующий процент ширины и высоты на 20 % и 200 % соответственно:

// Изменяет значения точек регулировки
adjValue_0.setRawValue(adjValue_0.getRawValue() + 20000);
adjValue_1.setRawValue(adjValue_1.getRawValue() + 200000);

Результат:

connector-adjusted-1

Чтобы определить модель, позволяющую вычислять координаты и форму отдельных частей коннектора, создадим форму, соответствующую горизонтальному компоненту коннектора в точке connector.getAdjustments().get_Item(0):

// Рисуем вертикальную компоненту коннектора
var x = connector.getX() + ((connector.getWidth() * adjValue_0.getRawValue()) / 100000);
var y = connector.getY();
var height = (connector.getHeight() * adjValue_1.getRawValue()) / 100000;
sld.getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, x, y, 0, height);

Результат:

connector-adjusted-2

Случай 2

В Случае 1 мы продемонстрировали простую операцию регулировки коннектора, используя базовые принципы. В обычных ситуациях необходимо учитывать вращение коннектора и его отображение (которые задаются методами connector.getRotation(), connector.getFrame().getFlipH() и connector.getFrame().getFlipV()). Сейчас мы покажем процесс.

Сначала добавим новый объект текстового фрейма (To 1) на слайд (для целей соединения) и создадим новый (зелёный) коннектор, который соединит его с уже созданными объектами.

// Создает новый объект привязки
var shapeTo_1 = sld.getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, 100, 400, 60, 25);
shapeTo_1.getTextFrame().setText("To 1");
// Создает новый коннектор
connector = sld.getShapes().addConnector(aspose.slides.ShapeType.BentConnector4, 20, 20, 400, 300);
connector.getLineFormat().setEndArrowheadStyle(aspose.slides.LineArrowheadStyle.Triangle);
connector.getLineFormat().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Solid));
connector.getLineFormat().getFillFormat().getSolidFillColor().setColor(java.getStaticFieldValue("java.awt.Color", "CYAN"));
connector.getLineFormat().setWidth(3);
// Связывает объекты с помощью только что созданного коннектора
connector.setStartShapeConnectedTo(shapeFrom);
connector.setStartShapeConnectionSiteIndex(2);
connector.setEndShapeConnectedTo(shapeTo_1);
connector.setEndShapeConnectionSiteIndex(3);
// Получает точки регулировки коннектора
adjValue_0 = connector.getAdjustments().get_Item(0);
adjValue_1 = connector.getAdjustments().get_Item(1);
// Изменяет значения точек регулировки
adjValue_0.setRawValue(adjValue_0.getRawValue() + 20000);
adjValue_1.setRawValue(adjValue_1.getRawValue() + 200000);

Результат:

connector-adjusted-3

Затем создадим форму, соответствующую горизонтальному компоненту коннектора, проходящего через новую точку регулировки коннектора connector.getAdjustments().get_Item(0). Мы используем значения из данных коннектора для connector.getRotation(), connector.getFrame().getFlipH() и connector.getFrame().getFlipV() и применим известную формулу преобразования координат при вращении вокруг заданной точки x0:

X = (x — x0) * cos(alpha) — (y — y0) * sin(alpha) + x0;

Y = (x — x0) * sin(alpha) + (y — y0) * cos(alpha) + y0;

В нашем случае угол вращения объекта составляет 90 градусов, а коннектор отображается вертикально, поэтому соответствующий код выглядит так:

// Сохраняет координаты коннектора
x = connector.getX();
y = connector.getY();
// Корректирует координаты коннектора в случае появления
if (connector.getFrame().getFlipH() == aspose.slides.NullableBool.True) {
    x += connector.getWidth();
}
if (connector.getFrame().getFlipV() == aspose.slides.NullableBool.True) {
    y += connector.getHeight();
}
// Берёт значение точки регулировки как координату
x += (connector.getWidth() * adjValue_0.getRawValue()) / 100000;
// Преобразует координаты, так как Sin(90) = 1 и Cos(90) = 0
var xx = (connector.getFrame().getCenterX() - y) + connector.getFrame().getCenterY();
var yy = (x - connector.getFrame().getCenterX()) + connector.getFrame().getCenterY();
// Определяет ширину горизонтального компонента, используя значение второй точки регулировки
var width = (connector.getHeight() * adjValue_1.getRawValue()) / 100000;
var shape = sld.getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, xx, yy, width, 0);
shape.getLineFormat().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Solid));
shape.getLineFormat().getFillFormat().getSolidFillColor().setColor(java.getStaticFieldValue("java.awt.Color", "RED"));

Результат:

connector-adjusted-4

Мы продемонстрировали расчёты, связанные как с простыми, так и со сложными точками регулировки (точки с углами вращения). Полученными знаниями вы можете разработать собственную модель (или написать код) для получения объекта GraphicsPath или даже установить значения точек регулировки коннектора на основе конкретных координат слайда.

Определение угла линий коннектора

  1. Создайте экземпляр класса.
  2. Получите ссылку на слайд по его индексу.
  3. Получите доступ к форме линии коннектора.
  4. Используйте ширину и высоту линии, высоту и ширину рамки фигуры для вычисления угла.

В этом коде JavaScript продемонстрирована операция, в которой мы вычислили угол линии коннектора:

var pres = new aspose.slides.Presentation("ConnectorLineAngle.pptx");
try {
    var slide = pres.getSlides().get_Item(0);
    for (var i = 0; i < slide.getShapes().size(); i++) {
        var dir = 0.0;
        var shape = slide.getShapes().get_Item(i);
        if (java.instanceOf(shape, "com.aspose.slides.AutoShape")) {
            var ashp = shape;
            if (ashp.getShapeType() == aspose.slides.ShapeType.Line) {
                dir = getDirection(ashp.getWidth(), ashp.getHeight(), ashp.getFrame().getFlipH() > 0, ashp.getFrame().getFlipV() > 0);
            }
        } else if (java.instanceOf(shape, "com.aspose.slides.Connector")) {
            var ashp = shape;
            dir = getDirection(ashp.getWidth(), ashp.getHeight(), ashp.getFrame().getFlipH() > 0, ashp.getFrame().getFlipV() > 0);
        }
        console.log(dir);
    }
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

function getDirection(w, h, flipH, flipV) {
    let endLineX = w * (flipH ? -1 : 1);
    let endLineY = h * (flipV ? -1 : 1);
    
    let endYAxisX = 0;
    let endYAxisY = h;

    let angle = Math.atan2(endYAxisY, endYAxisX) - Math.atan2(endLineY, endLineX);

    if (angle < 0) {
        angle += 2 * Math.PI;
    }

    return angle * 180.0 / Math.PI;
}

FAQ

How can I tell whether a connector can be “glued” to a specific shape?
Проверьте, что фигура предоставляет точки соединения. Если их нет или их количество равно нулю, возможность «приклеить» недоступна; в этом случае используйте свободные концы и разместите их вручную. Рекомендуется проверять количество точек перед привязкой.

What happens to a connector if I delete one of the connected shapes?
Концы оторвутся; коннектор останется на слайде как обычная линия со свободными началом/концом. Вы можете либо удалить его, либо переназначить соединения и при необходимости перенаправить.

Are connector bindings preserved when copying a slide to another presentation?
Обычно да, при условии, что целевые фигуры также копируются. Если слайд вставлен в другой файл без подключенных фигур, концы становятся свободными, и их потребуется повторно прикрепить.

Просмотрщик презентаций