search

terrylinla / react-native-sketch-canvas

A React Native component for drawing by touching on both iOS and Android.
MIT License
697 stars 453 forks source link

Dashed Line #80

Closed ArturShoba closed 6 years ago

ArturShoba commented 6 years ago

How can I draw a dashed line?

creambyemute commented 6 years ago

@ArturShoba I'll just explain how you'd do that in Android but not iOS (as I don't know yet).

The dashed line is not easily achievable from the JS-Side and requires native code.

What I'd do:

  1. Create a LineStyle.java which just holds an enum LineStyle public enum LineStyle { DASHED, SOLID }
  2. Add a way to switch line style in JS and communicate it to the native side (as string)
  3. Find out where the lines/paths are drawn onto the canvas so you can modify the Paint object which configures color, strokeWidth etc. (Hint: It's in SketchData.java getPaint())
  4. You'll need access to the set LineStyle in SketchData.java
  5. Add import android.graphics.DashPathEffect; at SketchData.java
  6. Modify getPaint() when isErase == false && lineStyle == LineStyle.DASHED to set paintObject.setPathEffect(new DashPathEffect(new float[]{5, 5}, 0));

This should result in a dashed line.

In my fork of this library I'm working on a feature to add movable, rotatable and scalable shapes/text stickers. I've done a dashed border for them.

ArturShoba commented 6 years ago

@creambyemute Thank You!

creambyemute commented 6 years ago

@ArturShoba Were you able to get it work :-)?

ArturShoba commented 6 years ago

@creambyemute Yes, I was able to get it work.