【问题标题】:How to rotate horizontally a text created by drawTextonPath in circle?如何水平旋转由drawTextonPath创建的文本圆形?
【发布时间】:2016-09-02 16:47:59
【问题描述】:

我有一个使用drawTextOnPath 在画布上绘制文本的函数。我计算了偏移量,一切正常,但我想以特定的方式绘制它。当前文本旋转偏移等于圆偏移。我想将文本旋转 90/45 度。但我不知道怎么做。

请有任何想法。

private void drawLegend(Canvas canvas) {
    canvas.save(Canvas.MATRIX_SAVE_FLAG);
    canvas.rotate(-228, centerX, centerY);

    Path circle = new Path();
    double halfCircumference = (radius * 2 * Math.PI) - ((radius * 2 * Math.PI) / 8) * 2;
    double increments = 5;

    for (int i = 0; i <= this.mMaxSpeed; i += increments) {
        circle.addCircle(centerX, centerY, radius, Path.Direction.CW);
        canvas.drawTextOnPath(String.format("%d", i),
                circle,
                (float) (i * halfCircumference / this.mMaxSpeed),
                -20f,
                scalePaint);
    }
    canvas.restore();
}

This is current mapping

Thi is how I wnat it to be displayed

【问题讨论】:

  • 我的做法是使用圆的函数计算画布位置并以这种方式绘制文本。
  • @eski 你能说得更具体点吗?可能是一些例子会有所帮助。
  • 我有一个文本显示,就像您的第一张图片中显示的 5 一样。我希望它像您的第一张图片中显示的 25 一样显示。我该怎么做?

标签: android canvas drawtext


【解决方案1】:

解决方案不是使用drawTextOnPath 绘制,而是使用drawText 在画布上绘制

        canvas.drawText(String.valueOf(0), (x - width / 2) + 35, (y + height / 2) - 25, scalePaint);
        canvas.drawText(String.valueOf(5), (x - width / 2) - 20, (y) + 8, scalePaint);
        canvas.drawText(String.valueOf(10), (x - width / 2) + 30, (y - height / 2) + 40, scalePaint);
        canvas.drawText(String.valueOf(15), (x), (y - height / 2) - 18, scalePaint);
        canvas.drawText(String.valueOf(20), (x + width / 2) - 30, (y  - height / 2) + 40, scalePaint);
        canvas.drawText(String.valueOf(25), (x + width / 2) + 25, (y) + 8, scalePaint);
        canvas.drawText(String.valueOf(30), (x + width / 2) - 35, (y + height / 2) - 25, scalePaint);

7 个月后更新

秘诀是使用sincos 函数计算xy 的偏移量。

double theta = (7 * PI / 4) - (i * (2 * PI / 40));
double xPos = radiusScale * 1.2 * Math.sin(theta) + centerX - widthText / 2;
double yPos = radiusScale * 1.2 * Math.cos(theta) + centerY + heightText / 2;

canvas.drawText(textNotch, (float)xPos, (float)yPos, scalePaint);

【讨论】:

  • 我有一个文本显示,就像您的第一张图片中显示的 5 一样。我希望它显示为 25 在您的第一张图片中显示。我该怎么做?
  • @SiddarthG 检查 - 7 个月后更新
  • 我不希望它是循环方式。如果您不介意,请查看我的问题:stackoverflow.com/questions/60396437/…
  • @Mikhail 你可以给点建议。我已经使用了您的解决方案,但我将所有值都集中在一个地方,而不是跨越弧线:stackoverflow.com/questions/71198812/add-values-to-arc
猜你喜欢
  • 2017-02-03
  • 1970-01-01
  • 2018-04-26
  • 2019-05-08
  • 1970-01-01
  • 2013-07-07
  • 2013-07-26
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多