其他分享
首页 > 其他分享> > android-如何在方形手表上绘制表面“滴答声”?

android-如何在方形手表上绘制表面“滴答声”?

作者:互联网

我目前有这个代码片段在Android Wear表盘的外部生成刻度线

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);
            }

可以在圆形表盘上很好地产生刻度,但在正方形上的刻度却像这样:Round ticks on Square
但我希望它们不是圆形的,而是更合适地适合形状,例如:Square watchface

有标准的方法吗?我猜我不能再使用trig …

解决方法:

当然,您可以使用几何和触发.例如,您要指向时钟中心的任何一条线,都指向中心,因此,一部分将为给定(x,y),另一部分将为arctan2(cy-y,cx-x),从而为您提供与指向中心(cx,cy),然后简单地沿给定长度r的中心方向绘制直线,方法是将x,y绘制为cos(angle)* r,sin(angle)* 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);
    }

诚然,它看起来像:

clock picture

因此,要使其看起来像您的图像需要花费更多的工作.但是,这完全可行.路径测量技巧将适用于任何形状.由于棒棒糖的限制,我避免使用path.addRoundRect.您可以看到我对问题here的回答.其他答案对于如何绘制圆角矩形形状也很好.如果您想编写一个包络函数,则可以按照因子t随时随地将当前图片缩放到矩形的包络,这样就可以了.

标签:wear-os,android,watch-face-api
来源: https://codeday.me/bug/20191027/1942042.html