Основные сведения о пути в SkiaSharpPath Basics in SkiaSharp

Загрузить образец загрузить примерDownload Sample Download the sample

Изучение объекта SkiaSharp SKPath объединения соединенных линий и кривыхExplore the SkiaSharp SKPath object for combining connected lines and curves

Одной из самых важных особенностей графический контур является возможность определить, когда должны быть подключены несколько строк, и когда они не должны быть подключены.One of the most important features of the graphics path is the ability to define when multiple lines should be connected and when they should not be connected. Разница может быть значительной, как верхние края этих двух треугольниках показывают:The difference can be significant, as the tops of these two triangles demonstrate:

Графический путь инкапсулирован с SKPath объекта.A graphics path is encapsulated by the SKPath object. Путь состоит из одного или нескольких контуров.A path is a collection of one or more contours. Каждый профиль — это коллекция подключенных прямых и изогнутых линий.Each contour is a collection of connected straight lines and curves. Профили не подключены друг к другу, но они могут визуально перекрываться.Contours are not connected to each other but they might visually overlap. Иногда один профиль может перекрывать сам себя.Sometimes a single contour can overlap itself.

Профиль, обычно начинается с вызова следующих метода SKPath:A contour generally begins with a call to the following method of SKPath:

  • MoveTo Чтобы начать новый профильMoveTo to begin a new contour

Аргумент этого метода является единственной точкой, который можно выразить как SKPoint значение или как отдельный X и Y координаты.The argument to that method is a single point, which you can express either as an SKPoint value or as separate X and Y coordinates. MoveTo Вызов устанавливает точку в начале контур и первоначальный текущей точки.The MoveTo call establishes a point at the beginning of the contour and an initial current point. Можно вызвать следующие методы для продолжения профиль с линий или кривых из текущего расположения на момент, указанный в методе, которая становится новой текущей точки:You can call the following methods to continue the contour with a line or curve from the current point to a point specified in the method, which then becomes the new current point:

  • LineTo Чтобы добавить прямой путьLineTo to add a straight line to the path
  • ArcTo для добавления дуги, который является строкой в окружности эллипса или кругаArcTo to add an arc, which is a line on the circumference of a circle or ellipse
  • CubicTo Чтобы добавить сплайна Безье третьего порядкаCubicTo to add a cubic Bezier spline
  • QuadTo для добавления квадратичной кривой БезьеQuadTo to add a quadratic Bezier spline
  • ConicTo Чтобы добавить rational квадратичная кривая Безье, которой можно точно визуализировать conic разделы (кнопку с многоточием, параболы и гиперболы)ConicTo to add a rational quadratic Bezier spline, which can accurately render conic sections (ellipses, parabolas, and hyperbolas)

Эти пять методов не содержат все сведения, необходимые для описания линий или кривых.None of these five methods contain all the information necessary to describe the line or curve. Каждый из этих пяти методов работает совместно с текущей точкой установить непосредственно перед вызовом метода.Each of these five methods works in conjunction with the current point established by the method call immediately preceding it. Например LineTo метод добавляет прямой путь профиль на основе текущей точки, поэтому параметра LineTo является единой точкой отказа.For example, the LineTo method adds a straight line to the contour based on the current point, so the parameter to LineTo is only a single point.

SKPath Класс также определяет методы, которые имеют те же имена, что эти шесть методов, но с R в начале:The SKPath class also defines methods that have the same names as these six methods but with an R at the beginning:

R Расшифровывается относительный.The R stands for relative. Эти методы имеют тот же синтаксис, что и соответствующие методы без R , но являются относительно текущей точки.These methods have the same syntax as the corresponding methods without the R but are relative to the current point. Это удобно для рисования аналогичные части пути в методе, который можно вызывать несколько раз.These are handy for drawing similar parts of a path in a method that you call multiple times.

Профиль заканчивается другой вызов MoveTo или RMoveTo, начинается новый профиль, или вызов Close, который закрывает контур.A contour ends with another call to MoveTo or RMoveTo, which begins a new contour, or a call to Close, which closes the contour. Close Метод автоматически добавляет прямую линию из текущего расположения до первой точки контура и отмечает путь как закрытые, это означает, что он будет отображен без любой концы штрихов.The Close method automatically appends a straight line from the current point to the first point of the contour, and marks the path as closed, which means that it will be rendered without any stroke caps.

Разница между замкнутые и незамкнутые контуры показана в двух контуров треугольник странице, которая использует SKPath объекта с помощью двух контуров для подготовки к просмотру двух треугольниках.The difference between open and closed contours is illustrated in the Two Triangle Contours page, which uses an SKPath object with two contours to render two triangles. Первый профиль является открытым и закрывается второй.The first contour is open and the second is closed. Вот TwoTriangleContoursPage класса:Here's the TwoTriangleContoursPage class:

void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
    SKImageInfo info = args.Info;
    SKSurface surface = args.Surface;
    SKCanvas canvas = surface.Canvas;

    canvas.Clear();

    // Create the path
    SKPath path = new SKPath();

    // Define the first contour
    path.MoveTo(0.5f * info.Width, 0.1f * info.Height);
    path.LineTo(0.2f * info.Width, 0.4f * info.Height);
    path.LineTo(0.8f * info.Width, 0.4f * info.Height);
    path.LineTo(0.5f * info.Width, 0.1f * info.Height);

    // Define the second contour
    path.MoveTo(0.5f * info.Width, 0.6f * info.Height);
    path.LineTo(0.2f * info.Width, 0.9f * info.Height);
    path.LineTo(0.8f * info.Width, 0.9f * info.Height);
    path.Close();

    // Create two SKPaint objects
    SKPaint strokePaint = new SKPaint
    {
        Style = SKPaintStyle.Stroke,
        Color = SKColors.Magenta,
        StrokeWidth = 50
    };

    SKPaint fillPaint = new SKPaint
    {
        Style = SKPaintStyle.Fill,
        Color = SKColors.Cyan
    };

    // Fill and stroke the path
    canvas.DrawPath(path, fillPaint);
    canvas.DrawPath(path, strokePaint);
}

Первый профиль состоит из вызова MoveTo с помощью координат X и Y, а не SKPoint значения с трех вызовов LineTo для рисуется три стороны треугольник.The first contour consists of a call to MoveTo using X and Y coordinates rather than an SKPoint value, followed by three calls to LineTo to draw the three sides of the triangle. Второй профиль содержит только два вызова LineTo , но ее завершения профиль с помощью вызова Close , который закрывает контур.The second contour has only two calls to LineTo but it finishes the contour with a call to Close, which closes the contour. Различие важно:The difference is significant:

Как вы видите, первый профиль очевидно, что представляет собой ряд три соединенных линий, но окончания не сможет подключиться с самого начала.As you can see, the first contour is obviously a series of three connected lines, but the end doesn't connect with the beginning. В верхней перекрываться две строки.The two lines overlap at the top. Второй профиль, очевидно, что закрыта и осуществлялось с помощью одного меньше LineTo вызывает, поскольку Close метод автоматически добавляет последней строке, чтобы закрыть контур.The second contour is obviously closed, and was accomplished with one fewer LineTo calls because the Close method automatically adds a final line to close the contour.

SKCanvas определяет только один DrawPath метод, который в этой демонстрации вызывается дважды для заполнения и обводки путь.SKCanvas defines only one DrawPath method, which in this demonstration is called twice to fill and stroke the path. Все профили заполняются, даже те, которые не закрыты.All contours are filled, even those that are not closed. В целях заполнения незамкнутых прямой предполагается, что существует между начальной и конечной точек из контуров.For purposes of filling unclosed paths, a straight line is assumed to exist between the start and end points of the contours. При удалении последнего LineTo из первого профиль, или удалите Close вызов из второй профиль, а каждый профиль будет иметь только двух сторон но будет заполняться, как если бы он был треугольника.If you remove the last LineTo from the first contour, or remove the Close call from the second contour, each contour will have only two sides but will be filled as if it were a triangle.

SKPath Определяет множество методов и свойств.SKPath defines many other methods and properties. Следующие методы позволяют добавлять контуров весь путь, который может быть закрыт или не закрывается в зависимости от метода:The following methods add entire contours to the path, which might be closed or not closed depending on the method:

  • AddRect
  • AddRoundedRect
  • AddCircle
  • AddOval
  • AddArc Чтобы добавить кривую на длины окружности эллипсAddArc to add a curve on the circumference of an ellipse
  • AddPath Чтобы добавить другой путь к текущему путиAddPath to add another path to the current path
  • AddPathReverse Чтобы добавить другой путь в обратном порядкеAddPathReverse to add another path in reverse

Имейте в виду, что SKPath объект определяет только геометрического объекта — последовательность точек и подключений.Keep in mind that an SKPath object defines only a geometry — a series of points and connections. Только тогда, когда SKPath объединяется с SKPaint объект — это путь к просмотру с определенным цветом, толщина и т. д.Only when an SKPath is combined with an SKPaint object is the path rendered with a particular color, stroke width, and so forth. Кроме того, имейте в виду, что SKPaint объект, передаваемый в DrawPath метод определяет характеристики весь путь.Also, keep in mind that the SKPaint object passed to the DrawPath method defines characteristics of the entire path. Если вы хотите нарисуйте что-нибудь, требующих несколько цветов, необходимо использовать отдельный путь для каждого цвета.If you want to draw something requiring several colors, you must use a separate path for each color.

Определяется так же, как внешний вид начало и конец строки определяется наконечник штриха, внешний вид соединения между двумя строками соединение штриха.Just as the appearance of the start and end of a line is defined by a stroke cap, the appearance of the connection between two lines is defined by a stroke join. Пользователь указывает задавая StrokeJoin свойство SKPaint члену SKStrokeJoin перечисления:You specify this by setting the StrokeJoin property of SKPaint to a member of the SKStrokeJoin enumeration:

  • Miter Маленькие умные соединенияMiter for a pointy join
  • Round для соединения со скругленнымиRound for a rounded join
  • Bevel для объединения отрезать offBevel for a chopped-off join

Соединения Stroke странице показан этих трех обводки соединения с кодом, аналогичную концы штрихов страницы.The Stroke Joins page shows these three stroke joins with code similar to the Stroke Caps page. Это PaintSurface обработчик событий в StrokeJoinsPage класса:This is the PaintSurface event handler in the StrokeJoinsPage class:

void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
    SKImageInfo info = args.Info;
    SKSurface surface = args.Surface;
    SKCanvas canvas = surface.Canvas;

    canvas.Clear();

    SKPaint textPaint = new SKPaint
    {
        Color = SKColors.Black,
        TextSize = 75,
        TextAlign = SKTextAlign.Right
    };

    SKPaint thickLinePaint = new SKPaint
    {
        Style = SKPaintStyle.Stroke,
        Color = SKColors.Orange,
        StrokeWidth = 50
    };

    SKPaint thinLinePaint = new SKPaint
    {
        Style = SKPaintStyle.Stroke,
        Color = SKColors.Black,
        StrokeWidth = 2
    };

    float xText = info.Width - 100;
    float xLine1 = 100;
    float xLine2 = info.Width - xLine1;
    float y = 2 * textPaint.FontSpacing;
    string[] strStrokeJoins = { "Miter", "Round", "Bevel" };

    foreach (string strStrokeJoin in strStrokeJoins)
    {
        // Display text
        canvas.DrawText(strStrokeJoin, xText, y, textPaint);

        // Get stroke-join value
        SKStrokeJoin strokeJoin;
        Enum.TryParse(strStrokeJoin, out strokeJoin);

        // Create path
        SKPath path = new SKPath();
        path.MoveTo(xLine1, y - 80);
        path.LineTo(xLine1, y + 80);
        path.LineTo(xLine2, y + 80);

        // Display thick line
        thickLinePaint.StrokeJoin = strokeJoin;
        canvas.DrawPath(path, thickLinePaint);

        // Display thin line
        canvas.DrawPath(path, thinLinePaint);
        y += 3 * textPaint.FontSpacing;
    }
}

Вот ее запуск.Here's the program running:

Фацетное соединение состоит из sharp точки, где строки подключения.The miter join consists of a sharp point where the lines connect. Если две строки присоединяются к небольшой углом, фацетное соединение может быть довольно длинными.When two lines join at a small angle, the miter join can become quite long. Чтобы предотвратить слишком длинные фацетного соединения, длина фацетное соединение ограничивается значение StrokeMiter свойство SKPaint.To prevent excessively long miter joins, the length of the miter join is limited by the value of the StrokeMiter property of SKPaint. Фацетного соединения, в которых превышает длину исчезает станет скошенное соединение.A miter join that exceeds this length is chopped off to become a bevel join.