0
Not a bug

Draw Bug

Charmaine Anderson 11 years ago updated by Ezra Weinstein (Administrator) 10 years ago 4

When using Drag > Draw Action, the colored line overwrites my imported B&W line drawing and so I can't make a "coloring book" page behave as desired.  

Steps to reproduce:


Import a  B&W line drawing as a .png. Set it either as a background image or just on the stage.  

Import a .png graphic to use as a "crayon" for the desired color. 
Set the Action for the crayon to Drag > Draw and set the desired color, line width.

Set the Behavior on page load to Yes.

Go into Interact mode.  

Notice the crayon draws ok, however it replaces the black outline of the imported B&W illustration .png wherever the crayon is drawn.  

Expected behavior:
I want the black line of my imported drawing to remain viewable, and NOT be overwritten by the colored line, oherwise it isn't a coloring book, its just drawing and replacing the coloring page completely. I tried setting the illustration as a background image and also just placed it on the stage, but this doesn't help.  I also tried putting the B&W illustration on a layer above the crayon layer to no avail. Please advise if there is a better method to do this.
I'm using the latest version of IB3 and a MacPro.


Also, we really need a Stop Draw option added so I can stop the crayon from drawing a line on Drag End and to prevent the crayon from continuing to color  when user decides to choose another color.  I reported this as a bug earlier and the suggested fix does not solve my problem in this scenario.


If you want me to share a small app demonstrating the problem, please send me an email at realartstudios@comcast.net.  Thanks.

Answer

Answer
Not a bug

This is not a bug. You should import a second element that does not contain the border of your image that you want your user to color in.  This element should set inside of your other element, and the draw behavior should be added to this element, this way the user can't color over the line.

Answer
Not a bug

This is not a bug. You should import a second element that does not contain the border of your image that you want your user to color in.  This element should set inside of your other element, and the draw behavior should be added to this element, this way the user can't color over the line.

Hi Ezra, Thanks for your reply.   I was hoping there was a way to allow the end user to choose whatever color they want using a crayon and color whatever element they want with that color, rather than me assigning only one color to an element.  If there is a way to do this, it would be great to know.  Thanks much!

Isn't it possible, to let the user color freely beneath a lineart, like a real coloring book?
At this point, it's not possible to color under the element that shows the lines. One thing I could suggest for making the lines on top of the colors is creating a toggle for showing and hiding the outlines. The image on which the user draws can have a faded outline to give the user an idea of where to color, and when you tap a certain button, you can display the real outlines on top of the coloring area. Then toggling it back (or maybe selecting a drawing color or drawing width) can automatically hide the final outlines.

To change the color, you can create a color menu with an element for each color you'd like to use and add the Tap-SelColor action set to each one, with the color specified.

Another option is to use the default color picker instead of creating a menu of colors. One element can have the Tap-SelColor action set but with the "Selected Color" field set to "User Selectable."
Great suggestions, although, I think it would be a very useful feature, to be able to draw/color under another element, such as a lineart. Is it out of the question, that it will be a possibility later on?

Thank you for the input on color menu too. I will try to see what fits best :)