Increase thickness of polygon & circle border

[Anand]

First of all Thank you Adam Maschek. Great Work.

Query:

How to
1. Increase the thickness of polygon & circle border.
2. Fill the area inside any shape drawn so that user will user will
understand how much area he has selected.

Please Explain in detail as i am a rookie in JavaScript.

Waiting for reply

Regards
Anand Wankhede

[Adam Maschek]

Hi Anand,

Good questions there! Here are the solutions:

1. increase border
a, if you want to increase the canvas border, you go to function
imgmap.prototype._setBorder
and change
this.areas[id].style.borderWidth = '3px';
for example.
b, if you want to change the border thickness of the shapes
themselves, you go to function
imgmap.prototype._repaint
and for both the circle, both the polygon sections, before
ctx.beginPath();
you add
ctx.lineWidth = 3;
Please note that the rectangles use the canvas border as the shape
border, so to change a rectangle border, you need to do the change in
1/a.

2. fill the area
a, for circles and polygons, you go to the function
imgmap.prototype._repaint
and for both shapes before
ctx.beginPath();
you add
ctx.fillStyle = color;
then either you replace ctx.stroke(); with ctx.fill(); or add it in a
new line.
The difference is if the shape will only be filled, or filled+ border
drawn.
b, for rectangles it is a bit more problematic, as a quick hack you
can go to function
imgmap.prototype._setopacity
and add
if (area.shape == 'rect') {
bgcolor = '#ff0000';
}
as the first line with your desired color.

Would be nice to have most of these settings configurable. I will add
it to the next release.

Cheers,
Adam

[Adam Maschek]

Great,

If you have a public url or sth, feel free to share it.

Adam

On Mon, Apr 6, 2009 at 8:07 AM, Anand <anandpraka...@gmail.com> wrote:
>
> Hello Adam,
>
> Thank you very much for your detail reply.
>
> Earlier i was able to increase the thickness of Rect border but not of
> the Circle & Polygon.
>
>                           Now with YOUR HELP every thing is working
> perfectly.
>
>  I have actually created a Image Mapping WYSIWYG interface with the
> help of your image map api , CAKEPHP & MYSQL.
>
>
> Regards
> Anand Wankhede
> >
>

[Anand]

Hello Adam,

Thank you very much for your detail reply.

Earlier I was able to increase the thickness of Rect border but not of

the Circle & Polygon.

Now with YOUR HELP everything is working perfectly.

New Quires:
1. I think there should be dot displayed on each and every vertex of
the shape,
So that user comes to know that he is drawing the line between those
two dots.

As per my knowledge those dots will also be in a DIV tag.

I have actually created a Image Mapping WYSIWYG interface with the
help of your image map api , CAKEPHP & MYSQL.

It has following functionalities:
1. Image maps are stored into database.

2. Just by moving mouse over the image the particular area are
highlighted & user gets the necessary information about that
particular area.

3. Admin can Add , Edit or Delete the image map by using the
interface.

Waiting for your reply on new queries….

Regards
Anand Wankhede

[Anand]

Hi Adam,

Adam just give me some time as i am little bit busy with with my
company project.

I will create a separate code for this functionality in core PHP so
that if anyone who doesn't understand MVC framework [CAKEPHP] can also
get an idea and understand all functionality of this code.

Just give me some time.

Regards
Anand Wankhede

On Apr 6, 5:51 pm, Adam Maschek <adam.masc...@gmail.com> wrote:
> Great,
>
> If you have a public url or sth, feel free to share it.
>
> Adam
>

[Anand]

Hi Adam,

Error in quick fix:

Filling area is not working at all in IE 7.0 for circle & polygon.
In FF it is working fine.

I have email you a jpeg image of the screen shot.

Waiting for the reply...

Regards
Anand

[Adam Maschek]

Hi Anand,

Apparently in the IE implementation (excanvas), you can either do fill
or stroke, but not both.
So either you change the order to:
ctx.fill();
ctx.stroke();

or you just leafe fill and comment out stroke.

Cheers,
Adam

[Adam Maschek]

Hi Anand,

About the dots for vertices:
Well, i dont see why is not obvious to the user that he is drawing a
line from the last point to the current mouse position?
If i put dots there, the user will think he can drag them to adjust
the polygon, which is not the case...it could be done, yes, but i feel
its a bit complex.

Adam

[Anand]

Hello Adam,

I totally agree with your views.I think there is no need for the dots
it will make things complex.

New Quries:

1. We need to take care of one thing " We need to provide a color
picker to the user " so that he can select the image map Fill &
border color dynamically and the image map color looks different from
the IMAGE COLOR on which the map has been drawn.

2. When i zoom the image a scroll bar appears to the div containing
the IMAGE to be mapped & than i use those scroll bars to scroll
through the image
Can't we apply the drag effect to the image so that we can just
drag the zoomed image inside the div.

Adam i really want to thank you for spending your precious time to
help me & the people who will refer this group in future.

Regards
Anand Wankhede

[Adam Maschek]

Hi There,

1. do you mean to set the color globally or per each shape drawn?
2. well, maybe thats possible, i have to check it

[Anand]

Hello

That was quick reply

1. Yes, different color for different image map just to make it more
user friendly.
2. Egarly waiting for reply on point no 2

Regards
Anand Wankhede