Question

我目前有这个片段生成围绕外部的刻度和安装表面

float innerMainTickRadius = mCenterX - 35;
            for(int tickIndex = 0; tickIndex < 12; tickIndex++) {
                float tickRot = (float) (tickIndex * Math.PI * 2 / 12);
                float innerX = (float) Math.sin(tickRot) * innerMainTickRadius;
                float innerY = (float) -Math.cos(tickRot) * innerMainTickRadius;
                float outerX = (float) Math.sin(tickRot) * mCenterX;
                float outerY = (float) -Math.cos(tickRot) * mCenterX;
                canvas.drawLine(mCenterX + innerX, mCenterY + innerY, mCenterX + outerX, mCenterY + outerY, mTickPaint);
            }

在圆形表盘上生成刻度线，但在正方形上，结果如下：但是我希望它们不是圆形的，而是更适合形状，例如：

有没有标准的方法来做到这一点？我猜我不能再使用trig ......

Answer 1

当然你使用几何和trig。例如，你在时钟面上放置的任何一条线要指向中心，因此一部分将是给定的（x，y），另一条将是arctan2（cy-y，cx-x），从而为您提供角度。指向中心（cx，cy），然后通过绘制从x，y到cos（角度）* r，sin（角度）* r的直线，在给定长度r的中心方向绘制直线

但是，根据您的样本图像，您可能需要绘制从x，y到x + r，y的线，然后按角度旋转画布，以便您可以绘制这样调整的数字。在调整画布之前一定要做canvas.save（）。调整后的矩阵和canvas.restore（）。

这样就可以计算出你想要绘制刻度线的形状和位置。您可以在路径中执行此操作。因此，定义圆角矩形的路径，然后使用PathMeasure类获取getPosTan（），然后忽略切线，并使用它给出的位置来查找圆角矩形周围的位置。根据决定的形状，通过线段或贝塞尔曲线将这些位置计算为位置。

例如：

static final int TICKS = 12;
static final float TICKLENGTH = 20;

在绘图程序中，

    float left = cx - 50;
    float top = cy - 50;
    float right = cx + 50;
    float bottom = cy + 50;
    float ry = 20;
    float rx = 20;
    float width = right-left;
    float height = bottom-top;
    Path path = new Path();
    path.moveTo(right, top + ry);
    path.rQuadTo(0, -ry, -rx, -ry);
    path.rLineTo(-(width - (2 * rx)), 0);
    path.rQuadTo(-rx, 0, -rx, ry);
    path.rLineTo(0, (height - (2 * ry)));
    path.rQuadTo(0, ry, rx, ry);
    path.rLineTo((width - (2 * rx)), 0);
    path.rQuadTo(rx, 0, rx, -ry);
    path.rLineTo(0, -(height - (2 * ry)));
    path.close();

    PathMeasure pathMeasure = new PathMeasure();
    pathMeasure.setPath(path,true);
    float length = pathMeasure.getLength();
    float[] pos = new float[2];
    float r = TICKLENGTH;
    for (int i = 0; i < TICKS; i++) {
        pathMeasure.getPosTan(i * (length/TICKS),pos,null);
        double angle = Math.atan2(cy - pos[1], cx - pos[0]); //yes, y then x.
        double cos = Math.cos(angle);
        double sin = Math.sin(angle);
        canvas.drawLine(pos[0], pos[1], (float)(pos[0] + cos * r), (float)(pos[1] + sin * r), paint);
    }

不可否认看起来像：

所以要让它看起来像你的形象需要做更多的工作。但是，它完全可行。路径测量技巧的东西适用于任何形状。由于Lollipop +限制，我避免使用path.addRoundRect。你可以看到我对这个问题的回答here。而其他答案对于如何绘制圆角矩形形状非常好。你可以，如果你想写一个包络函数，只需按照因子t将你当前的图像缩放到矩形的包络，因为它可以昼夜不停。

Answer 2

角度是现在位置的函数。在这种情况下，我没有立即看到获得封闭表格的诀窍。但是在最常见的情况下，你最终只能存储每个刻度线的位置，然后你只是绘制穿过该点和中心的线。所以第二个i的角度只是

theta(i)=arctan(y_pos(i) / x_pos(i))

假设中心有坐标（0,0）。在这种情况下，您只需要存储8个连续刻度的位置，因为面是每90度周期性的，并且对角线也是对称的。

如何在方形手表上画出表盘'刻度'？

2 个答案: