CanvasEditor

A Canvas/Image Editor library with easy support for canvas/image editing using paints, drawable sticker, and text sticker in Android. The lib source code writeen using Kotlin language.

Index

Title	Description/Methods
Getting Started	Install the canvas editor library to your project
Setup the Canvas Editor	Setup the canvas editor to your project activity and activity layout
Drawing	1. setPaintColor(color: Int) 2. setStrokeWidth(strokeWidth: Float)
Drawable/Bitmap Sticker	1. addDrawableSticker(drawable: Drawable) 2. addBitmapSticker(bitmap: Bitmap)
Text Sticker	1. addTextSticker(text: String, textColor: Int, typeface: Typeface?) 2. addDrawableTextSticker(drawable: Drawable, text: String, textColor: Int, typeface: Typeface?)
Active Sticker Methods	1. removeActiveSticker() 2. doneActiveSticker() 3. flipActiveSticker() 4. zoomAndRotateActiveSticker(motionEvent: MotionEvent)
Canvas Editor Methods	1. undo() 2. redo() 3. removeAll() 4. downloadBitmap(): Bitmap
Canvas Editor Callback	Set the listener for access callback functions

Getting Started

To include the library in your project just simply add the dependencies. Choose one from Gradle, and Maven

Gradle

implementation 'com.outsbook.libs:canvaseditor:1.0.0'

Maven

<dependency>
  <groupId>com.outsbook.libs</groupId>
  <artifactId>canvaseditor</artifactId>
  <version>1.0.0</version>
  <type>pom</type>
</dependency>

Setup the Canvas Editor

Add the CanvasEditorView to your Activity/Fragment layout

<com.outsbook.libs.canvaseditor.CanvasEditorView
        android:id="@+id/canvasEditor"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

Get the CanvasEditor in your Activity

Kotlin

import com.outsbook.libs.canvaseditor.CanvasEditorView

class MainActivity : AppCompatActivity() {
    private lateinit var canvasEditor: CanvasEditorView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
	canvasEditor = findViewById(R.id.canvasEditor)
    }
}

Java

import com.outsbook.libs.canvaseditor.CanvasEditorView;

public class MainActivity extends AppCompatActivity {
    private CanvasEditorView canvasEditor;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        canvasEditor = findViewById(R.id.canvasEditor);
    }
}

Preview

Now you are ready to play with CanvasEditor

Drawing

#	Method	Action
1	setPaintColor(color: Int)	Set the brush color to paint
2	setStrokeWidth(strokeWidth: Float)	Set the brush stroke width to paint

1. setPaintColor(color: Int)

Kotlin

val color = ContextCompat.getColor(this, R.color.colorBlack)
canvasEditor.setPaintColor(color)

Java

int color = ContextCompat.getColor(this, R.color.colorBlack);
canvasEditor.setPaintColor(color);

Preview

2. setStrokeWidth(strokeWidth: Float)

Kotlin

val strokeWidth = 20f
canvasEditor.setStrokeWidth(strokeWidth)

Java

float strokeWidth = 20f;
canvasEditor.setStrokeWidth(strokeWidth);

Preview

Drawable/Bitmap Sticker

#	Method	Action
1	addDrawableSticker(drawable: Drawable)	Add drawable sticker to the canvas editor
2	addBitmapSticker(bitmap: Bitmap)	Add bitmap sticker to the canvas editor

1. addDrawableSticker(drawable: Drawable)

Kotlin

val drawable = ContextCompat.getDrawable(this, R.drawable.app_icon)
drawable?.let{
    canvasEditor.addDrawableSticker(drawable)
}

Java

Drawable drawable = ContextCompat.getDrawable(this, R.drawable.app_icon);
if(drawable != null){
    canvasEditor.addDrawableSticker(drawable);
}

Preview

2. addBitmapSticker(bitmap: Bitmap)

Kotlin

val bitmap = //get your bitmap
bitmap?.let{
    canvasEditor.addBitmapSticker(bitmap)
}

Java

Bitmap bitmap = //get your bitmap
if(bitmap != null){
    canvasEditor.addBitmapSticker(drawable);
}

Preview

Text Sticker

#	Method	Action
1	addTextSticker(text: String, textColor: Int, typeface: Typeface?)	Add text sticker to the canvas editor
2	addDrawableTextSticker(drawable: Drawable, text: String, textColor: Int, typeface: Typeface?)	Add text sticker with drawable background to the canvas editor

1. addTextSticker(text: String, textColor: Int, typeface: Typeface?)

Kotlin

val text = "Canvas"
val textColor = ContextCompat.getColor(this, R.color.colorPrimary)
canvasEditor.addTextSticker(text, textColor, null)

Java

String text = "Canvas";
int color = ContextCompat.getColor(this, R.color.colorPrimary);
canvasEditor.addTextSticker(text, color, null);

Preview

2. addDrawableTextSticker(drawable: Drawable, text: String, textColor: Int, typeface: Typeface?)

Kotlin

val drawable = ContextCompat.getDrawable(this, R.drawable.ic_panorama_240dp)
val text = "Canvas"
val textColor = ContextCompat.getColor(this, R.color.colorYellow)
drawable?.let{
    canvasEditor.addDrawableTextSticker(it, text, textColor, null)
}

Java

Drawable drawable = ContextCompat.getDrawable(this, R.drawable.ic_panorama_240dp);
String text = "Canvas";
int textColor = ContextCompat.getColor(this, R.color.colorYellow);
if(drawable != null){
    canvasEditor.addDrawableTextSticker(drawable, text, textColor, null);
}

Preview

Active Sticker Methods

#	Method	Action
1	removeActiveSticker()	Remove active sticker from canvas editor
2	doneActiveSticker()	Editing done of active sticker on canvas editor
3	flipActiveSticker()	Flip active sticker on canvas editor
4	zoomAndRotateActiveSticker(motionEvent: MotionEvent)	Zoom and rotate active sticker with motihn event on canvas editor

1. removeActiveSticker()

Kotlin

canvasEditor.removeActiveSticker()

Java

canvasEditor.removeActiveSticker();

2. doneActiveSticker()

Kotlin

canvasEditor.doneActiveSticker()

Java

canvasEditor.doneActiveSticker();

3. flipActiveSticker()

Kotlin

canvasEditor.flipActiveSticker()

Java

canvasEditor.flipActiveSticker();

4. zoomAndRotateActiveSticker(motionEvent: MotionEvent)

Kotlin

val motionEvent = //Set your motion event
canvasEditor.zoomAndRotateActiveSticker(motionEvent)

Java

MotionEvent motionEvent = //Set your motion event
canvasEditor.zoomAndRotateActiveSticker(motionEvent);

Canvas Editor Methods

#	Method	Action
1	undo()	Undo from canvas editor
2	redo()	Redo to canvas editor
3	removeAll()	Delete everything from canvas editor
4	downloadBitmap(): Bitmap	Get the canvas as bitmap, you can play with the bitmap :)

1. undo()

Kotlin

canvasEditor.undo()

Java

canvasEditor.undo();

2. redo()

Kotlin

canvasEditor.redo()

Java

canvasEditor.redo();

3. removeAll()

Kotlin

canvasEditor.removeAll()

Java

canvasEditor.removeAll();

4. downloadBitmap(): Bitmap

Kotlin

val bitmap = canvasEditor.downloadBitmap()

Java

Bitmap bitmap = canvasEditor.downloadBitmap();

Canvas Editor Callback

Kotlin

import com.outsbook.libs.canvaseditor.CanvasEditorView
import com.outsbook.libs.canvaseditor.listeners.CanvasEditorListener

class MainActivity : AppCompatActivity() {
    private lateinit var canvasEditor: CanvasEditorView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        canvasEditor = findViewById(R.id.canvasEditor)

        canvasEditor.setListener(object: CanvasEditorListener {
            override fun onEnableUndo(isEnable: Boolean) {
                // isEnable = true (undo list is not empty)
                // isEnable = false (undo list is empty)
                buttonUndo.imageAlpha = if(isEnable) 255 else 50
            }

            override fun onEnableRedo(isEnable: Boolean) {
                // isEnable = true (redo list is not empty)
                // isEnable = false (redo list is empty)
                buttonRedo.imageAlpha = if(isEnable) 255 else 50
            }

            override fun onTouchEvent(event: MotionEvent) {
                //When the canvas touch
            }

            override fun onStickerActive() {
                //When a sticker change to active mode
            }

            override fun onStickerRemove() {
                //When a sticker remove from canvas
            }

            override fun onStickerDone() {
                //When the active sticker added to canvas
            }

            override fun onStickerZoomAndRotate() {
                //When the active sticker zoom or rotate
            }

            override fun onStickerFlip() {
                //When the active sticker flip
            }
        })
    }
}

Java

import com.outsbook.libs.canvaseditor.CanvasEditorView;
import com.outsbook.libs.canvaseditor.listeners.CanvasEditorListener;

public class MainActivity extends AppCompatActivity {
    private CanvasEditorView canvasEditor;

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

        canvasEditor.setListener(new CanvasEditorListener() {
            @Override
            public void onEnableUndo(boolean isEnable) {
                // isEnable = true (undo list is not empty)
                // isEnable = false (undo list is empty)
            }

            @Override
            public void onEnableRedo(boolean isEnable) {
                // isEnable = true (redo list is not empty)
                // isEnable = false (redo list is empty)
            }

            @Override
            public void onTouchEvent(MotionEvent motionEvent) {
                //When the canvas touch
            }

            @Override
            public void onStickerActive() {
                //When a sticker change to active mode
            }

            @Override
            public void onStickerRemove() {
                //When a sticker remove from canvas
            }

            @Override
            public void onStickerDone() {
                //When the active sticker added to canvas
            }

            @Override
            public void onStickerZoomAndRotate() {
                //When the active sticker zoom or rotate
            }

            @Override
            public void onStickerFlip() {
                //When the active sticker flip
            }
        });
    }
}

How to contribute?

• Create an issue first to discuss about the changes you are suggesting.
• Fork the project.
• Create a branch with name CE-[Issue Number] Example: CE-123
• Make required changes and commit to that branch.
• Generate pull request. Mention all the required description regarding changes you made.

Maintained by

Shahin ShamS (GitHub: outsbook)

Licenses

Copyright(c) 2020, Shahin ShamS

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.