Intersection between two paths in a canvas using Android

Question

I'm adding 49 Rects in my canvas as well as storing the region for each Rect in an ArrayList:

private void addCoordinates(){
    if (regions.size() > 0) {
        regions.clear();
    }
    Paint xpaint = new Paint();
    xpaint.setColor(Color.LTGRAY);
    xpaint.setStyle(Paint.Style.STROKE);
    xpaint.setStrokeWidth(10);
    for (int j=1;j<8;j++){
        for (int i=1;i<8;i++){
            Region reg = new Region();
            Path p = new Path();
            RectF rect = new RectF();
            rect.set(0, Calculations.convertscale(scale,(float) 91.43 * i), Calculations.convertscale(scale,(float) 91.43 * j), 0);
            canvas.drawRect(rect, xpaint);          
            p.computeBounds(rect, true);
            reg.setPath(p, new Region((int) rect.left, (int) rect.top, (int) rect.right, (int) rect.bottom)); 
            regions.add(reg);
        }
    }
}

I'm then drawing an intersected area among four circles by clipping the path of each circle:

 private void interSection(){

    canvas.clipPath(pathA, Region.Op.INTERSECT);
    canvas.clipPath(pathB, Region.Op.INTERSECT);  
    canvas.clipPath(pathC, Region.Op.INTERSECT);
    canvas.clipPath(pathD, Region.Op.INTERSECT);

    canvas.drawPath(pathA, mPaint);
    canvas.drawPath(pathB, mPaint);
    canvas.drawPath(pathC, mPaint);
    canvas.drawPath(pathD, mPaint);       

    drawingImageView.invalidate();
}

My task is to know, which of those 49 Rects that actually intersects the drawn area as shown in the screenshot below:

enter image description here

I have tried with the codeblock below, but it gives me all 49 Rects instead of 9 as expected. How do I determine the Rects that intersects with the red region ?.

private void checkRectangles() {
    int size = regions.size();
    for (Region reg:regions){
        Path path = reg.getBoundaryPath();
        if (path.op(path, pathA, Path.Op.INTERSECT)){
            count++;
        }
    }
}

rmbdev rmbdev · Accepted Answer · 2015-08-24T04:30:27

It looks like you're defining your rectangles in a way that they all overlap, and your first few rects might be vertical lines with 0 width. Something like the following should work:

RectF rects[][] = new RectF[rows][columns]; // rows & columns are global vars
//(next part goes in your addCoordinates)
for (int i=0; i<rows, i++) {
    for (int j=0; j<columns, j++) {
        canvas.drawRect(rects[i][j], paint);
    }
}
//(next part I wrote as a separate method; could be more useful that way)
private void setupRects(float scale) {
    for (int j=0; j<rows, j++) {
        for (int i=0; i<columns, i++) {
            //note: I usually index from 0 to length instead of from 1 to length+1
            rects[i][j] = new RectF(i*scale,j*scale,(i+1)*scale,(j+1)*scale);
        }
    }
}
/* Example output, with scale of 1:
 * rects[0][0] goes from (0,0) to (1,1)
 * rects[0][1] goes from (1,0) to (2,1)
 * rects[7][7] goes from (7,7) to (8,8)
 */

I haven't used the intersect function before, but it seemed to "work" with your previous definition of rectangles, so it should "work as intended" with the suggested changes.

For simplicity, the my algorithm creates rectangles that touch each other. To implement your spacing, you can either modify the equations, or just overlay a bunch of lines.

If useful, you might consider making the equation more robust with:

RectF(X0+i*scale,Y0+j*scale,X0+(i+1)*scale,Y0+(j+1)*scale);

Beforehand, you can define X0=0 and Y0=0, and increase or decrease them to shift the whole collection of rectangles.

For fun, you might want to try making your own intersection algorithm. With some work, you can figure out equations for the curve sections. For simplicity, you can reduce each rect to five points (corner points + center point), and then test whether any point lies within the curve equations. If so, then you have an intersection!

Actually, now that I think about it, you could forget about drawing rectangles and just do an overlay of lines, which will give the appearance of a bunch of rectangles. Whether you do this or not depends upon your overall objectives. In this case, you'd be testing which lines intersect the shape, and then interpret the results appropriately.

Intersection between two paths in a canvas using Android

1 Answers