Поворот SVG – Rotate SVG – примеры C#

Как повернуть SVG – код C#

Используя Библиотеку Aspose.SVG for .NET, вы можете программно выполнить трансформацию поворота. В этой статье рассматриваются C# примеры для поворота SVG. Здесь вы найдете случаи использования функции rotate() в атрибуте transform, а также матрицы преобразования matrix(a,b,c,d,e,f).

Функция Rotate()

В следующем фрагменте кода C# показано, как создать элемент SVG <rect>, установить его атрибуты и применить преобразование с помощью функции rotate() для атрибута transform.

1. Создайте экземпляр класса SVGDocument. Свойство RootElement указывает на корневой элемент <svg> документа.
2. Создайте элемент <rect> с атрибутами и добавьте его к элементу <svg>:
   • Вы можете использовать метод CreateElementNS() для создания экземпляра класса SVGRectElement.
   • Вызовите метод SetAttribute(), чтобы установить атрибуты, определяющие положение, размер, заливку и преобразование. Используйте функцию rotate() для атрибута transform, который принимает угол поворота и координаты точки, вокруг которой необходимо повернуть. Если координаты не указаны, то вращение будет производиться вокруг точки (0, 0) исходной системы координат.
   • Чтобы добавить rectElement к svgElement, вы можете использовать метод AppendChild().
3. Вызовите метод Save(), чтобы сохранить полученное изображение SVG в локальный файл.

using Aspose.Svg;
using System.IO;

// Rotate an SVG element using the transform attribute programmatically with Aspose.SVG

// Set SVG Namespace URL
string SvgNamespace = "http://www.w3.org/2000/svg";

// Create a new SVG document
using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svgElement = document.RootElement;

    // Create a <rect> element and set its attributes
    SVGRectElement rectElement = (SVGRectElement)document.CreateElementNS(SvgNamespace, "rect");
    rectElement.X.BaseVal.Value = 150;
    rectElement.Y.BaseVal.Value = 50;
    rectElement.Width.BaseVal.Value = 100;
    rectElement.Height.BaseVal.Value = 100;
    rectElement.SetAttribute("fill", "purple");

    // Apply rotate() function to the SVG
    rectElement.SetAttribute("transform", "rotate(45)");

    // Append the rect element to the SVG
    svgElement.AppendChild(rectElement);

    // Save the document
    document.Save(Path.Combine(OutputDir, "rotate-svg-rect.svg"));
}

Преобразование поворачивает прямоугольник на 45 градусов вокруг точки (0, 0) исходной системы координат, поскольку координаты точки, вокруг которой нужно повернуть элемент, не были переданы в функцию rotate(). Для наглядности на рисунке показаны системы координат до и после вращения. Это показывает, что преобразование вращения выполняется путем вращения системы координат.

Поворот элемента SVG – Поворот SVG вокруг центра

В следующем фрагменте кода C# показано, как найти необходимый элемент SVG в существующем файле SVG и повернуть его. Вам следует выполнить несколько шагов:

1. Загрузите исходный файл SVG, используя один из конструкторов SVGDocument().
2. Получите корневой элемент <svg> документа.
3. Используйте метод QuerySelector(), чтобы найти первый прямоугольный элемент, который нужно повернуть. Метод QuerySelector(selector) класса Element позволяет получить первый элемент в документе, соответствующий указанному селектору.
4. Установите атрибут transform со значением Rotate(45, 100, 140) для прямоугольного элемента. Это преобразование поворачивает элемент на угол 45 градусов (по часовой стрелке) вокруг указанной точки (центра выделенного прямоугольника) с координатами (100, 140).
5. Вызовите метод Save(), чтобы сохранить полученное изображение SVG в локальный файл.

using Aspose.Svg;
using System.IO;

// Rotate a single selected element in an SVG document using C#

// Load an SVG document from a file
SVGDocument document = new SVGDocument(Path.Combine(DataDir, "shapes.svg"));

// Get the root SVG element of the document
SVGSVGElement svgElement = document.RootElement;

// Get the fist <rect> element for rotation
SVGRectElement rectElement = svgElement.QuerySelector("rect") as SVGRectElement;

// Set a new "transform" attribute with rotation value for the rectangle element
rectElement.SetAttribute("transform", "rotate(45, 100, 140)");

// Save the document
string outputPath = "rotate-element.svg";
document.Save(Path.Combine(OutputDir, outputPath));

На следующем рисунке показаны исходный SVG (a) и изображение с повернутым первым прямоугольным элементом (b). Это преобразование изменило внешний вид прямоугольника относительно других элементов. Положение, ширина и высота прямоугольника останутся прежними, но он будет визуально повернут вокруг указанной точки – в данном случае центра прямоугольника.

Примечание. Чтобы SVG элемент повернулся вокруг cвоего центра или какой-либо другой точки, вы должны использовать функцию rotate(angle, cx, cy), которая поворачивает элемент на угол вокруг точки с координатами (cx, cy). Определите (рассчитайте) положение центра изображения – его координаты – и выполняйте поворот.

Поворот элемента SVG – использование SVG Builder

Здесь мы рассмотрим тот же пример: вращение первого элемента <rect> в файле shapes.svg вокруг его центра. Однако на этот раз мы выполним эту задачу с помощью SVG Builder. SVG Builder API предлагает разработчикам мощный инструмент для упрощенного создания и обновления элементов SVG. В этом фрагменте кода:

• Метод GetElementsByTagName() используется для получения первого элемента <rect> из документа SVG.
• Создается новый экземпляр SVGRectElementBuilder для изменения свойств полученного элемента <rect>.
• Метод Transform() используется для применения преобразования вращения (поворота) к прямоугольнику. В этом случае прямоугольник поворачивается на 45 градусов вокруг точки (100, 140), указанной как центр вращения. Это преобразование изменяет ориентацию прямоугольника в документе SVG.
• После настройки элемента <rect> с желаемым преобразованием вызывается метод Build() для завершения процесса построения и применения изменений к элементу.

using Aspose.Svg.Builder;
using System.Linq;
using System.IO;

// Rotate a single selected element in an SVG document using SVG Builder API

// Load an SVG document
using (SVGDocument document = new SVGDocument(Path.Combine(DataDir, "shapes.svg")))
{
    // Find the first <rect> element for rotation
    SVGRectElement rect = document.GetElementsByTagName("rect").First() as SVGRectElement;

    // Rotate the first <rect> element around its center using the SVGRectElementBuilder
    new SVGRectElementBuilder()
        .Transform(t => t.Rotate(45, 100, 140))
        .Build(rect);

    // Save the document
    document.Save(Path.Combine(OutputDir, "rotate-element-using-builder.svg"));
}

Метод Transform() является частью SVG Builder API, который позволяет разработчикам программно применять трансформации к элементам SVG. Вы можете изменять положение, поворот, масштаб и наклон элементов SVG. Метод Transform() обычно принимает в качестве аргументов одну или несколько функций трансформации, каждая из которых определяет определенный тип преобразования. Эти функции включают в себя:

• Трансляцию Translate() – перемещает элемент по осям x и y.
• Поворот Rotate() – вращает элемент вокруг указанной точки.
• Масштабирование Scale() – масштабирует элемент по осям x и y.
• Наклон SkewX() и SkewY() – наклоняет элемент по осям x и y соответственно.

Метод Transform() позволяет объединять несколько функций преобразования для применения более сложных преобразований.

В статье SVG Builder API рассматриваются возможности Aspose.SVG Builder API для создания и изменения элементов SVG на C#. SVG Builder API предназначен для упрощения создания и обновления элементов SVG на C#. Вы увидите эффективность шаблона Fluent Builder и миксинов при манипуляциях с SVG. Вы узнаете о классах и методах, специализированных сборщиках и о том, как они упрощают программирование SVG.

Матрица преобразования SVG – Матрица поворота

Здесь мы рассмотрим пример C# для поворота всего изображения SVG, а не отдельного его элемента, и реализуем преобразование с использованием матрицы поворота. Давайте подробнее рассмотрим код C# для применения матрицы поворота.

1. Загрузите исходный файл SVG, используя один из конструкторов SVGDocument().
2. Получите корневой элемент <svg> документа.

• Примечание. Чтобы применить какое-либо преобразование ко всему SVG-изображению, вам необходимо применить атрибут transform к корневому элементу <svg>.

3. Используйте метод GetCTM() класса SVGGraphicsElement, который возвращает текущую матрицу преобразования (CTM), связанную с элементом <svg>. CTM представляет совокупные преобразования, примененные к элементу, и включает информацию о перемещении, вращении, масштабировании и наклоне, которые можно применить к элементу.
4. После получения CTM используйте метод Rotate(), который выполняет преобразование поворота после умножения текущей матрицы и возвращает результирующую матрицу. Метод Rotate(angle) принимает только один аргумент – угол. Этот параметр является обязательным и представляет величину вращения, которую вы хотите применить.
5. Создайте transformAttribute – строковое представление двумерной матрицы преобразования, используя значения из модифицированной матрицы преобразования transformationMatrix. Матричное обозначение: matrix(a, b, c, d, e, f).
6. Вызовите метод SetAttribute(), чтобы установить атрибут transform элемента <svg>, используя строку transformAttribute.
7. Вызовите метод Save(), чтобы сохранить полученное изображение SVG в локальный файл.

using Aspose.Svg.Builder;
using System.Linq;
using System.IO;

// Rotate an entire SVG document using a transformation matrix programmatically in C#

// Load an SVG document
string documentPath = Path.Combine(DataDir, "shapes.svg");
using (SVGDocument document = new SVGDocument(documentPath))
{
    SVGSVGElement svgElement = document.RootElement;

    // Get the transformation matrix associated with the svgElement
    SVGMatrix transformationMatrix = svgElement.GetCTM();
    transformationMatrix = transformationMatrix.Rotate(45);

    // Apply the transformation matrix to the svgElement
    string transformAttribute = "matrix(" + transformationMatrix.A + "," + transformationMatrix.B + ","
                                + transformationMatrix.C + "," + transformationMatrix.D + "," + transformationMatrix.E + ","
                                + transformationMatrix.F + ")";
    svgElement.SetAttribute("transform", transformAttribute);

    // Save the document
    document.Save(Path.Combine(OutputDir, "rotate-matrix.svg"));
}

На следующем рисунке показаны исходный SVG (а) и повернутое изображение (b).

Смотрите также

• Вы можете скачать полные примеры и файлы данных с GitHub.
  
• О загрузке с GitHub и запуске примеров вы узнаете из раздела Как запускать примеры.
  
• Чтобы узнать, как использовать матрицу преобразования для поворота, масштабирования, перевода и наклона графики SVG, а также рассмотреть примеры кода SVG, перейдите к статье Матрица преобразования – примеры кода SVG.
  
• Прочтите статью Трансформации SVG – основы, примеры SVG кода, чтобы узнать больше и получить примеры кода SVG для вращения, масштабирования, перемещения и наклона графики SVG с использованием атрибута преобразования SVG.