...

View Full Version : change brush color in javascript paint



matthewst
08-20-2007, 09:56 PM
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>

matthewst
08-20-2007, 10:16 PM
moved the palette form to an iframe below the image so the buttons are actually clickable

matthewst
08-21-2007, 03:53 PM
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";
}

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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum