SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    change brush color in javascript paint

    First I'm a java noob. Second I borrowed 91.23% of the following code from http://chat.ma.la/draw.html.

    I need to be able to change the "brush" color. Any ideas?

    Code:
    <style>
    	body{
    	background:#fff;
    		padding:0;
    	margin:0;
    	width:100%;
    	height:100%;
    	background-color: #FFFFFF;
    	background-image: url();
    	background-repeat: no-repeat;
    	background-position: center;
    	background-position:top; 
    	}
    	#pointer{
    		position:absolute;
    		background:#000;
    		width:3px;
    		height:3px;
    		font-size:1px;
    		z-index:32768;
    	}
    </style>
    </head>
    <body onselectstart='return false'>
    <center>
    <?php
    if ($web_image_url != "")
    $paint_image = "$web_image_url";
    else
    $paint_image = "images/my_face.jpg";
    ?>
    <!--//////////////////////help me 1////////////////////////////-->
    <form name="palette">
    <input name="white" type="button" value="WHITE" onClick="changeColor('white');">
    <input name="black" type="button" value="BLACK" onClick="changeColor('black');">
    <input name="red" type="button" value="RED" onClick="changeColor('red');">
    <input name="color" type="button" value="GREEN" onClick="changeColor('green');">
    <input name="color" type="button" value="BLUE" onClick="changeColor('blue');">
    </form>
    <!--//////////////////////end help me 1////////////////////////////-->
    <img src="<?=$paint_image ?>" height="75%">
    </center>
    <div id="pointer"></div>
    <form name="fm" method="POST" target="_new" action="gd.cgi">
    <input type="hidden" id="l_x" name="l_x">
    <input type="hidden" id="l_y" name="l_y">
    </form>
    <script>
    function save(){
    	var buf_x="";
    	var buf_y="";
    	with(JSD_CONTROL){
    		for(i=0;i<canvas.line_number;i++){
    			buf_x += LogX[i] + "|"
    			buf_y += LogY[i] + "|"
    		}
    	}
    	document.getElementById("l_x").value = buf_x;
    	document.getElementById("l_y").value = buf_y;
    	document.fm.submit();
    }
    </script>
    <script>
    cache_obj = new Object();
    recent_dot = 0;
    nobasi_x = 0;
    nobasi_y = 0;
    dot_num = 0;
    IE = (navigator.appName == "Microsoft Internet Explorer")?1:0;
    if (window.opera){IE = 0}
    var mpath   = '';
    
    var KC = new Object();
    KC = {
    	Z : 90,
    	X : 88,
    	Q : 81,
    	A : 65,
    	plus  : 107,
    	minus : 109
    }
    var USE_VML = 1;
    
    
    function jsd_canvas(o){
    	this.canvasObj = o.canvasObj || document.body;
    	
    	this.nowX = 0;
    	this.nowY = 0;
    	
    	this.PlotX = new Array();
    	this.PlotY = new Array();
    	
    	this.kitenX = 0;
    	this.kitenY = 0;
    
    	this.isIE = (navigator.appName == "Microsoft Internet Explorer")?1:0;
    	this.line_number = 0;
    	return this;
    }
    
    function jsd_brush(o){
    	this.size  =  o.size || 3;
    	this.color =  o.color || "#F00";
    	return this;
    }
    
    function jsd_control(o){
    	this.canvas = o.canvas;
    	this.brush  = o.brush;
    	this.nowX = 0;
    	this.nowY = 0;
    	this.mdown = 0;
    	this.dot = document.createElement("span", "Dot");
    	with(this.dot.style){
    		fontSize = "0px";
    		background = "black";//Color;
    		position = "absolute";
    		zIndex = "10000";
    	}
    	
    	this.LogX = new Array();
    	this.LogY = new Array();
    	return this;
    }
    
    
    jsd_control.prototype = {
    	launch : function (){
    		
    		with (this){
    			canvas.pointerObj = document.getElementById("pointer");
    			setBrush(brush.size,brush.color);
    		}
    	},
    	mousedown : function(e){
    		this.mdown = 1;
    		this.LogX[this.canvas.line_number] = "";
    		this.LogY[this.canvas.line_number] = "";
    		this.PastX = e.pageX;
    		this.PastY = e.pageY;
    	},
    	mouseup   : function(){
    		this.mdown = 0;
    		this.canvas.line_number++;
    		this.set_next();
    	},
    	
    	set_next : function (){
    		with(this.canvas){
    			var div = document.createElement("div");
    			div.id = "l" + line_number;
    			
    			document.body.appendChild(div);
    			cache_obj[line_number] = div;
    			dot_num = 0;
    			window.status = "n" + line_number + "";
    		}
    	},
    	logging  : function (){
    		
    	},
    	
    	setBrush : function (Size,Color){
    		with(this.canvas.pointerObj.style){
    			width =  Size + "px";
    			height = Size + "px";
    			background = Color ;
    		}
    		with (this.dot.style){
    			width =  Size + "px";
    			height = Size + "px";
    		}
    	},
    
    	line     : function (X,Y){
    		var xMove = X - this.PastX;
    		var yMove = Y - this.PastY;
    		var xDecrement = xMove < 0 ? 1 : -1;
    		var yDecrement = yMove < 0 ? 1 : -1;
    		var b_dot = 1;
    		var count = 0;
    		if (Math.abs(xMove) >= Math.abs(yMove)){
    			for (var i = xMove; i != 0; i += xDecrement){
    				count++;
    				if(count % b_dot == 0){
    					PlotX[PlotX.length] = X - i;
    					PlotY[PlotY.length] = Y - Math.round(yMove * i / xMove);
    				}
    			}
    		}else{
    			for (var i = yMove; i != 0; i += yDecrement){
    				count++;
    				if(count % b_dot == 0){
    					PlotX[PlotX.length] = X - Math.round(xMove * i / yMove);
    					PlotY[PlotY.length] = Y - i;
    				}
    			}
    		}
    		for(var i=0;i<PlotX.length;i++){
    			this.drawDot(PlotX[i],PlotY[i])
    		}
    		PlotX=new Array();
    		PlotY=new Array();
    		this.PastX = X; this.PastY = Y;
    	},
    	drawDot : function(x,y){
    		
    		line_number = JSD_CONTROL.canvas.line_number;
    		if (recent_dot && this.kitenY == y && !nobasi_y){
    			recent_dot.style.width = Math.abs(this.kitenX - x) + 1 + "px";
    			
    			if(this.kitenX > x){
    				recent_dot.style.left = x + "px";
    			}
    			nobasi_x = 1;
    			nobasi_y = 0;
    		}else if(recent_dot && this.kitenX == x && !nobasi_x){
    			recent_dot.style.height = Math.abs(this.kitenY - y) + 1 + "px";
    			
    			if(this.kitenY > y){
    				recent_dot.style.top = y + "px";
    			}
    			nobasi_x = 0;
    			nobasi_y = 1;
    		}else{
    			var dot = this.dot.cloneNode(true);
    			with(dot.style){
    				left = x + "px";
    				top  = y + "px";
    			}
    			recent_dot = dot;
    
    			cache_obj[line_number].appendChild(dot);
    
    			this.kitenX = x;
    			this.kitenY = y;
    			nobasi_x = 0;
    			nobasi_y = 0;
    		}
    	},
    	mousemove : function (e,obj){
    		with(obj){
    			if(USE_VML){
    				status = canvas.line_number + ":" + nowX + "," + nowY;
    			}
    			nowX = e.pageX;
    			nowY = e.pageY;
    			if(this.mdown){
    				this.LogX[canvas.line_number] += nowX + ",";
    				this.LogY[canvas.line_number] += nowY + ",";
    				line(nowX,nowY);
    			}
    		}
    		with(obj){
    			pointerObj.style.left = nowX - (brush.size / 2) + "px";
    			pointerObj.style.top  = nowY - (brush.size / 2) + "px";
    		}
    	},
    	keydown : function (e,obj){
    		var key = e.keyCode || e.which;
    		var bold = function (){
    			with(obj.brush){size++;obj.setBrush(size,color);}
    		};
    		var thin = function (){
    			with(obj.brush){
    				if(size > 1)size--;obj.setBrush(size,color);}
    			};
    		var back = function (){
    				with(obj.canvas){
    					if(line_number > 0){
    					line_number--;
    					var re = document.getElementById('l'+ (line_number));
    					canvasObj.removeChild(re);
    					line_number--;
    					obj.mouseup();
    					}
    				}
    			};
    		switch(key){
    			case KC.Z:back();break;
    			case KC.Q:bold();break;
    			case KC.plus:bold();break;
    			case KC.A:thin();break;
    			case KC.minus:thin();break;
    		}
    	},
    	addEvent : function(obj, type, listener) {
    		if (obj.addEventListener) // Std DOM Events
    			obj.addEventListener(type, listener, false);
    		else if (obj.attachEvent) // IE
    			obj.attachEvent(
    				'on' + type,
    				function() { listener( {
    					type            : window.event.type,
    					keyCode         : window.event.keyCode,
    					target          : window.event.srcElement,
    					currentTarget   : obj,
    					clientX         : window.event.clientX,
    					clientY         : window.event.clientY,
    					pageX           : document.body.scrollLeft+ window.event.clientX,
    					pageY           : document.body.scrollTop + window.event.clientY,
    					shiftKey        : window.event.shiftKey,
    					stopPropagation : function() { window.event.cancelBubble = true }
    				} ) }
    			);
    	}
    };
    
    
    if (IE && USE_VML){
    	IE_draw = new Object();
    	IE_draw.prototype = {
    		set_next : function(){
    			mpath = '';
    			var w='<v:shape id="vml_line'
    			+ this.canvas.line_number
    			+ '" filled="false" strokecolor="' + this.brush.color + '"'
    			+ ' strokeweight="' + this.brush.size + 'px" style="behavior:url(#default#VML);'
    			+ ' visibility:visible;position:absolute;left:0;top:0;width:100;height:100;antialias:false;"'
    			+ ' coordsize="100,100" coordorigin="0, 0" >'
    			+ '<v:path v="m 0,0 l 100,100 200,50 x e"/></v:shape>';
    			var sp = document.createElement("span");
    			sp.innerHTML = w;
    			sp.id = "l" + this.canvas.line_number;
    			document.body.appendChild(sp);
    			cache_obj[this.canvas.line_number] = document.getElementById('vml_line'+ this.canvas.line_number);
    		},
    		line : function (x,y){
    			if(mpath){
    				mpath += x + ',' + y + ' ';
    			}else{
    				mpath = x + ',' + y + ' l ';
    			}
    			var v = cache_obj[this.canvas.line_number];
    			v.path = 'm ' + mpath + ' ';
    			v.strokeweight = this.brush.size + "px";
    		}
    	};
    	force_inherit(jsd_control,IE_draw);
    }
    
    <!--////////////////////help me 2/////////////////////-->
    function changeColor(chosenColor) {
        var color = "";
        
        currentColor = chosenColor;
        color = currentColor + ".gif";
        document.jsd_brush = color;
    }
    <!--///////////////////end help me 2/////////////////////-->
    
    var JSD_CONTROL = new jsd_control({
    	canvas :jsd_canvas({
    			
    		}),
    	brush  :jsd_brush({
    			size:2,
    			color:"black"
    		})
    });
    window.onload = function(){
    	JSD_CONTROL.set_next();
    	with(JSD_CONTROL){
    		addEvent(canvas.canvasObj,'mousedown',function(e){mousedown(e,JSD_CONTROL)})
    		addEvent(document,'keydown',function(e){keydown(e,JSD_CONTROL)})
    		addEvent(canvas.canvasObj,'mouseup',  function(e){mouseup(e,JSD_CONTROL)})
    		addEvent(canvas.canvasObj,'mousemove',function(e){mousemove(e,JSD_CONTROL)})
    	}
    }
    JSD_CONTROL.launch();
    
    function copy_properties(src, dest){
        for (var prop in src) {
            dest[prop] = src[prop];
        }
    }
    
    function force_inherit(subClass, superClass) {
        copy_properties(superClass.prototype, subClass.prototype);
    }
    </script>

  2. #2
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    moved the palette form to an iframe below the image so the buttons are actually clickable

  3. #3
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was able to get it to change colors using an iframe and form. The problem I have now is each time I select a new color it resets the image (erases everything I drew).

    javascript painter
    Code:
    function jsd_control(o){
    	this.canvas = o.canvas;
    	this.brush  = o.brush;
    	this.nowX = 0;
    	this.nowY = 0;
    	this.mdown = 0;
    	this.dot = document.createElement("span", "Dot");
    	with(this.dot.style){
    		fontSize = "0px";
    		<?php
    		if ($color == "white")
    		echo "background = 'white';";
    		elseif ($color == "black")
    		echo "background = 'black';";
    		elseif ($color == "red")
    		echo "background = 'red';";
    		elseif ($color == "green")
    		echo "background = 'green';";
    		elseif ($color == "blue")
    		echo "background = 'blue';";
    		else
    		echo "background = 'black';";
    		?>
    		position = "absolute";
    		zIndex = "10000";
    	}
    php form
    Code:
    <form action="copy_painter.php" name="white" target="image_painter">
    <input name="color" type="hidden" value="white">
    <input name="brush_color" type="submit" value="White">
    </form>
    <form action="copy_painter.php" name="black" target="image_painter">
    <input name="color" type="hidden" value="black">
    <input name="brush_color" type="submit" value="Black">
    </form>
    <form action="copy_painter.php" name="red" target="image_painter">
    <input name="color" type="hidden" value="red">
    <input name="brush_color" type="submit" value="Red">
    </form>
    <form action="copy_painter.php" name="green" target="image_painter">
    <input name="color" type="hidden" value="green">
    <input name="brush_color" type="submit" value="Green">
    </form>
    <form action="copy_painter.php" name="blue" target="image_painter">
    <input name="color" type="hidden" value="blue">
    <input name="brush_color" type="submit" value="Blue">
    </form>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •