動態可調整大小的網格與手柄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(); 
    } 
}