Solved

drawing with javscript int a web form

Posted on 2009-05-05
1
640 Views
Last Modified: 2015-01-05
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
Comment
Question by:wizkid2332
1 Comment
 
LVL 18

Accepted Solution

by:
Pawel Witkowski earned 500 total points
ID: 24325388
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question