Feature request: touch area to fill with color

[ragcsalo]

First of all: thanks for this plugin!!! I use it in a mobile app. :-)

I'd like to see a feature where I can fill in an area with a specified color just by touching inside the area. For instance: I load a simple drawing, and I'd like to color the different parts of the drawing by touching the desired area. I know it's not the purpose of the plugin, but if you could implement it, I would be very grateful! :-) Also if you could suggest any other solution, that would be great. :-)

[jimdoescode]

I think you should be able to accomplish this using a custom brush. It has access to the canvas 2d context which you can use to perform a flood fill of the desired color. You'll probably want to run the flood fill in the strokeBegin method of your custom brush since that provides an x and y origin point. Then make the other brush methods no-ops since there's really no touch movement handling.

I'm going to close this request since I think it's doable using the existing framework and I'm not actively working on this library at the moment. But please post back with your custom brush when you get it implemented. I'd love to see it!

Cheers

[ragcsalo]

Thanks @jimdoescode :) I'm not sure how to do what you suggested, but I'll do my research... :-)

[ragcsalo]

Thanks again for the advice, I finally did it!! :-)

1. I had to include floodfill.js from https://github.com/binarymax/floodfill.js
2. I created a new brush called FillBrush in jqscribble.extrabrushes.js (code below)
3. I added the link for FillBrush in example.html (in the custom brushes section)

Code for FillBrush in jqscribble.extrabrushes.js:

FillBrush.prototype = new jqScribbleBrush;
function FillBrush()
{
	FillBrush.prototype.strokeBegin = function(x, y)
	{
		jqScribbleBrush.prototype.strokeBegin.call(this, x, y);
		this.context.fillStyle = this.brushColor;
                this.context.fillFlood(x, y);
	};
};

[jimdoescode]

Oh wow! That's a super clean solution. Nice work!