css aspect - Dynamically Resizable Grid With Handles Android

0 Answers

ratio based on

I have a grid I'm drawing onto a Canvas with 4 handles at each corner. When I drag a handle in any direction I need to re-size the cells inside my grid. Right now the cells are drawn, and they resize but they draw relative to the top left handle and end up going all over my screen. They never stay inside the box I draw on my canvas. Furthermore they scale, but they do not scale perspective, only size.

Here is what I have so far

private void drawGrid() {
    Path path = new Path();
    int gridSize = 5;
    float gridCellSize = 40;
    float topLeftX = 0;
    float topLeftY = 0;
    float topRightX = 0;
    float topRightY = 0;
    float bottomRightX = 0;
    float bottomRightY = 0;
    float bottomLeftX = 0;
    float bottomLeftY = 0;

    for (int i = 0; i < mHandles.size(); i++) {
        Circle c = mHandles.get(i);
        int index = mHandles.indexOf(c);
        switch (index) {
        case 0:
            path.moveTo(c.getX(), c.getY());
            topLeftX = c.getX();
            topLeftY = c.getY();
        case 1:
            path.lineTo(c.getX(), c.getY());
            topRightX = c.getX();
            topRightY = c.getY();
        case 2:
            path.lineTo(c.getX(), c.getY());
            bottomRightX = c.getX();
            bottomRightY = c.getY();
        case 3:
            path.lineTo(c.getX(), c.getY());
            bottomLeftX = c.getX();
            bottomLeftY = c.getY();


    float topXWidth = (topLeftX - topRightX);
    float leftXHeight = (topLeftX - bottomLeftX);
    gridCellSize = (float) (topXWidth / gridSize) * (leftXHeight / gridSize);


    for (int i = 0; i < gridSize; i++) {
        for (int j = 0; j < gridSize; j++) {
            int left = (int) (topLeftX + (i * (gridCellSize + 2)));
            int top = (int) (topLeftY + (j * (gridCellSize + 2)));
            int right = (int) (left + gridCellSize);
            int bottom = (int) (top + gridCellSize);
            mCanvas.drawRect(new Rect(left, top, right, bottom), mPaint);

    mCanvas.drawPath(path, mPaint);
    mCanvas.drawPath(path, mStrokePaint);

    for (Circle c : mCircleList) {
        mCanvas.drawCircle(c.getX(), c.getY(), RADIUS, mCirclePaint);
        mCanvas.drawCircle(c.getX(), c.getY(), RADIUS, mCircleStrokePaint);


After this method is run a box is drawn with perfectly sized boxes 5x5 across my grid, however if I move my handle my boxes are being drawn with no reference to the container. The result is this


As you can see, the boxes that are supposed to be inside my grid are actually all over the place. I need it to stretch and adjust like this

Any and all help is appreciated, if you need any clarification please let me know!