Создайте ряд из 3 кругов (сегментированных), используя RectF в android canvas - PullRequest
Новая
       82

Создайте ряд из 3 кругов (сегментированных), используя RectF в android canvas

0 голосов
/ 16 февраля 2019

Я хочу создать графику, подобную этой: https://cdn.business2community.com/wp-content/uploads/2017/01/pie-charts.png.png

Я создал сегментированный круг, используя RectF с четырьмя различными цветами. Ниже мой код: 

Bitmap bitMap = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888);
bitMap = bitMap.copy(bitMap.getConfig(), true);
// Construct a canvas with the specified bitmap to draw into
Canvas canvas = new Canvas(bitMap);

RectF oval = new RectF(10F, 5F, 45F, 5F);
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.GRAY);
canvas.drawArc(oval, 0F, 90F, true, paint);
paint.setColor(Color.GREEN);
canvas.drawArc(oval, 90F, 90F, true, paint);
paint.setColor(Color.RED);
canvas.drawArc(oval, 180F, 90F, true, paint);
paint.setColor(Color.BLACK);
canvas.drawArc(oval, 270F, 90F, true, paint);
canvas.rotate(43);
imageView.setImageBitmap(bitMap);

Я хочусоздать ряд из еще 3 таких кругов, но я не могу их получить, потому что не могу определить точные координаты.

Ответы [ 2 ]

0 голосов
/ 02 апреля 2019

Координаты, которые вы должны указать в конструкторе RectF, относятся к тем, которые вы указали при создании растрового изображения с Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888).Например, с растровым изображением 100x100 пикселей и установленным таким образом RectF: 

new RectF(5f, 10f, 85f, 75f);

В результате вы получите следующий результат (фон ImageView синий, чтобы четко видеть его границы):

enter image description here

Как вы можете видеть, пределы RectF устанавливаются в точечных координатах, начиная по горизонтали слева и вертикально сверху.

Чтобы создать три круговых диаграммы, вы можете просто создать большее растровое изображение (здесь 300x100) и сместить координаты RectF для каждого нового графика: 

private fun drawPieCharts() {
    var bitMap = Bitmap.createBitmap(300, 100, Bitmap.Config.ARGB_8888)
    bitMap = bitMap.copy(bitMap.config, true)
    // Construct a canvas with the specified bitmap to draw into
    val canvas = Canvas(bitMap)

    drawSinglePie(canvas, 0f)
    drawSinglePie(canvas, 100f)
    drawSinglePie(canvas, 200f)

    imageView.setImageBitmap(bitMap)
}

private fun drawSinglePie(canvas: Canvas, horizontalOffset: Float) {
    val oval = RectF(5f + horizontalOffset, 10f, 85f + horizontalOffset, 75f)
    paint.style = Paint.Style.FILL
    paint.color = Color.GRAY
    canvas.drawArc(oval, 0f, 90f, true, paint)

    paint.color = Color.GREEN
    canvas.drawArc(oval, 90f, 90f, true, paint)

    paint.color = Color.RED
    canvas.drawArc(oval, 180f, 90f, true, paint)

    paint.color = Color.BLACK
    canvas.drawArc(oval, 270f, 90f, true, paint)
}

, что приведетк этому результату:

enter image description here

Но растровое изображение может в конечном итоге растягиваться, как на приведенных выше снимках экрана, поэтому лучшим решением будет создание настраиваемого представления дляизбегайте такой пикселизации.

0 голосов
/ 11 марта 2019

Существует проблема в способе определения RectF, 2-е и 4-е значения равны 5f, что означает, что RectF имеет ширину 0: public RectF(float left, float top, float right, float bottom)

Если вы сделаетепрямоугольник больше, ваш код будет работать.

...