Solved

drawing with javscript int a web form

Posted on 2009-05-05
1
641 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

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 …
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

752 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