在Android中的Canvas上在圆外绘制位图（箭头）

Question

I have just begin to create some custom views in Android but I am facing problem while drawing bitmap (arrows) outside the circle.

Here is my code:

Canvas osCanvas = new Canvas(windowFrame); // Create a   canvas to draw onto the new image
    RectF outerRectangle = new RectF(0, 0, getWidth(), getHeight());
    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); // Anti alias allows for smooth corners
    paint.setColor(Color.parseColor("#FAFAFA")); // This is the color of your activity background
    osCanvas.drawRect(outerRectangle, paint);
    final Paint stroke = new Paint();

    //paint.setColor(Color.TRANSPARENT); // An obvious color to help debugging
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT)); // A out B http://en.wikipedia.org/wiki/File:Alpha_compositing.svg
    float centerX = getWidth() / 2;
    float centerY = getHeight() / 2;
    double rad = Math.min(getWidth(), getHeight()) / 2.5 - menuInnerPadding;
    float radius = (float) rad;

    stroke.setColor(Color.parseColor("#999999"));
    stroke.setStyle(Paint.Style.STROKE);
    stroke.setAntiAlias(true);
    stroke.setStrokeWidth(5f);
    osCanvas.drawCircle(centerX ,
            centerY , radius - stroke.getStrokeWidth() +5f, stroke);

    for(int i=0;i<elements.size();i++){
        double angle =0;
        if(i==0){
            angle = startAngle;
        }else{
            angle = startAngle+(i * ((2 * Math.PI) / elements.size()));
        }
        elements.get(i).x = (int) (centerX + Math.cos(angle)*(radius));
        elements.get(i).y = (int) (centerY + Math.sin(angle)*(radius));
        float ang = (float) Math.cos(angle)*(radius);
        Path path = new Path();
        path.addCircle(elements.get(i).x,elements.get(i).y, radius, Path.Direction.CW);
        if(BLINKER_ID == i){
            if(blinkerPain != null){
                osCanvas.drawBitmap(elements.get(i).bitmap,elements.get(i).x,elements.get(i).y,blinkerPain);
                blinkerPain = null;
            }
        }else{

            // here i am drawing the red arrows (bitmap images) But it's not fitting outside the circle.
            osCanvas.drawBitmap(elements.get(i).bitmap,elements.get(i).x  ,elements.get(i).y ,textPaint);
        }


    }

Here is my output

I think issue is with the padding.

Answer 1

I did code new write. You should check this code.

@Override
protected void onDraw(Canvas canvas) {
    Paint paint = new Paint();
    paint.setColor(Color.BLUE);
    paint.setStrokeWidth( 2 );
    paint.setStyle(Paint.Style.STROKE );
    canvas.drawColor(Color.WHITE);

    float x = 400;
    float y = 400;
    float r = 200;

    canvas.drawCircle( x , y , r , paint );

    Bitmap icon = BitmapFactory.decodeResource(getContext().getResources(), R.mipmap.ic_launcher);

    int length = 8;

    float radian = (float)(Math.PI * 2f) / length;

    for( int i = 0; i<length; i++ ) {
        drawBitmap( canvas , icon , x , y , r, radian * i);
    }
}

private void drawBitmap( Canvas canvas, Bitmap bitmap, float pivotX, float pivotY, float radius, float radian ) {
    Matrix m = new Matrix();
    m.postTranslate( -bitmap.getWidth()/2 , -bitmap.getHeight()/2 );
    m.postRotate( (float)(radian * 180 / Math.PI) + 90 );

    float drawHeight = radius + (bitmap.getHeight()/2);

    m.postTranslate( ((float)Math.cos( radian ) * drawHeight) + pivotX
            , ((float)Math.sin( radian ) * drawHeight) + pivotY );

    canvas.drawBitmap( bitmap , m , null );
}