28

カスタムコンポーネント、つまりアークスライダーを開発しようとしています。アークとサムは完成しましたが、丸みを帯びたエッジアークとエンボス効果を描画する方法がわかりません。現時点では、スライダーは次のようになっています

ここに画像の説明を入力してください

円弧を描くためのコードは

private void drawSlider(Canvas canvas) {
    float sweepDegrees = (value * arcWidthInAngle)
            / (maximumValue - minimumValue);

    // the grey empty part of the circle
    drawArc(canvas, startAngle, arcWidthInAngle, mTrackColor);
    // the colored "filled" part of the circle
    drawArc(canvas, startAngle, sweepDegrees, mFillColor);

    // the thumb to drag.       
    int radius = ((diameter/2) - (mArcThickness/2));
    Point thumbPoint = calculatePointOnArc(centerX, centerY, radius, startAngle + sweepDegrees);

    thumbPoint.x = thumbPoint.x - (mThumbDiameter/2);
    thumbPoint.y = thumbPoint.y - (mThumbDiameter/2);

    Bitmap thumbBitmap = BitmapFactory.decodeResource(
            mContext.getResources(), R.drawable.circle25);

    thumbBitmap = getResizedBitmap(thumbBitmap, mThumbDiameter, mThumbDiameter);
    canvas.drawBitmap(thumbBitmap, thumbPoint.x, thumbPoint.y,
            null);  

}

private void drawArc(Canvas canvas, float startAngle, float sweepDegrees,
        Paint paint) {
    if (sweepDegrees <= 0 || sweepDegrees > arcWidthInAngle) {
        return;
    }
    path.reset();
    path.arcTo(outerCircle, startAngle, sweepDegrees);
    path.arcTo(innerCircle, startAngle + sweepDegrees, -sweepDegrees);
    // innerCircle.
    path.close();
    canvas.drawPath(path, paint);
}

こんな弧を目指しています

ここに画像の説明を入力してください

4

4 に答える 4

48

丸みを帯びたエッジには、Paint.setStrokeCap（）メソッドを使用できます。また、デフォルトのペイントキャップはBUTTです。代わりにPaint.Cap.ROUNDキャップを使用する必要があります。

例えば：

Paint mFillColor = new Paint();
mFillColor.setStrokeCap(Paint.Cap.ROUND)
于 2015-07-20T04:41:32.577 に答える
14

私はなんとか以下のようなアークを構築することができました

ここに画像の説明を入力してください

円弧の始点と終点を計算し、そこで円弧の厚さに等しい直径の円を描きました。

このためのコードは

private void drawSlider(Canvas canvas) {
    float sweepDegrees = (value * arcWidthInAngle)
            / (maximumValue - minimumValue);

    // the grey empty part of the arc       
    drawArc(canvas, startAngle, arcWidthInAngle, mTrackColor);

    // the colored "filled" part of the arc
    drawArc(canvas, startAngle, sweepDegrees, mFillColor);

    // the thumb to drag.       
    int radius = ((diameter/2) - (mArcThickness/2));
    Point thumbPoint = calculatePointOnArc(centerX, centerY, radius, startAngle + sweepDegrees);

    thumbPoint.x = thumbPoint.x - (mThumbDiameter/2);
    thumbPoint.y = thumbPoint.y - (mThumbDiameter/2);

    Bitmap thumbBitmap = BitmapFactory.decodeResource(
            mContext.getResources(), R.drawable.circle25);

    thumbBitmap = getResizedBitmap(thumbBitmap, mThumbDiameter, mThumbDiameter);
    canvas.drawBitmap(thumbBitmap, thumbPoint.x, thumbPoint.y,
            null);

    //drawArc(canvas, startAngle, startAngle + sweepDegrees, white);
}
private void drawArc(Canvas canvas, float startAngle, float sweepDegrees,
        Paint paint) {
    if (sweepDegrees <= 0 || sweepDegrees > arcWidthInAngle) {
        return;
    }
    path.reset();


    int radius = ((diameter/2) - (mArcThickness/2));
    Point startPoint = calculatePointOnArc(centerX, centerY, radius, startAngle);
    Point endPoint = calculatePointOnArc(centerX, centerY, radius, startAngle + sweepDegrees);


    path.arcTo(outerCircle, startAngle, sweepDegrees);
    path.arcTo(innerCircle, startAngle + sweepDegrees, -sweepDegrees);
    // drawing the circle at both the end point of the arc to git it rounded look.
    path.addCircle(startPoint.x, startPoint.y, mArcThickness/2, Path.Direction.CW);
    path.addCircle(endPoint.x, endPoint.y, mArcThickness/2, Path.Direction.CW);

    path.close();            

    canvas.drawPath(path, paint);
}
    // this is to calculate the end points of the arc
private Point calculatePointOnArc(int circleCeX, int circleCeY, int circleRadius, float endAngle) 
    {
    Point point = new Point();
    double endAngleRadian = endAngle * (Math.PI / 180);

    int pointX = (int) Math.round((circleCeX + circleRadius * Math.cos(endAngleRadian)));
    int pointY = (int) Math.round((circleCeY + circleRadius * Math.sin(endAngleRadian)));

    point.x = pointX;
    point.y = pointY;

    return point;
}
// for the emboss effect set maskfilter of the paint to EmbossMaskFilter 
    private Paint mTrackColor = new Paint();
    MaskFilter  mEmboss = new EmbossMaskFilter(new float[] { 0.0f, -1.0f, 0.5f},
            0.8f, 15, 1.0f);
    mTrackColor.setMaskFilter(mEmboss);
于 2012-05-29T10:09:05.877 に答える
6

Paint.setStrokeCap（）メソッドを使用します。Paint.Cap.ROUNDが必要です。デフォルトはPaint.Cap.BUTTです。パス結合と呼ばれる同様のPathプロパティがあります。構成セグメントが結合するパスの部分を描画する方法を決定します。設定するには、Path.setPathJoin（）を使用します。将来必要になるかもしれません。幸運を。

于 2017-04-30T16:54:22.857 に答える
4

パスを使用して円弧を描画しています。CornerPathEffect角を丸めるために使用します。ここの例CornerPathEffect example。

そして、これがエンボス効果の例です。それがあなたが望むものかどうかはわかりません。 Embossed effect example

于 2012-05-28T12:07:22.783 に答える