绘图画布上的2D阵列网格

I am writing an pixel art app that paints images the user draws on the screen to pixel look. There are two ways to approach it. Either pixelate the image after saving or have a grid before hand so the user draws the pixel image. I don't find anything on the later method. So my issue with the first is drawing a grid where if a cell is touched I would change the color of it. I tried drawing rectangles on a canvas but that was pointless because i couldn't control the cells.

我正在编写一个像素艺术应用程序，用户将在屏幕上绘制的图像绘制成像素外观。有两种方法可以解决它。保存后对图像进行像素化处理或手头有网格，以便用户绘制像素图像。我在后面的方法上找不到任何东西。所以我的第一个问题是画一个网格，如果一个单元被触摸，我会改变它的颜色。我尝试在画布上绘制矩形但这没有意义，因为我无法控制细胞。

I was thinking about nested for loops that creates a bitmap at each cell?

我在考虑嵌套for循环，在每个单元格中创建一个位图？

2 个解决方案

#1

The following is just a simple, illustrative example. It is not optimized, implements no exception handling, etc.

以下只是一个简单的说明性示例。它没有优化，没有实现异常处理等。

public class PixelGridView extends View {
    private int numColumns, numRows;
    private int cellWidth, cellHeight;
    private Paint blackPaint = new Paint();
    private boolean[][] cellChecked;

    public PixelGridView(Context context) {
        this(context, null);
    }

    public PixelGridView(Context context, AttributeSet attrs) {
        super(context, attrs);
        blackPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    }

    public void setNumColumns(int numColumns) {
        this.numColumns = numColumns;
        calculateDimensions();
    }

    public int getNumColumns() {
        return numColumns;
    }

    public void setNumRows(int numRows) {
        this.numRows = numRows;
        calculateDimensions();
    }

    public int getNumRows() {
        return numRows;
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        calculateDimensions();
    }

    private void calculateDimensions() {
        if (numColumns < 1 || numRows < 1) {
            return;
        }

        cellWidth = getWidth() / numColumns;
        cellHeight = getHeight() / numRows;

        cellChecked = new boolean[numColumns][numRows];

        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawColor(Color.WHITE);

        if (numColumns == 0 || numRows == 0) {
            return;
        }

        int width = getWidth();
        int height = getHeight();

        for (int i = 0; i < numColumns; i++) {
            for (int j = 0; j < numRows; j++) {
                if (cellChecked[i][j]) {

                    canvas.drawRect(i * cellWidth, j * cellHeight,
                                    (i + 1) * cellWidth, (j + 1) * cellHeight,
                                    blackPaint);
                }
            }
        }

        for (int i = 1; i < numColumns; i++) {
            canvas.drawLine(i * cellWidth, 0, i * cellWidth, height, blackPaint);
        }

        for (int i = 1; i < numRows; i++) {
            canvas.drawLine(0, i * cellHeight, width, i * cellHeight, blackPaint);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            int column = (int)(event.getX() / cellWidth);
            int row = (int)(event.getY() / cellHeight);

            cellChecked[column][row] = !cellChecked[column][row];
            invalidate();
        }

        return true;
    }
}

Here's a simple Activity for demonstration:

这是一个简单的演示活动：

public class MainActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        PixelGridView pixelGrid = new PixelGridView(this);
        pixelGrid.setNumColumns(4);
        pixelGrid.setNumRows(6);

        setContentView(pixelGrid);
    }
}

#2

One available option is to look into using the Android Gridview as the drawing grid; I have not tested this myself, however if you create an object to be touched in each cell with your desired pixel dimensions, you should be able to create a rudimentary Pixel Art application by saving the variables.

一个可用的选项是使用Android Gridview作为绘图网格;我自己没有对此进行测试，但是如果您使用所需的像素尺寸创建要在每个单元格中触摸的对象，则应该能够通过保存变量来创建基本的Pixel Art应用程序。

Note, grid view cells are sized based on their contents, as noted in How to set a cell size in Android grid view?

请注意，网格视图单元格的大小取决于其内容，如在Android网格视图中如何设置单元格大小中所述？

Also, when it comes to drawing things, there are many different ways to handle it, however following a guide or tutorial such as http://code.tutsplus.com/tutorials/android-sdk-create-a-drawing-app-touch-interaction--mobile-19202 is generally the best place to start and pull what you need from it.

此外，在绘制内容时，有许多不同的方法来处理它，但是遵循指南或教程，如http://code.tutsplus.com/tutorials/android-sdk-create-a-drawing-app-触摸互动 - mobile-19202通常是最好的起点和拉动你需要的东西。

Good luck!

祝你好运！

#1