1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

chang brush color in javascript paint

Discussion in 'JavaScript' started by matthewst, Aug 20, 2007.

0
  1. #1
    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?

    <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>
    Code (markup):
     
    matthewst, Aug 20, 2007 IP
  2. matthewst

    matthewst Member

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #2
    moved the palette form to an iframe below the image so the buttons are actually clickable
     
    matthewst, Aug 20, 2007 IP
  3. matthewst

    matthewst Member

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #3
    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
    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";
	}
    Code (markup):
    php form
    <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>
    Code (markup):
     
    matthewst, Aug 21, 2007 IP