Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 649
  • Last Modified:

drawing with javscript int a web form

I am building a drawing chat system in C# and using javascript to do the drawing on the client side.  I have a div tag called "divCanvas" in my web form on which I am going to do all of my drawing. THe DIV is:

<DIV onmouseup="toggleLoading(true);setEnd(event.offsetX, event.offsetY);drawPic();setData();" onmousedown="setStart(event.offsetX, event.offsetY);" id="divCanvas"
style="border: 1px solid black; DISPLAY: inline; Z-INDEX: 104; LEFT: 96px; WIDTH: 456px; POSITION: absolute; TOP: 24px; HEIGHT: 404px"  align="center"></DIV>

I have a seperate panel where I set the tools (such as draw rectangle, circle) and colors.  The setStart() function in the div sets the starting x and y values and the setEnd() sets the final x and y values.  My drawing functions use these values to draw the shapes.  But, how can I create a function to draw free form (like a brush or a pencil tool?)  I am guessing I need some kind o array to keep track of all the points the mouse goes over...but I am not sure.

I am attaching in the code section everything required to get the line tool working so that you can see how I have this set up.

Thanks!!
index.aspx:
 
<TABLE id="tblTools" style="BORDER-RIGHT: black thin; BORDER-TOP: black thin; BORDER-LEFT: black thin; WIDTH: 80px; BORDER-BOTTOM: black thin; HEIGHT: 32px" cellSpacing="1" cellPadding="1" width="80" border="1" title="Select some Tool">
<TR>
<TD onclick="setTool(CONST_ACTION_TOOL_LINE);">&nbsp;<IMG style="CURSOR: hand" alt="" src="images/line.jpg"></TD>
</TR>
</TABLE>
 
 I have another table like that where you can pick colors.
 
drawing.js:
 
//Function to set the current tool
function setTool(InputTool){
	
	CurrentTool = InputTool;
	
} //End of setTool
 
//Function to set the starting points for the tool
function setStart(inpX, inpY) {
 
	StartX = inpX;
	StartY= inpY;
	
} //End of setStart
 
//Functions to set the end point for the tool
function setEnd(inpX, inpY) {
 
	EndX = inpX;
	EndY= inpY;
	
} //End of setEnd
 
//Function to actually draw the tool
function drawPic() {
	
	var jg = new jsGraphics("divCanvas");    
	jg.setColor(CurrentColor);
	jg.setStroke(CurrentStroke);
	
	//Check the input tool and take action accordingly
	switch (CurrentTool) {
		case CONST_ACTION_TOOL_LINE:
			jg.drawLine(StartX, StartY, EndX, EndY);
			break;
                                //other cases here
                                } //End of switch
                          jg.paint();
	
	//Call the ajax function to load the data on session
	
} //End of drawPic
 
    graphcs.js:
When drawline is called:
this.drawLine = mkLinDott;
 
function mkLinDott(x1, y1, x2, y2)
{
	if (x1 > x2)
	{
		var _x2 = x2;
		var _y2 = y2;
		x2 = x1;
		y2 = y1;
		x1 = _x2;
		y1 = _y2;
	}
	var dx = x2-x1, dy = Math.abs(y2-y1),
	x = x1, y = y1,
	yIncr = (y1 > y2)? -1 : 1,
	drw = true;
	if (dx >= dy)
	{
		var pr = dy<<1,
		pru = pr - (dx<<1),
		p = pr-dx;
		while ((dx--) > 0)
		{
			if (drw) this.mkDiv(x, y, 1, 1);
			drw = !drw;
			if (p > 0)
			{
				y += yIncr;
				p += pru;
			}
			else p += pr;
			++x;
		}
		if (drw) this.mkDiv(x, y, 1, 1);
	}
 
	else
	{
		var pr = dx<<1,
		pru = pr - (dy<<1),
		p = pr-dy;
		while ((dy--) > 0)
		{
			if (drw) this.mkDiv(x, y, 1, 1);
			drw = !drw;
			y += yIncr;
			if (p > 0)
			{
				++x;
				p += pru;
			}
			else p += pr;
		}
		if (drw) this.mkDiv(x, y, 1, 1);
	}
}
 
function mkDiv(x, y, w, h)
{
	this.htm += '%%'+this.color+';'+x+';'+y+';'+w+';'+h+';';
}

Open in new window

0
wizkid2332
Asked:
wizkid2332
1 Solution
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
Just read about onmousemove function:

catch movements on every mousemove function then draw it, after retrieving position from Event (attached to onmousemove event).

Connect that function with your div - then with proper coding you can do it. I wont do this for you because this is alot of coding, especially if I did not wrote the rest so...:)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now