如何在Android中从图库中选择的图像上手工绘制或书写文本?

时间:2016-12-29 10:28:06

标签: android-imageview android-canvas draw ontouchevent touchimageview

实际上我已经编写了一个代码来从图库中选择图像,但我不知道如何手工绘制或写入文本。编辑的图像应该单独保存在SD卡中。基本上我必须制作基本的绘图应用程序画布将是我选择的图像,我的触摸输入绘制一个圆圈或任何东西。

$closeButton

2 个答案:

答案 0 :(得分:0)

我找到了符合您要求的解决方案。所以尝试这个,但为此你必须使用绘图视图而不是图像视图来绘制或写入从图库中选取的图像上的文本。

特此,我正在发布代码。

activity_main.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:paddingBottom="5dp"
    android:paddingTop="5dp"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageButton
            android:id="@+id/buttonNew"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:contentDescription="@string/start_new"
            android:src="@drawable/new_pic" />

        <ImageButton
            android:id="@+id/buttonBrush"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:contentDescription="@string/brush"
            android:src="@drawable/brush" />

        <ImageButton
            android:id="@+id/buttonErase"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:contentDescription="@string/erase"
            android:src="@drawable/eraser" />

        <ImageButton
            android:id="@+id/buttonSave"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:contentDescription="@string/save"
            android:src="@drawable/save" />

        <ImageButton
            android:id="@+id/buttonPickImage"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:contentDescription="@string/save"
            android:src="@drawable/save" />

    </LinearLayout>

    <com.wordpress.priyankvex.paintapp.DrawingView
        android:id="@+id/drawing"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginBottom="3dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="3dp"
        android:layout_weight="1"
        android:background="@color/white" />

    <!-- Color pallet -->
    <LinearLayout
        android:id="@+id/paint_colors"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageButton
            android:layout_width="@dimen/large_brush"
            android:layout_height="@dimen/large_brush"
            android:layout_margin="2dp"
            android:background="@color/skin"
            android:contentDescription="@string/paint"
            android:onClick="paintClicked"
            android:src="@drawable/pallet"
            android:tag="@color/skin" />

        <ImageButton
            android:layout_width="@dimen/large_brush"
            android:layout_height="@dimen/large_brush"
            android:layout_margin="2dp"
            android:background="@color/black"
            android:contentDescription="@string/paint"
            android:onClick="paintClicked"
            android:src="@drawable/pallet"
            android:tag="@color/black" />

        <ImageButton
            android:layout_width="@dimen/large_brush"
            android:layout_height="@dimen/large_brush"
            android:layout_margin="2dp"
            android:background="@color/red"
            android:contentDescription="@string/paint"
            android:onClick="paintClicked"
            android:src="@drawable/pallet"
            android:tag="@color/red" />

        <ImageButton
            android:layout_width="@dimen/large_brush"
            android:layout_height="@dimen/large_brush"
            android:layout_margin="2dp"
            android:background="@color/green"
            android:contentDescription="@string/paint"
            android:onClick="paintClicked"
            android:src="@drawable/pallet"
            android:tag="@color/green" />

        <ImageButton
            android:layout_width="@dimen/large_brush"
            android:layout_height="@dimen/large_brush"
            android:layout_margin="2dp"
            android:background="@color/blue"
            android:contentDescription="@string/paint"
            android:onClick="paintClicked"
            android:src="@drawable/pallet"
            android:tag="@color/blue" />

        <ImageButton
            android:layout_width="@dimen/large_brush"
            android:layout_height="@dimen/large_brush"
            android:layout_margin="2dp"
            android:background="@color/yellow"
            android:contentDescription="@string/paint"
            android:onClick="paintClicked"
            android:src="@drawable/pallet"
            android:tag="@color/yellow" />

    </LinearLayout>

</LinearLayout>

MainActivity.java:

import android.app.AlertDialog;
import android.app.Dialog;
import android.content.DialogInterface;
import android.content.Intent;
import android.database.Cursor;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.net.Uri;
import android.os.Build;
import android.os.Bundle;
import android.provider.MediaStore;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;

import java.util.UUID;


public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private DrawingView mDrawingView;
    private ImageButton currPaint, drawButton, eraseButton, newButton, saveButton, buttonPickImage;
    private float smallBrush, mediumBrush, largeBrush;
    private final int RESULT_LOAD_IMAGE = 20;
    private Uri pickedImage;
    private String imagePath = "";
    public Bitmap PaintBitmap;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mDrawingView = (DrawingView) findViewById(R.id.drawing);
        // Getting the initial paint color.
        LinearLayout paintLayout = (LinearLayout) findViewById(R.id.paint_colors);
        // 0th child is white color, so selecting first child to give black as initial color.
        currPaint = (ImageButton) paintLayout.getChildAt(1);
        currPaint.setImageDrawable(getResources().getDrawable(R.drawable.pallet_pressed));
        drawButton = (ImageButton) findViewById(R.id.buttonBrush);
        drawButton.setOnClickListener(this);
        eraseButton = (ImageButton) findViewById(R.id.buttonErase);
        eraseButton.setOnClickListener(this);
        newButton = (ImageButton) findViewById(R.id.buttonNew);
        newButton.setOnClickListener(this);
        saveButton = (ImageButton) findViewById(R.id.buttonSave);
        saveButton.setOnClickListener(this);
        buttonPickImage = (ImageButton) findViewById(R.id.buttonPickImage);
        buttonPickImage.setOnClickListener(this);

        smallBrush = getResources().getInteger(R.integer.small_size);
        mediumBrush = getResources().getInteger(R.integer.medium_size);
        largeBrush = getResources().getInteger(R.integer.large_size);

        // Set the initial brush size
        mDrawingView.setBrushSize(mediumBrush);
    }

    /**
     * Method is called when color is clicked from pallet.
     *
     * @param view ImageButton on which click took place.
     */
    public void paintClicked(View view) {
        if (view != currPaint) {
            // Update the color
            ImageButton imageButton = (ImageButton) view;
            String colorTag = imageButton.getTag().toString();
            mDrawingView.setColor(colorTag);
            // Swap the backgrounds for last active and currently active image button.
            imageButton.setImageDrawable(getResources().getDrawable(R.drawable.pallet_pressed));
            currPaint.setImageDrawable(getResources().getDrawable(R.drawable.pallet));
            currPaint = (ImageButton) view;
            mDrawingView.setErase(false);
            mDrawingView.setBrushSize(mDrawingView.getLastBrushSize());
        }
    }

    @Override
    public void onClick(View v) {
        int id = v.getId();
        switch (id) {
            case R.id.buttonBrush:
                // Show brush size chooser dialog
                showBrushSizeChooserDialog();
                break;
            case R.id.buttonErase:
                // Show eraser size chooser dialog
                showEraserSizeChooserDialog();
                break;
            case R.id.buttonNew:
                // Show new painting alert dialog
                showNewPaintingAlertDialog();
                break;
            case R.id.buttonSave:
                // Show save painting confirmation dialog.
                showSavePaintingConfirmationDialog();
                break;

            case R.id.buttonPickImage:
                // Show save painting confirmation dialog.
                Intent i = new Intent(Intent.ACTION_PICK, android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
                startActivityForResult(i, RESULT_LOAD_IMAGE);
                break;
        }
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (requestCode == RESULT_LOAD_IMAGE && resultCode == RESULT_OK) {
            pickedImage = data.getData();
            String[] filePath = {MediaStore.Images.Media.DATA};
            Cursor cursor = getContentResolver().query(pickedImage, filePath, null, null, null);
            cursor.moveToFirst();
            imagePath = cursor.getString(cursor.getColumnIndex(filePath[0]));
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {

                // set Gallery Image to Drawing-view
                if (imagePath != null) {
                    PaintBitmap = getResizeBitmap(imagePath);
                    BitmapDrawable ob = new BitmapDrawable(getResources(), PaintBitmap);
                    mDrawingView.setBackgroundDrawable(ob);
                }
            }
        }
    }

    public static Bitmap getResizeBitmap(String path) {
        BitmapFactory.Options op = new BitmapFactory.Options();
        op.inPreferredConfig = Bitmap.Config.ARGB_8888;
        Bitmap bmap = BitmapFactory.decodeFile(path, op);
        int nh = (int) (bmap.getHeight() * (1024.0 / bmap.getWidth()));
        Bitmap bitmapThumbnail = Bitmap.createScaledBitmap(bmap, 1024, nh, true);
        int bitmapWidthMain = bitmapThumbnail.getWidth();
        int bitmapHeightMain = bitmapThumbnail.getHeight();
        return bitmapThumbnail;
    }
    private void showBrushSizeChooserDialog() {
        final Dialog brushDialog = new Dialog(this);
        brushDialog.setContentView(R.layout.dialog_brush_size);
        brushDialog.setTitle("Brush size:");
        ImageButton smallBtn = (ImageButton) brushDialog.findViewById(R.id.small_brush);
        smallBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mDrawingView.setBrushSize(smallBrush);
                mDrawingView.setLastBrushSize(smallBrush);
                brushDialog.dismiss();
            }
        });
        ImageButton mediumBtn = (ImageButton) brushDialog.findViewById(R.id.medium_brush);
        mediumBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mDrawingView.setBrushSize(mediumBrush);
                mDrawingView.setLastBrushSize(mediumBrush);
                brushDialog.dismiss();
            }
        });

        ImageButton largeBtn = (ImageButton) brushDialog.findViewById(R.id.large_brush);
        largeBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mDrawingView.setBrushSize(largeBrush);
                mDrawingView.setLastBrushSize(largeBrush);
                brushDialog.dismiss();
            }
        });
        mDrawingView.setErase(false);
        brushDialog.show();
    }

    private void showEraserSizeChooserDialog() {
        final Dialog brushDialog = new Dialog(this);
        brushDialog.setTitle("Eraser size:");
        brushDialog.setContentView(R.layout.dialog_brush_size);
        ImageButton smallBtn = (ImageButton) brushDialog.findViewById(R.id.small_brush);
        smallBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mDrawingView.setErase(true);
                mDrawingView.setBrushSize(smallBrush);
                brushDialog.dismiss();
            }
        });
        ImageButton mediumBtn = (ImageButton) brushDialog.findViewById(R.id.medium_brush);
        mediumBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mDrawingView.setErase(true);
                mDrawingView.setBrushSize(mediumBrush);
                brushDialog.dismiss();
            }
        });
        ImageButton largeBtn = (ImageButton) brushDialog.findViewById(R.id.large_brush);
        largeBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mDrawingView.setErase(true);
                mDrawingView.setBrushSize(largeBrush);
                brushDialog.dismiss();
            }
        });
        brushDialog.show();
    }

    private void showNewPaintingAlertDialog() {
        AlertDialog.Builder newDialog = new AlertDialog.Builder(this);
        newDialog.setTitle("New drawing");
        newDialog.setMessage("Start new drawing (you will lose the current drawing)?");
        newDialog.setPositiveButton("Yes", new DialogInterface.OnClickListener() {
            public void onClick(DialogInterface dialog, int which) {
                mDrawingView.startNew();
                dialog.dismiss();
            }
        });
        newDialog.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
            public void onClick(DialogInterface dialog, int which) {
                dialog.cancel();
            }
        });
        newDialog.show();
    }

    private void showSavePaintingConfirmationDialog() {
        AlertDialog.Builder saveDialog = new AlertDialog.Builder(this);
        saveDialog.setTitle("Save drawing");
        saveDialog.setMessage("Save drawing to device Gallery?");
        saveDialog.setPositiveButton("Yes", new DialogInterface.OnClickListener() {
            public void onClick(DialogInterface dialog, int which) {
                //save drawing
                mDrawingView.setDrawingCacheEnabled(true);
                String imgSaved = MediaStore.Images.Media.insertImage(
                        getContentResolver(), mDrawingView.getDrawingCache(),
                        UUID.randomUUID().toString() + ".png", "drawing");
                if (imgSaved != null) {
                    Toast savedToast = Toast.makeText(getApplicationContext(),
                            "Drawing saved to Gallery!", Toast.LENGTH_SHORT);
                    savedToast.show();
                } else {
                    Toast unsavedToast = Toast.makeText(getApplicationContext(),
                            "Oops! Image could not be saved.", Toast.LENGTH_SHORT);
                    unsavedToast.show();
                }
                // Destroy the current cache.
                mDrawingView.destroyDrawingCache();
            }
        });
        saveDialog.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
            public void onClick(DialogInterface dialog, int which) {
                dialog.cancel();
            }
        });
        saveDialog.show();
    }

}

Manifest.xml:

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

尝试此代码,它包括用于在具有不同画笔大小的图像上绘制文本的画笔,橡皮擦和颜色选择器在文本上绘制不同颜色的文本,是的,它将在图库中保存图像。

在此,我附上截图,

enter image description here

希望,它会对你有所帮助。 :)

答案 1 :(得分:0)

此外,还有另一种方法可以使用FingerPaint Api。

从这里下载代码,

    /**
 * @ORM\Id()
 * @ORM\Column(name="id", type="integer")
 * @ORM\GeneratedValue(strategy="AUTO")
 */
private $id;

/**
 * @ORM\ManyToMany(targetEntity="Menu", inversedBy="menuGroup")
 * @ORM\JoinTable(name="administration_menu_group_details")
 */
private $menu;

/**
 * @ORM\OneToMany(targetEntity="User", mappedBy="menuGroup")
 */
private $user;

/**
 * @var string
 *
 * @ORM\Column(name="name", type="string", length=255, unique=true)
 */
private $name;

/**
 * @var string
 *
 * @ORM\Column(name="description", type="string", length=1000)
 */
private $description;

是的,它也没有使用图像视图,但它会从图库中选择图像并将其设置为绘图视图并在该图像上绘制。您也可以尝试这个。