如何更改图像中特定区域的背景颜色，并在用户单击同一区域时更改颜色

My question is I am trying to show a car park booking system in my app. I want to show all the free spaces in green and when user book space the same area should turn to red. Below is the image:

我的问题是我想在我的应用程序中显示停车场预订系统。我希望以绿色显示所有可用空间,当用户预订空间时,同一区域应变为红色。以下是图片:

I have tried so many ways but did not get any success. Below is my code:

我尝试了很多方法但没有取得任何成功。以下是我的代码:

public class CarParkingActivity extends AppCompatActivity {

private ImageMap mImageMap;
private RelativeLayout stage;
private RelativeLayout.LayoutParams lparams;
private SparseArray<ImageMap.Bubble> spaces;
private String title;
Tracker mytracker;

private List<String> blocks; //list of 'occupied' spaces

@Override
protected void onCreate(Bundle savedInstanceCarParking) {
    super.onCreate(savedInstanceCarParking);
    setContentView(R.layout.activity_car_parking);

    blocks = new ArrayList<>();
    blocks.add("p1");
    blocks.add("p3");
    blocks.add("p6");
    blocks.add("p13");
    blocks.add("p9");
    blocks.add("p200");


    // find the image map in the view
    mImageMap = (ImageMap) findViewById(R.id.map);
    stage = (RelativeLayout) findViewById(R.id.stage);
    mImageMap.setImageResource(R.drawable.carpark2);

    title = getIntent().getStringExtra("option");
    getSupportActionBar().setTitle(title);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);

    // add a click handler to react when areas are tapped
    mImageMap.addOnImageMapClickedHandler(new ImageMap.OnImageMapClickedHandler() {
        @Override
        public void onImageMapClicked(int id, ImageMap imageMap) {

            mImageMap.showBubble(id);

            if (blocks.contains(imageMap.getArea(id).getName())) {

                MySingleton.getInstance().showToast(getApplicationContext(), "Sorry, this car space is occupied");

                spaces = mImageMap.getParkings();
                drawParkSpace(spaces.get(id)._x, spaces.get(id)._y, false);



            } else {
                //open booking view
                Intent it = new Intent(getApplicationContext(), BookingCarParkingActivity.class);
                it.putExtra("parkId", imageMap.getArea(id).getName().toUpperCase());
                startActivity(it);
            }


        }

        @Override
        public void onBubbleClicked(int id) {
            Log.i("app", "onBubbleClicked: id: " + id);
        }
    });


}

/**
 * Draw red or green rect on the view.
 *
 * @param x
 * @param y
 * @param isOk: true equals green
 */
private void drawParkSpace(float x, float y, Boolean isOk) {
    Drawable imageView = null;
    imageView = ContextCompat.getDrawable(CarParkingActivity.this, isOk ? R.drawable.carok : R.drawable.carnook);

    lparams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
    ImageView imageView1 = new ImageView(CarParkingActivity.this);
    imageView1.setImageDrawable(imageView);
    imageView1.setLayoutParams(lparams);
    imageView1.setX(x);
    imageView1.setY(y);
    stage.addView(imageView1);
}

@Override
protected void onResume() {
    super.onResume();
    mImageMap.loadMap("menu"); //load menu mapped image
    //List<ImageMap.PolyArea> list = mImageMap.getPolys();
    //ImageMap.PolyArea poly = list.get(0);

}


@Override
public boolean onOptionsItemSelected(MenuItem item) {

    switch (item.getItemId()) {

        case android.R.id.home:
            this.finish();
            return true;

    }


    return false;



    }
}

Right now each car is clickable but I need to change the color like shown in the image and when the user book space the same area should need to turn red. Please help me to sort out this task. I am new in android but trying hard to solve this issue. Please accept my apologies if my question is not strong enough. Also many thanks in advance. this is the second activity when i booked the space

现在每辆车都是可点击的,但我需要更改图像中显示的颜色,当用户预订空间时,同一区域应该变成红色。请帮我解决这个任务。我是android新手,但努力解决这个问题。如果我的问题不够强,请接受我的道歉。也提前多多感谢。这是我预订空间时的第二项活动

ImageMapClass

1 个解决方案

#1

For your need, you have to keep two list and two paint object to track booked and not booked space.

根据您的需要,您必须保留两个列表和两个绘制对象来跟踪预订空间和未预订空间。

-list of available space.

- 可用空间列表。

-list of booked space.

- 预订空间列表。

-booked space paint

预订的空间涂料

-yet to book space paint

- 预订太空涂料

 Paint bubblePaint;
 Paint bookedBubblePaint;

  //list of bubbles available
  SparseArray<Bubble> mBubbleMap = new SparseArray<Bubble>();

  //list of bubbles already booked
  SparseArray<Bubble> bookedBubble = new SparseArray<Bubble>();

protected void drawBubbles(Canvas canvas) {
        for (int i = 0; i < mBubbleMap.size(); i++) {
            int key = mBubbleMap.keyAt(i);
            Bubble b = mBubbleMap.get(key);
            if (b != null) {
                b.onDraw(canvas, false);//send info of booked status

            }
        }

        for (int i = 0; i < bookedBubble.size(); i++) {
            int key = bookedBubble.keyAt(i);
            Bubble b = bookedBubble.get(key);
            if (b != null) {
                b.onDraw(canvas, true);//send info of booked status

            }
        }
    }

then in your Bubble class onDraw method draw paint based on the booked status

然后在您的Bubble类onDraw方法中根据预订状态绘制绘画

 void onDraw(Canvas canvas, boolean isBooked) {
            if (_a != null) {
                // Draw a shadow of the bubble
                float l = _left + mScrollLeft + 4;
                float t = _top + mScrollTop + 4;
                canvas.drawRoundRect(new RectF(l, t, l + _w, t + _h), 20.0f, 20.0f, bubbleShadowPaint);
                Path path = new Path();
                float ox = _x + mScrollLeft + 1;
                float oy = _y + mScrollTop + 1;
                int yoffset = -35;
                if (_top > _y) {
                    yoffset = 35;
                }
                // draw shadow of pointer to origin
                path.moveTo(ox, oy);
                path.lineTo(ox - 5, oy + yoffset);
                path.lineTo(ox + 5 + 4, oy + yoffset);
                path.lineTo(ox, oy);
                path.close();
                canvas.drawPath(path, bubbleShadowPaint);

                // draw the bubble
                l = _left + mScrollLeft;
                t = _top + mScrollTop;
            if (isBooked) {
                canvas.drawRoundRect(new RectF(l, t, l + _w, t + _h), 20.0f, 20.0f, bookedBubblePaint);
            } else {
                canvas.drawRoundRect(new RectF(l, t, l + _w, t + _h), 20.0f, 20.0f, bubblePaint);
            }

                path = new Path();
                ox = _x + mScrollLeft;
                oy = _y + mScrollTop;
                yoffset = -35;
                if (_top > _y) {
                    yoffset = 35;
                }
                // draw pointer to origin
                path.moveTo(ox, oy);
                path.lineTo(ox - 5, oy + yoffset);
                path.lineTo(ox + 5, oy + yoffset);
                path.lineTo(ox, oy);
                path.close();
            if (isBooked) {
                canvas.drawPath(path, bookedBubblePaint);
            } else {
                canvas.drawPath(path, bubblePaint);
            }


                // draw the message
                canvas.drawText(_text, l + (_w / 2), t + _baseline - 10, textPaint);
            }
        }

change initDrawingTools as follows

更改initDrawingTools如下

private void initDrawingTools() {
        textPaint = new Paint();
        textPaint.setColor(0xFF000000);
        textPaint.setTextSize(30);
        textPaint.setTypeface(Typeface.SERIF);
        textPaint.setTextAlign(Paint.Align.CENTER);
        textPaint.setAntiAlias(true);

        textOutlinePaint = new Paint();
        textOutlinePaint.setColor(0xFF000000);
        textOutlinePaint.setTextSize(18);
        textOutlinePaint.setTypeface(Typeface.SERIF);
        textOutlinePaint.setTextAlign(Paint.Align.CENTER);
        textOutlinePaint.setStyle(Paint.Style.STROKE);
        textOutlinePaint.setStrokeWidth(2);

        bubblePaint = new Paint();
        bubblePaint.setColor(Color.GREEN);
        bubbleShadowPaint = new Paint();
        bubbleShadowPaint.setColor(0xFF000000);
        bookedBubblePaint= new Paint();
        bookedBubblePaint.setColor(Color.RED);
    }

    public void addBubble(String text, int areaId) {
        if (mBubbleMap.get(areaId) == null) {
            Bubble b = new Bubble(text, areaId);
            mBubbleMap.put(areaId, b);
        }
    }

    public void addBookedBubble(String text, int areaId) {
        if (bookedBubble.get(areaId) == null) {
            Bubble b = new Bubble(text, areaId);
            bookedBubble.put(areaId, b);
        }
    }

Hope this will help you to proceed further.

希望这能帮助您继续前进。