Solved

drawing with javscript int a web form

Posted on 2009-05-05
1
639 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

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

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

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

825 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