Skip to content

A Canvas/Image Editor library with easy support for canvas/image editing using paints, drawable sticker, and text sticker in Android (Kotlin).

License

Notifications You must be signed in to change notification settings

outsbook/CanvasEditor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

71 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.