带有Android手柄的动态可调整大小的网格

Question

我有一个网格我正在绘制Canvas，每个角落有4个手柄。当我向任何方向拖动手柄时，我需要重新调整网格内的单元格大小。现在，细胞被绘制，并且它们会调整大小，但它们相对于左上方的手柄绘制，最终遍布整个屏幕。他们永远不会留在我画在画布上的盒子里面。此外，它们可以扩展，但它们不会扩大视角，只有尺寸。

这是我到目前为止所拥有的

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();
            break;
        case 1:
            path.lineTo(c.getX(), c.getY());
            topRightX = c.getX();
            topRightY = c.getY();
            break;
        case 2:
            path.lineTo(c.getX(), c.getY());
            bottomRightX = c.getX();
            bottomRightY = c.getY();
            break;
        case 3:
            path.lineTo(c.getX(), c.getY());
            bottomLeftX = c.getX();
            bottomLeftY = c.getY();
            break;
        }
    }

    path.close();

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

    mPaint.setColor(Color.YELLOW);
    mPaint.setAlpha(TRANSPARENCY);

    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);

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

    mImageView.invalidate();
}

运行此方法后，在我的网格中绘制一个带有5x5大小的完整大小的框的框，但是如果我移动我的手柄，则绘制的框不会引用容器。结果就是这个

正如你所看到的那样，应该在我的网格内的盒子实际上到处都是。我需要它像这样拉伸和调整

如果您需要任何澄清，请提供任何帮助，请告知我们。

Answer 1

这将帮助您入门：

代码：

import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.os.Build;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by Muhammad Wajeeh on 01-Dec-14.
 */
public class PolyGrid extends View {
    private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    private Matrix mMatrix = new Matrix();

    public PolyGrid(Context context) {
        super(context);
    }

    public PolyGrid(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public PolyGrid(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public PolyGrid(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.save();
        final int w = getMeasuredWidth();
        final int h = getMeasuredHeight();

        float[] src = {0, 0, w, 0, w, h, 0, h};
        float[] dst = {0, 0, 2*w/3F, h/3F, 2*w/3F, 2*h/3F, 0, h};
        mMatrix.setPolyToPoly(src, 0, dst, 0, src.length >> 1);// magic happens here
        canvas.concat(mMatrix);

        mPaint.setColor(Color.GRAY);
        mPaint.setStrokeWidth(20);
        mPaint.setStyle(Paint.Style.STROKE);

        final float gridSizeH = w / 4F;
        final float gridSizeV = h / 4F;
        for (int i = 0; i <= 4; i++) {
            // draw horizontal and vertical lines normally
            float y = i * gridSizeV;
            float x = i * gridSizeH;
            canvas.drawLine(0, y, w, y, mPaint);
            canvas.drawLine(x, 0, x, h, mPaint);
        }
        canvas.restore();
    }
}