如何以Xamarin形式绘制线条？

Question

我正在Xamarin表单中创建一个跨平台应用程序，并尝试使用以下代码在10到-10之间绘制线条。 但是问题是线条仅从10绘制到0。 为什么会这样，我没有任何想法。

int margin = 20;
int steps = 20;

float start = margin;
float end = width - margin;

float dHeigth = heigth - (margin * 4);
float hStep = dHeigth / Convert.ToSingle(steps);

float textMargin = 30;

// draw the line
for (int i = 10; i >= -10; i--)
{
    float xpoint = i * hStep + margin;

    if (i.IsOdd())
    {
        canvas.DrawLine(start + textMargin, xpoint, end, xpoint, LineWhitePaint);
    }
    else
    {
        decimal dText = 0;
        canvas.DrawLine(start + textMargin, xpoint, end, xpoint, LineGreyPaint);
        if (i < 0)
            dText = i;
        else
            dText = (10 - i);
        string txt = dText.ToString();

        canvas.DrawText(txt, start + margin, xpoint + 15, TextStyleFillPaintX);
    }
}

我附上了那个的屏幕截图

Answer 1

对于正线，您将绘制10 - i ，第一次迭代的结果为0 ，第三次迭代的结果为2 ，依此类推。 关于这一点，您可以看到，您正在开始从画布的中间绘制线条。 第十次迭代将绘制最上面的线（带有10的那一行）。 进一步线绘制，而不是在屏幕上。

在将xPoint写入调试输出时，您也可以看到这一点。 当i变得负面时， xPoint也将如此。 要解决此问题，您必须偏移xPoint才能始终在屏幕上绘制

float xpoint = i * hStep + margin + steps / 2 * hStep;

或者，您可以从20循环到0，并更改文本的生成方式。

for (int i = 20; i >= 0; i--)
{
    var xPoint = i * hStep + margin;

    // ...

    var displayedText = GetDisplayedText(i, steps);

    // ...
}

string GetDisplayedText(int i, int steps)
{
    var displayedValue = i > steps / 2 
        ? steps - i
        : -i - steps / 2; // I think this should be the formula
    return displayedValue.ToString();
}

备注：最好封装线条的概念，以将其计算与拖动分开。 您可以创建一个工厂，该工厂根据索引和步数生成正确的行，然后仅对Line对象进行迭代，并通过传递画布来绘制它们。 这将使您的代码更加整洁。

UPDATE

由于我们已经能够阐明要求，因此我将再提出一个建议。

首先，我将定义将图形坐标转换为画布坐标的方法

private SKPoint ToCanvasCoordinates(SKPoint graphCoordinates)
{
    var x = Margin + TextMargin + (_canvas.Width - 2*Margin - TextMargin)*graphCoordinates.X;
    var y = (MaxY - graphCoordinates.Y)*(_canvas.Height - 2 * Margin)/(MaxY - MinY) + Margin;

    return new SKPoint(x,y);
}

private SKPoint GetLegendCoordinates(int i)
{
    var x = Margin;
    var y = (MaxY - graphCoordinates.Y)*(_canvas.Height - 2 * Margin)/(MaxY - MinY) + Margin + 15;

    return new SKPoint(x,y);
}

_canvas在这种情况下是私有成员字段， Margin ， MaxY和MinY是属性。 我假设x的最小值为0，最大值为1。

现在您可以像

for(int i = -1; i <= 10; i++)
{
    var lineStart = ToCanvasCoordinates(new SKPoint(0, i));
    var lineEnd = ToCanvasCoordinates(new SKPoint(1, i));

    canvas.DrawLine(lineStart, lineEnd, LineGreyPaint);

    var textPosition = GetLegendCoordinates(i);

    canvas.DrawText(i.ToString(), textPosition, TextStyleFillPaintX);
}

此外，如果您想在两条网格线之间画一条线，则可以使用以下方法

private void DrawDataLine(SKPoint start, SKPoint end, SKPaint paint)
{
    var startTransformed = ToCanvasCoordinates(start);
    var endTransformed = ToCanvasCoordinates(end);

    _canvas.DrawLine(startTransformed, endTransformed, paint);
}

private void DrawData(SKPaint paint)
{
    for(int i=1; i<_data.Length; i++)
    {
        DrawDataLine(new SKPoint(data[i-1].X, data[i-1].Y), new SKPoint(data[i].X, data[i].Y)); // given that the objects in _data have the properties X and Y
    }
}