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

Question

我的问题是我想在我的应用程序中显示一个停车场预订系统。我想将所有免费 space 显示为绿色，当用户预订 space 时，同一区域应变为红色。下图为：

我试了很多方法都没有成功。下面是我的代码：

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;



    }
}

现在每辆车都可以点击，但我需要更改颜色，如图所示，当用户预订时 space 相同的区域需要变成红色。请帮我解决这个任务。我是 android 的新人，但正在努力解决这个问题。如果我的问题不够强烈，请接受我的道歉。也非常感谢。这是我预订 space

时的第二个 activity

ImageMapClass

Answer 1

根据您的需要，您必须保留两个列表和两个绘画对象来跟踪已预订和未预订space。

-可用列表 space。

-预订列表space。

-预订space 油漆

-尚未预订 space 油漆

 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

            }
        }
    }

然后在你的 Bubble class 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);
            }
        }

修改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);
        }
    }

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

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

How can i change background color of specific area in an image and change color when user click on the same area

java

android

imagemap