Question

我很难处理这个问题，大多数“帮助”我已经找到了Trigonometry的交易，这是我没有经验的。我需要创建一个这样的视图：Proposed Graphics。我有主要测量仪的弧形和背景图像，但我需要添加你看到的时间标记，包括椭圆形状和时间。它们需要以编程方式添加，因为标记的数量可以是1到28，但可能不超过10.

我已经尝试使用扫掠角来获得弧结束位置的X / Y位置（使用除法来定义增加的扫掠角度以增加弧度）并且它对第一个有用但是我不能为具有不同扫掠角度的任何其他复制它。我也使用矩阵旋转标记图像或多或少工作，我一直尝试各种触发函数来获得x和y。下面是一些代码：基本代码：

public class Custom_clock extends View
{
    private Paint mPaint;
    private RectF rectF;
    private int mStrokeWidth;
    private int width;
    private int height;
    private Typeface custom_font;
    private final int MAX = 263;
    private final int START = 138;
    private Bitmap bitmap;
    private Bitmap marker;
    private int scaledSizeNumbers;
    private int scaledSizeLabels;
    private int scaledSizeDose;
    private Matrix matrix = new Matrix();
    private String hoursMinsLabel = "Minutes";
    private String hoursMinsNumber = "3";
    private ArrayList<String>DoseTimes = new ArrayList<>();


    public Custom_clock(Context context)
    {
        super(context);
    }

    public Custom_clock(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public Custom_clock(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    private void initClock(){

        width = getWidth();
        height = getHeight();
        mStrokeWidth = ((width+height)/33);
        custom_font = Typeface.createFromAsset(getResources().getAssets(), "fonts/text_font.ttf");
        bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.base_arc3);
        marker = BitmapFactory.decodeResource(getResources(), R.drawable.single_marker);
        scaledSizeNumbers = getResources().getDimensionPixelSize(R.dimen.NumberFontSize);
        scaledSizeLabels = getResources().getDimensionPixelSize(R.dimen.LabelFontSize);
        scaledSizeDose = getResources().getDimensionPixelSize(R.dimen.DoseFontSize);
        int scaledMarginWidth = getResources().getDimensionPixelSize(R.dimen.WidthMargin);
        int scaledMarginTop = getResources().getDimensionPixelSize(R.dimen.TopMargin);
        mPaint = new Paint();
        rectF =  new RectF(scaledMarginWidth,scaledMarginTop,getWidth()- scaledMarginWidth,getHeight());
        DoseTimes.clear();
        DoseTimes.add("1:00pm");
        DoseTimes.add("2:00pm");
        DoseTimes.add("3:00pm");
        DoseTimes.add("4:00pm");
        DoseTimes.add("5:00pm");
    }

    private void DrawMainArc(Canvas canvas){
        Paint paint =new Paint();
        initClock();
        canvas.drawBitmap(bitmap,null,rectF,paint);
        mPaint.setColor(getResources().getColor(R.color.light_grey));
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(mStrokeWidth+2);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        canvas.drawArc(rectF,START,GetStops(5,MAX)*2,false, mPaint);
    }

    private int GetStops(int stops, int max){
        return max/stops;
    }

    @Override
    protected void onDraw(Canvas canvas)
    {
        if(bitmap != null){
            super.onDraw(canvas);
            DrawMainArc(canvas);
            DrawOutlineArc(canvas);
            DrawHours(canvas);
            DrawHoursLabel(canvas);
            DrawDoseLabel(canvas);
            AddStops(canvas);
        }
    }

标记特定代码尝试：这将第一个标记绘制得非常接近我想要的位置，但其余部分被绘制起来并且向左越来越多，只有2个甚至可见。我知道答案在于某个角度和可能的矩阵，但是trig>我

  private void AddStops(Canvas canvas){
        int stopsNum = DoseTimes.size();//currently 5
        int rotatinalIncrement = MAX/(stopsNum);//currently 54
        int markerAngle = 0;
        double x;
        double y;
        for(int i =0; i <stopsNum; i++){
            x = (canvas.getWidth()/4) * Math.cos(markerAngle);
            y = (canvas.getWidth()/4) * Math.cos(markerAngle);
            markerAngle = markerAngle +rotatinalIncrement;
            DrawMarker(canvas,markerAngle,(int)x ,(int)y);
        }

    }
    private void DrawMarker(Canvas canvas, int Angle, int x, int y){
        int scaledSize = getResources().getDimensionPixelSize(R.dimen.MarkerSize);
        Bitmap scaled = Bitmap.createScaledBitmap(marker,scaledSize,scaledSize,false);
        matrix.reset();
        matrix.postTranslate(-canvas.getWidth() / 2, -canvas.getHeight() / 2); // Centers image
        matrix.postRotate(angle);
        matrix.setRotate(Angle);
        matrix.postTranslate(x, y);
        canvas.drawBitmap(scaled, matrix, null);
    }

Answer 1

首先，Math.cos和sin在弧度中使用参数，而您（从值54看似）以度为单位应用参数。只需制作markerAngle * Math.Pi / 180或使用toRadians之类的函数（如果它存在于JavaScript中）。

第二 - 对于y坐标，您必须使用sin而不是cos

在Android Java中以编程方式在绘制的弧周围传播绘制的标记

1 个答案: