Giter VIP home page Giter VIP logo

drawview's Introduction

Draw

A simple Android view for drawing.

Installation

Step 1. Add the JitPack repository to your build file

If you are using Gradle 6.8 or higher version, add it in setting.gradle at the end of repositories:

dependencyResolutionManagement {
    repositories {
        maven { url 'https://jitpack.io' }
    }
}

If not, add it in your root build.gradle at the end of repositories:

allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
    }
}

Step 2. Add the dependency

dependencies {
    implementation 'com.github.DonghanX:Draw:v1.0.3'
}

Features

  • Support multiple types of lines, including solid line, dashed line and Chisel Tip line.
  • Eraser, Redo, Undo and ClearAll.
  • Change the background of the Canvas by setting image resource or color.
  • Keep track of the state after performing drawing actions.
  • Save the Canvas as Bitmap.

Usage

Setup:

Include DrawView in your layout.xml directly

<com.redhoodhan.draw.DrawView
    android:id="@+id/draw_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

(Alternatively) Include DrawView in your layout.xml with custom attributes setting

<com.redhoodhan.draw.DrawView
    android:id="@+id/draw_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:defaultBrushColor="@color/purple"
    app:defaultBrushSize="20F"
    app:defaultCanvasBackgroundImageRes="@drawable/img_draw_background_1"
    app:defaultEraserSize="15F" />
Attribute Name Format Description
defaultBrushSize Float The default value of brush size
defaultEraserSize Float The default value of eraser size
defaultBrushColor Color The default stroke color of brush paint
defaultCanvasBackgroundColor Color The default color of canvas background
defaultCanvasBackgroundImageRes Reference The default image resource ID of canvas background

Note that setting defaultCanvasBackgroundImageRes will override the effect of defaultCanvasBackgroundColor.

Further Usage:

(Optional) Implement the callbacks

  • drawViewPressCallback: Invoked when you press the DrawView.
  • undoStateCallback / redoStateCallback: Invoked when the content in the DrawView changes. The given receiver parameter returns true if Undo / Redo action is available after the change.
binding.drawView.apply {
    drawViewPressCallback = {
        // Do your stuff here
    }

    undoStateCallback = { isUndoAvailable ->
        // Do your stuff here
    }

    redoStateCallback = { isRedoAvailable ->
        // Do your stuff here
    }
}

Switch the type of lines by setting lineType variable in the DrawView

binding.drawView.lineType = LineType.SOLID

LineType is utilized by DrawView to modify the path properties and paint options, such as StrokeStyle, Alpha and PathEffect.

LineType Description
LineType.SOLID Solid line
LineType.DASH Dashed line with gap interval that is calculated by brushSize
LineType.CHISEL Chisel Tip line with alpha channel set to a specific value
LineType.ERASER Solid line with Xfermode set to PorterDuff.Mode.CLEAR

Undo

binding.drawView.undo()

Redo

binding.drawView.redo()

ClearAll

binding.drawView.clearCanvas(needsSaving = true)

If needsSaving is true, then this ClearAll action is capable of being redone.

Set color background

binding.drawView.canvasBackgroundColor = Color.BLACK

or

binding.drawView.canvasBackgroundColor = ResourcesCompat.getColor(resources, yourColorResId, null)

Note that canvasBackgroundColor receives a single color value in the form 0xAARRGGBB.

Set image resource background

binding.drawView.canvasBackgroundImg = yourImageResId

Change brush color

binding.drawView.brushColor = Color.BLACK

or

binding.drawView.brushColor = ResourcesCompat.getColor(resources, yourcolorResId, null)

Note that brushColor receives a single color value in the form 0xAARRGGBB.

Change brush size

binding.drawView.brushSize = 10F

Note that brushSize receives a single float value.
Also note that the minimum stroke width is set to 3F.

Change eraser size

binding.drawView.eraserSize = 10F

Note that eraserSize receives a single float value.
Also note that the minimum stroke width is set to 3F.

Save the canvas as Bitmap

val bitmap = binding.drawView.saveAsBitmap()

Thanks

License

   Copyright 2022 Donghan X

   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.

drawview's People

Contributors

donghanx avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

drawview's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.