android - 带 handle 的动态可调整大小的网格 Android

Question

我在 Canvas 上绘制了一个网格，每个角都有 4 个 handle 。当我向任何方向拖动 handle 时，我需要重新调整网格内单元格的大小。现在，单元格已被绘制，它们会调整大小，但它们是相对于左上角的 handle 绘制的，最终会遍及我的屏幕。他们永远不会留在我在 Canvas 上画的盒子里。此外，它们会缩放，但不会缩放视角，只会缩放尺寸。

这是我目前的情况

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 框，但是如果我移动我的 handle ，我的框将在不引用容器的情况下绘制。结果是这样的

如您所见，本应位于我的网格内的框实际上到处都是。我需要它像这样拉伸(stretch)和调整

感谢任何帮助，如果您需要任何说明，请告诉我!

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