2

The most common way to draw with your finger on screen is to use android's built in canvas, the usual steps are:

1) Create a custom view (drawing view).

2) Set a bitmap to the canvas.

3) initialize a path (set paint, ...).

4) implement onTouchEvent (DOWN/UP/MOVE) to get position points (X && Y).

5) call onDraw() to draw each path according to the X && Y.

so my data here is X && Y (the finger position on screen).

Problem

Some note apps, use a special technique called (drawing with vectors), at first I didn't get the idea (because all I know is canvas and the old way of finger drawing).

After research

I researched a bit and found out that vectors are graphics that scale without losing quality.

I found out a similar post to my problem this one.

If you opened the link and read the answer you will see that @Trevor stated a very good answer on that. He said that you must get the path data using your finger and store them as vector data in memory.

Store them as vector data in memory??

Okay what is that supposed to mean, where should I store them and what is the format knowing that I only can use the finger to get two float positions X && Y...so how I save them as vector? and where should I save them?

If I was able to save them

How to retrieve them and draw them back using canvas onDraw() method?

Do you think this is the meaning of drawing with vectors? If yes, What is the purpose?

I am looking at a way to enhance drawing technique on canvas and manipulate the drawings to make them feel more realistic.

Thanks for your help.

Hasan Bou Taam
  • 4,017
  • 2
  • 12
  • 22
  • see `android.graphics.Path` - you draw it by using `Canvas#drawPath` method - [here](https://stackoverflow.com/a/7065736/2252830) you can see how to build the `Path` (of course it is one of many possible solution) – pskink Mar 03 '18 at 00:30
  • @pskink I am not asking how to draw path in android, I am asking how to draw using vector graphics with your finger on canvas? Do you know ? – Hasan Bou Taam Mar 03 '18 at 00:43
  • @pskink please check the link I provided above to understand my question. – Hasan Bou Taam Mar 03 '18 at 00:47
  • and `Path` is not a vector graphics? did you check its javadocs? if so, whats unclear? – pskink Mar 03 '18 at 00:53
  • @pskink some apps that use finger draw, say that they render the path that you draw using vector graphics and not bitmap. I can't understand what does this suppose to mean. – Hasan Bou Taam Mar 03 '18 at 00:57
  • this means that you simply call `Canvas#drawPath` inside `View#onDraw` method to draw it (no need of any `Bitmap`) – pskink Mar 03 '18 at 00:58
  • @pskink the link that I provided asked the question that I am asking, and that is how to draw or render the paint thing on the screen using vector (vectors are smooth ) they don't show jagged edges. – Hasan Bou Taam Mar 03 '18 at 00:59
  • so did you try the link i posted? [this one](https://stackoverflow.com/a/7065736/2252830) – pskink Mar 03 '18 at 01:01
  • @pskink why in the link that I provided they are discussing how to change input touch points to svg? – Hasan Bou Taam Mar 03 '18 at 01:01
  • @pskink I know that canvas draws with or without bitmap, but I am looking for ways to speed up the drawing and make it more realistic? but don't know how to (make it fast, apply styles,blend,...). And canvas doesn't seem to do this (something like giving ink texture to the drawn path). – Hasan Bou Taam Mar 03 '18 at 01:05
  • then read `Paint`, `PathEffect` and `Shader` documentation (and maybe `MaskFilter` and `ColorFilter`) – pskink Mar 03 '18 at 01:07
  • @pskink I will check that, I want to ask you though is onDraw() running on background thread? If no should I run onDraw() on background thread ? does it make any difference interms of speeding up the drawing. – Hasan Bou Taam Mar 03 '18 at 01:10
  • see https://developer.android.com/guide/topics/ui/custom-components.html and https://developer.android.com/training/custom-views/custom-drawing.html in particular – pskink Mar 03 '18 at 01:11
  • @pskink is it better to run onDraw() on back ground thread? – Hasan Bou Taam Mar 03 '18 at 01:16
  • @pskink please check my other question [here](https://stackoverflow.com/questions/49100641/convert-user-touch-input-to-svg) to understand my question better. – Hasan Bou Taam Mar 05 '18 at 01:18

1 Answers1

1

Scalable Vector Graphics (.svg) is a simple file format based in HTML. You would probaly generate a .svg element on the fly from user inputs, which you can then draw to the screen again (with appropriate libraries) and also can save / reload into your application very easily.

Here is a tutorial on svg paths, which sounds like what you would want; Bézier curves make for a good interpolation between your data points.

Tau
  • 496
  • 4
  • 22