Метод SkiaSharp ConicTo не рисует кривую - PullRequest
Новая
       121

Метод SkiaSharp ConicTo не рисует кривую

1 голос
/ 24 октября 2019

Я новичок в SkiaSharp canvas и хочу получить холст, показанный ниже.

enter image description here

Я пытался использовать приведенный ниже код для достижения холстано не удалось. 

SKSurface vSurface = args.Surface;
SKCanvas vCanvas = vSurface.Canvas;
vCanvas.Clear(SKColors.White);

var w = args.Info.Width;
var h = args.Info.Height;

var pathStroke3 = new SKPaint
{
    IsAntialias = true,
    Style = SKPaintStyle.StrokeAndFill,
    Color = new SKColor(240, 0, 100, 250),
    StrokeWidth = 5
};
var path3 = new SKPath { FillType = SKPathFillType.EvenOdd };
path3.MoveTo(0, h / 4);
path3.ConicTo(w / 3, h / 2, w, h, 1f);
path3.LineTo(0, h);
path3.Close();

vCanvas.DrawPath(path3, pathStroke3);

И результат показан ниже.

enter image description here

1 Ответ

1 голос
/ 24 октября 2019

Есть несколько проблем с вашей спецификацией конической кривой, которая должна быть исправлена. Я пытаюсь объяснить их причину ниже.

path3.ConicTo(w / 3, h / 2, w, h, 1f);

Как вы можете видеть из рисунка ниже, вы определили контрольную точку конической кривой как довольно необычную. place.

enter image description here

  • w / 3 Первый параметр - это координата x контрольной точки вашей конической кривой. Поскольку вы хотите, чтобы верх кривой был посередине горизонтально, вам следует разделить ширину на 2 вместо 3.

enter image description here

  • h / 2 Второй параметр - это вертикальная контрольная точка вашей кривой. Вы определили, что кривая начинается с h / 4 по оси Y, поэтому верхняя точка кривой должна быть выше этой. Я использовал h / 6 в моем примере, но вы можете попробовать что-то вроде h/8 или даже 0 или другое абсолютное значение.

enter image description here

  • w Третий параметр - это горизонтальная конечная точка кривой, и он был правильным в вашей реализации.

  • h Четвертый параметр должен бытьтак же, как то, где мы начали рисовать кривую. В противном случае он не будет симметричным, и поэтому в вашем случае конечная точка находится на h (= нижний правый угол экрана). Сделайте это h/4 и вуаля, кривая теперь заканчивается в правильной точке.

enter image description here

Это то, что было бы ближек тому, чего вы хотите достичь:

path3.ConicTo(w / 2, h / 6, w, h/4, 1f);

Несмотря на то, что кривая теперь в порядке, у вас все еще есть проблема, что путь еще не может быть закрыт. Сначала вы должны провести линию в нижнем правом и нижнем левом углах экрана, чтобы вся область была хорошо заполнена. Примерно так: 

path3.LineTo(w, h);
path3.LineTo(0, h);

enter image description here

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

Редактировать: Если вы хотите изменить силу кривой, вы можете сделать несколько вещей. Например, вы можете запустить кривую ниже на экране, и она мгновенно станет более изогнутой: 

path3.MoveTo(0, h / 3);
path3.ConicTo(w / 2, h / 6, w, h / 3, 1f);

Здесь я также отредактировал координату y метода MoveTo, чтобы она была ниже на экране. в качестве конечной y-координаты метода ConicTo будет то же самое. Вы можете даже попробовать h/2 для обоих.

Еще одна вещь, которую вы можете сделать, это поиграться с последним параметром метода ConicTo. Он определяет вес контрольной точки. Чем выше значение, тем ближе к нему ваша кривая, в результате чего получается очень резкая кривая с высокими значениями. Попробуйте сделать его выше или ниже, чтобы также изменить силу кривой.

Наконец, параметр, который в настоящий момент равен h / 6, отмечает вершину кривой. Вы можете попробовать что-то вроде h/10 или даже абсолютную координату, например 0, чтобы изменить кривую.

...