drawing application

**mido911** · 12-27-2010, 06:22 PM

I need to create an application in javascript for drawing flowcharts can anybody help?

**djr33** · 12-27-2010, 09:42 PM

Javascript can't create an "application" because it isn't possible to save anything-- there's no way to have an "export" function or save it to a database. If you involve a serverside language like PHP you could do this. If you just need the interface it's possible, but might become complex.
Someone may have some advice for you, but if you don't know where to start and want someone to create this for you, you will need to repost this as a paid request because this is a major project. We're happy to help for free, but doing an entire project is beyond that.

Also, please post more details. Flowcharts could be very simple or very complex, so what are your needs? Do you have an example? A website? Some code already?

**mido911** · 12-28-2010, 05:16 AM

the application will be some what like this site http://www.lucidchart.com/documents/...b-17d60afcbe04

It will not contain all its features only some features like:

1.drag and drop
2. undo,redo,copy,cut,and paste
3. draw line
4.group and ungrouping
5.zoomin and zoomout
6.save

other functionalities I will disregard but don't know how I can achieve that need help.

**mido911** · 12-28-2010, 08:07 PM

hello again I have achieved some of the functionalities need your help in the zoom part

Code:

<!doctype html>
<html>
  <head>
    <title>Testing</title>
 
    <meta charset="utf-8">
    <script type="text/javascript" src="js/jquery-1.4.4.js"></script>
    <script type="text/javascript" src="js/jquery.ui.core.js"></script>
    <script type="text/javascript" src="js/jquery.ui.widget.js"></script>
     <link href="css/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
    <script type="text/javascript" src="js/jquery.ui.draggable.js"></script>
    <script type="text/javascript" src="js/jquery.ui.droppable.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
     <script type="text/javascript" src="js/jquery.min.js"></script>
       <script src="jsapi" type="text/javascript"></script>
	<script type="text/javascript">
	    google.load("jquery", "1");
	    google.load("jqueryui", "1");
	</script>

	<link rel="stylesheet" type="text/css" href="stylesheets/style.css" media="all" />

	<script type="text/javascript">
 

    $(document).ready(function(){
   

        //Counter
        counter = 0;
        //Make element draggable
        $(".drag").draggable({
            helper:'clone',
            containment: 'frame',

            //When first dragged
            stop:function(ev, ui) {
            	var pos=$(ui.helper).offset();
            	objName = "#clonediv"+counter
            	$(objName).css({"left":pos.left,"top":pos.top});
            	$(objName).removeClass("drag");


               	//When an existiung object is dragged
                $(objName).draggable({
                	containment: 'parent',
                    stop:function(ev, ui) {
                    	var pos=$(ui.helper).offset();
                    	//console.log($(this).attr("id"));
						//console.log(pos.left)
                        //console.log(pos.top)
                    }
                });
            }
        });
        //Make element droppable
        $("#frame").droppable({
			drop: function(ev, ui) {
				if (ui.helper.attr('id').search(/drag[0-9]/) != -1){
					counter++;
					var element=$(ui.draggable).clone();
					element.addClass("tempclass");
					$(this).append(element);
					$(".tempclass").attr("id","clonediv"+counter);
					$("#clonediv"+counter).removeClass("tempclass");

					//Get the dynamically item id
					draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
					itemDragged = "dragged" + RegExp.$1
					//console.log(itemDragged)

					$("#clonediv"+counter).addClass(itemDragged);
				}
        	}
        });
        
  



    });

	</script>
       <script>          
		function loadCanvas() {
			var canvas = document.getElementById('canvas');
			if(canvas.getContext) {
			var context = canvas.getContext('2d');                                
                               for (var x = 0; x <= 500; x += 10) {
                                  context.moveTo(x, 0);
                                  context.lineTo(x, 550);
                                }
                                for (var y = 0; y <= 550; y += 10) {
                                  context.moveTo(0, y);
                                  context.lineTo(500, y);
                                }
                                context.strokeStyle = "#eee";
                                context.stroke();
                                
                                context.beginPath();
                                for (var x = 0; x <= 500; x += 50) {
                                  context.moveTo(x, 0);
                                  context.lineTo(x, 550);
                                }
                                for (var y = 0; y <= 550; y += 50) {
                                  context.moveTo(0, y);
                                  context.lineTo(500, y);
                                }

                                context.strokeStyle = "#e1e1e1";
                                context.stroke();
			} else {
				document.getElementById('canvas').style.display = 'none';
				document.getElementById('no-canvas').style.display = 'block';
			}


		}
		</script>


</head>

<body onload="loadCanvas()">

<div id="wrapper">
	<div id="options">
		<div id="drag1" class="drag"></div> <!-- end of drag1 -->
		<div id="drag2" class="drag"></div> <!-- end of drag2 -->
		<div id="drag3" class="drag"></div> <!-- end of drag3 -->
		<div id="drag4" class="drag"></div> <!-- end of drag4 -->

		<div id="drag5" class="drag"></div> <!-- end of drag5 -->
		<div id="drag6" class="drag"></div> <!-- end of drag6 -->
	</div><!-- end of options -->
	<div id="frame">
	 <canvas id="canvas" width="500" height="550"></canvas>
		
	</div><!-- end of frame -->
</div><!-- end of wrapper -->






</body>
</html>

Thread: drawing application

Thread Tools

Search Thread

drawing application

Bookmarks

Bookmarks

Posting Permissions