android - studio - gridview c#

Cuadrícula dinámicamente redimensionable con asas Android

Question

Tengo una grilla que estoy dibujando en un Canvas con 4 manijas en cada esquina. Cuando arrastro una manija en cualquier dirección, necesito volver a clasificar según el tamaño las células dentro de mi rejilla. En este momento, las celdas están dibujadas, y cambian de tamaño, pero dibujan en relación con el asa superior izquierda y terminan por toda mi pantalla. Nunca se quedan dentro de la caja que dibujo en mi lienzo. Además, se escalan, pero no escalan la perspectiva, solo el tamaño.

Esto es lo que tengo hasta ahora

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

Después de ejecutar este método, se dibuja un cuadro con cuadros de tamaño perfecto de 5x5 en mi cuadrícula; sin embargo, si muevo mi manija, mis cajas se dibujarán sin referencia al contenedor. El resultado es esto

Como puede ver, las cajas que se supone que están dentro de mi cuadrícula en realidad están en todas partes. Necesito que se estire y ajuste así

Se agradece cualquier ayuda, si necesita alguna aclaración, ¡por favor hágamelo saber!

Answer 1

Esto lo ayudará a comenzar:

El código:

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