Nesse projeto que caí de paraquedas (porque não tenho experiencia em programacao) estou com várias dificuldades diferentes, então estou dividindo os problemas em tópicos diferentes com títulos que ajudem os demais usuários a encontrar as discussoes das suas dúvidas.
Esse é meu problema mais complicado...
Breve descricao:
O código JS abaixo captura a posicao do click do mouse na tela e coloca nas variáveis X,Y e X2,Y2. (funcao point_it)
Tenho que desenhar um retangulo com essas duas coordenadas, que representa a área da imagem selecionada pelo usuário. (funcao retangulo)
A idéia melhor na verdade seria obter os dados dos dois pontos com uma funcao que interpretasse um click no mouse segurando o botao (x,y), arrastando e soltando (x2,y2), mas sou muito iniciante pra conseguir fazer isso... melhor comecar por baixo por um código que já esteja pronto e possa se aproveitar. =´)
Meu código está assim:
<html>
<head>
<title>Heatmap Area - Coordenates</title>
<script type="text/javascript" src="wz_jsgraphics.js"></script>
<script type="text/javascript">
var file = "f18_12pt";
var x = null;
var y = null;
var x2 = 0;
var y2 = 0;
var clicky = 0;
var clicks = Array();
var url;
wichX = 'x';
wichY = 'y';
function $(o){
return document.getElementById(o);
}
function point_it(event){
turn = clicky%2;
if (!turn){
wichX = 'x';
wichY = 'y';
}else{
wichX = 'x2';
wichY = 'y2';
x2 = x;
y2 = y;
}
pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("myCanvas").offsetLeft;
pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("myCanvas").offsetTop;
document.getElementById(wichX).value = pos_x;
document.getElementById(wichY).value = pos_y;
eval (wichX + ' = ' + pos_x);
eval (wichY + ' = ' + pos_y);
//if (x2 > 0)
//{
// retangulo(x, y, x2, y2);
//}
url= 'http://localhost/heatmap_area.php?x=' + x + '&y=' + y + '&x2=' + x2 + '&y2=' + y2 + '&file=' + file;
clicky++;
}
</script>
</head>
<body>
<div id="myCanvas" style="position:relative;background-color:#FFFFCC" onclick="point_it(event)"><img src="f18_12pt.png" alt="f18_12pt.png" /></div>
<form id="form1" name="form1" method="post">
<p>
X 1: <input type="text" name="x1" id="x" /> Y 1: <input type="text" name="y1" readonly="readonly" id="y" ><br>
X 2: <input type="text" name="x2" id="x2" > Y 2: <input type="text" name="y2" readonly="readonly" id="y2" ><br>
</p>
<input type="button" value="Submit" onclick="window.location.href=url;"/>
</form>
<script type="text/javascript">
var cnv = $("myCanvas");
var jg = new jsGraphics(cnv);
function retangulo(x, y, x2, y2)
{
jg.clear()
jg.setColor("#ff0000"); // red
jg.setStroke(1);
jg.mkRectDott(x, y, x2, y2); // co-ordinates related to "myCanvas"
jg.paint();
}
</script>
</body>
</html>
No momento está ocorrendo 2 problemas que não consigo resolver:
1)
A captura das coordenadas acontece corretamente variando a alocacao do valor em x,y e x2,y2. Quando adiciono o trecho if (x2 > 0) { retangulo(x, y, x2, y2); } o valor de x,y permanece como o primeiro capturado e só muda o valor de x2,y2. =´(
2)
O retangulo não é desenhado mesmo tendo o valor de x,y e x2,y2.
Na biblioteca wz_jsgraphics.js a funcao jsGraphics aparece com os parametros jsGraphics(id, wnd) mas não sei o que se trata cada um deles. =´(
Pergunta
three
Olá de novo pessoal,
Nesse projeto que caí de paraquedas (porque não tenho experiencia em programacao) estou com várias dificuldades diferentes, então estou dividindo os problemas em tópicos diferentes com títulos que ajudem os demais usuários a encontrar as discussoes das suas dúvidas.
Esse é meu problema mais complicado...
Breve descricao:
O código JS abaixo captura a posicao do click do mouse na tela e coloca nas variáveis X,Y e X2,Y2. (funcao point_it)
Tenho que desenhar um retangulo com essas duas coordenadas, que representa a área da imagem selecionada pelo usuário. (funcao retangulo)
A idéia melhor na verdade seria obter os dados dos dois pontos com uma funcao que interpretasse um click no mouse segurando o botao (x,y), arrastando e soltando (x2,y2), mas sou muito iniciante pra conseguir fazer isso... melhor comecar por baixo por um código que já esteja pronto e possa se aproveitar. =´)
Meu código está assim:
<html> <head> <title>Heatmap Area - Coordenates</title> <script type="text/javascript" src="wz_jsgraphics.js"></script> <script type="text/javascript"> var file = "f18_12pt"; var x = null; var y = null; var x2 = 0; var y2 = 0; var clicky = 0; var clicks = Array(); var url; wichX = 'x'; wichY = 'y'; function $(o){ return document.getElementById(o); } function point_it(event){ turn = clicky%2; if (!turn){ wichX = 'x'; wichY = 'y'; }else{ wichX = 'x2'; wichY = 'y2'; x2 = x; y2 = y; } pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("myCanvas").offsetLeft; pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("myCanvas").offsetTop; document.getElementById(wichX).value = pos_x; document.getElementById(wichY).value = pos_y; eval (wichX + ' = ' + pos_x); eval (wichY + ' = ' + pos_y); //if (x2 > 0) //{ // retangulo(x, y, x2, y2); //} url= 'http://localhost/heatmap_area.php?x=' + x + '&y=' + y + '&x2=' + x2 + '&y2=' + y2 + '&file=' + file; clicky++; } </script> </head> <body> <div id="myCanvas" style="position:relative;background-color:#FFFFCC" onclick="point_it(event)"><img src="f18_12pt.png" alt="f18_12pt.png" /></div> <form id="form1" name="form1" method="post"> <p> X 1: <input type="text" name="x1" id="x" /> Y 1: <input type="text" name="y1" readonly="readonly" id="y" ><br> X 2: <input type="text" name="x2" id="x2" > Y 2: <input type="text" name="y2" readonly="readonly" id="y2" ><br> </p> <input type="button" value="Submit" onclick="window.location.href=url;"/> </form> <script type="text/javascript"> var cnv = $("myCanvas"); var jg = new jsGraphics(cnv); function retangulo(x, y, x2, y2) { jg.clear() jg.setColor("#ff0000"); // red jg.setStroke(1); jg.mkRectDott(x, y, x2, y2); // co-ordinates related to "myCanvas" jg.paint(); } </script> </body> </html>A biblioteca wz_jsgraphics.js baixei do site: http://www.walterzorn.com/jsgraphics/jsgra..._e.htm#download
No momento está ocorrendo 2 problemas que não consigo resolver:
1)
A captura das coordenadas acontece corretamente variando a alocacao do valor em x,y e x2,y2. Quando adiciono o trecho if (x2 > 0) { retangulo(x, y, x2, y2); } o valor de x,y permanece como o primeiro capturado e só muda o valor de x2,y2. =´(
2)
O retangulo não é desenhado mesmo tendo o valor de x,y e x2,y2.
Na biblioteca wz_jsgraphics.js a funcao jsGraphics aparece com os parametros jsGraphics(id, wnd) mas não sei o que se trata cada um deles. =´(
Esse código js peguei da página http://srsilveira.com/teste/clickTrace/ e por isso achei que ia funcionar.
Bem... estou recorrendo a voces que tem mais experiencia no assunto pra algumas dicas.
Qualquer evolucao no código posto aqui pra dividir com voces.
Grande abraco, e obrigado desde já
Three
Editado por threeLink para o comentário
Compartilhar em outros sites
1 resposta a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.